Top Banner
xsMobi: Create “Likeable” Pages for Facebook's Open Graph How to add a Like button to individual pages of a mobile site
18

Create Likeable Pages

Mar 30, 2016

Download

Documents

xsMobi, the online mobile website builder, allows users to create “likeable” pages by adding the Facebook Like button to a site and its individual pages. This means they can be included in the social graph with just one more click. This demo shows how a page from a mobile site built with xsMobi is made “likeable” and added to Facebook's Open Graph.
Welcome message from author
This document is posted to help you gain knowledge. Please leave a comment to let me know what you think about it! Share it to your friends and learn new things together.
Transcript
Page 1: Create Likeable Pages

xsMobi: Create “Likeable” Pages for Facebook's

Open GraphHow to add a Like button to

individual pages of a mobile site

Page 2: Create Likeable Pages

xsMobi (http://www.xsmobi.com/), the online mobile website builder, allows users to create “likeable” pages by adding the Facebook Like button to a site and its individual pages. This means they can be included in the social graph with just one more click.  This demo shows how a page from a mobile site built with xsMobi is made “likeable” and added to Facebook's Open Graph. 

Page 3: Create Likeable Pages

Site used in example:Westfalia Bed & Breakfast Inn

in MunichMobile site: http://www.mobihexer.de/onepageview/pension-westfalia-muenchen.html

Page 4: Create Likeable Pages

To begin, log in to the xsMobi home page.English version: www.xsmobi.com

German version: www.mobihexer.de

Page 5: Create Likeable Pages

The xsMobi menu lists pages, images and links. There are German and English pages on the mobile

site. The English pages are highlighted.

Page 6: Create Likeable Pages

Under “User Data and Settings”, you can enter Facebook-specific data such as description, type and

your Facebook ID.

Page 7: Create Likeable Pages

Now select the page you want to make likeable and add to the Open Graph.

Page 8: Create Likeable Pages

Specify the page type. In this case the type is “hotel”.

Page 9: Create Likeable Pages

After the page has been edited, go to “fb pages”.

Page 10: Create Likeable Pages

 

The “fb pages” section displays all the pages of the mobile site and their URLs.  Thus “fb pages” is very similar to “OnePageView”, which displays all mobile pages within a single document:

http://www.mobihexer.de/onepageview/pension-westfalia-muenchen.html

Page 11: Create Likeable Pages

fb pages” is a public page:

http://www.xsmobi.com/page/index.cfm?site=pension-westfalia-muenchen

Page 12: Create Likeable Pages

Select the page you are interested in, here the first of the English pages. It already has a Facebook Like

button (since you specified the “type”).

Page 13: Create Likeable Pages

Before you click “Like”, you should make sure that all the data transferred to Facebook is correct. To do this, use Facebook's URL Linter. The linter lists exactly which data will flow to Facebook once you click “Like”, thus ensuring that the button works properly.

The link to the URL linter is public. In this example, the linter page is:

http://developers.facebook.com/tools/lint/?url=...westfalia...

Page 14: Create Likeable Pages

Once you have checked the URL Linter data,go back to the page...

Page 15: Create Likeable Pages

…and click “Like”. Now the page is liked!

Page 16: Create Likeable Pages

When you reload the page a few seconds later, the Like information has changed. The “Admin Page” link confirms that an internal Facebook page was created; it corresponds to the one you just “Liked”.

Page 17: Create Likeable Pages

Since you “Liked” the page as its administrator, you can immediately proceed to the internal Facebook page created. It is an administrative interface that only administrators can view. The “Liked” page, however, is searchable within Facebook.  

Page 18: Create Likeable Pages