Create Facebook Pages the Smart Way

Create Facebook Pages the Smart Way Dr. Eckard Ritter internet partnership, Nuremberg, Germany April 22, 2011

In March 2011, Facebook migrated to a new page design which supports a new way to publish content on Facebook Pages.

It is now easier than ever and more straightforward to add the content of any web page to your Facebook Page by making it a tab on this page.

This was also possible with the old system (“static FBML”), but by using copy and paste — not very attractive and certainly not the “Web 2.0 way” to share content in real time! Now external content is integrated into Facebook with “IFrames”, which allows for much more flexibility.

This is good news for users of xsMobi, the “Mobile Website Builder”: once they’ve created a website, users ALREADY HAVE a tab version of the content for their Facebook page!

This tutorial shows how website content can be integrated into Facebook. It takes only a few minutes.

Prerequisites:  A website built with xsMobi  A verified Facebook account and a Facebook Page  A 16x16 px favicon plus a square-shaped logo

Content source: a specially formatted version of an xsMobi site adapted to fit into a Facebook Page Tab (500 px width). Sample page: the xsMobi manual, which is called “cutesite” (for historic reasons: “cutesite” is the former name of xsMobi). It is a mobile website. We see the PC format, of course, but it will become a tab within xsMobi’s Facebook page.

Let's begin the process of getting this page — which represents a complete site with multiple pages — into a Facebook Page Tab. Note: we are not learning how to create a Facebook Page (at this stage you should already have one). This tutorial shows how to add a Facebook Page Tab to your existing Facebook Page. A page can have multiple tabs.

To turn any web content into a tab on a Facebook Page, you simply create a Facebook application. Sound complicated? It’s not. It is simply the way to get content into Facebook.

Go to facebook.com/developers to set up a new app

Note: your Facebook account must already be verified using a mobile phone (SMS) or credit card. Otherwise it will not be possible to create a new application.

Click on Set Up New App

Enter an application name, agree to the Facebook terms

Click on Create App After you submit the form, a standard security check appears.

Enter the text which appears in the box and submit

Edit your application - Step 1 of 3: About

Add a description, upload an icon (16x16 px) and a logo:

Click on Save Changes

After saving the About data, proceed to Website

To edit the Website information, go to Edit Settings. This will take you back to About. Just navigate straight to the second item, Website.

Edit your Application - Step 2 of 3: Website This is quick and painless: just enter the URL of the web page to be integrated.

For our sample application, the site URL is http://ipartnership.de/facebook/cutesite/ Replace “cutesite” with the name of your application.

Note: a folder named “cutesite” must exist. (During the introductory period which ends in May 2011, this requires an invitation; afterward it can be done easily from the xsMobi menu).

After successfully saving the Website information, proceed to Facebook Integration

As before: to edit Facebook integration data, go to Edit Settings. This will take you back to About. Just navigate straight to the third item, Facebook Integration.

Edit your application - Step 3 of 3: Facebook Integration

 Canvas Page: enter the application's name (you could probably use an alternative name, but let's keep things easy).  Canvas URL: the URL of your xsMobi page, as before.  Social Discovery: select “Disabled”.  Tab Name: the link which appears on your Facebook page once the application is integrated. Here we are naming the tab “HowTo”.  Tab URL: same as the Canvas URL, but with “index.cfm” added at the end.

When you have finished editing the application, go to the Application Profile page: What is the “Application Profile� page? The app is ready, but you still have to decide where you want to use it, especially if you administer multiple pages. On the profile page you will select which pages will have the application as a tab.

The Application Profile page for our “cutesite� application

Click on Add to My Page At this stage there is nothing more to be done with the application profile. You can leave the other settings for later.

You will now be taken to a menu where you can select which of your pages you want to work with the application.

Even if you only have one page, you still need to select it.

Add the Application to a Page

In this example we are adding the application to the “Mobile Website Builder” page. This makes sense as the content of the “cutesite” app is the little “How To” guide for using the xsMobi site creator.

Remember: when we did the Facebook Integration, we called the Tab Name “HowTo”.

Now let's go to our Mobile Website Builder Facebook page facebook.com/mobihexer (“mobihexer”™ is the German brand name for xsMobi.)

Mobile Website Builder Facebook Page with “How To” tab

Let's see how it looks like: click on HowTo

xsMobi – Mobile Site Builder Tutorial – Integrated

The active HowTo tab (on.fb.me/xsmobi-tutorial) is highlighted and the tab name appears next to the header.

Comparison between old and new versions of Facebook Pages tabs

As you see, there is another tab named “HowTo” (the tabs have been rearranged: you can edit their order in the navigation menu). The old “HowTo” document holds exactly the same content. However it was created with static FBML, which is now obsolete.

The new kind of Facebook page allows for more flexibility with styles: it is easier to use sophisticated and unusual looks. Plus, the new “HowTo” page tab features a Google map. This was not so easy to do with the old version.

To take this a step further, all kind of widgets, such as photo galleries and YouTube videos, can be integrated into the new Facebook pages. You no longer need additional Facebook apps!

Conclusions and Suggestions on How to Maximize Benefits Note that the advantages of building websites with xsMobi, the “Mobile Website Builder” are not the same as they were three years ago. Mobile devices have changed a lot since back in 2008, when xsMobi (aka Mobihexer ™ in Germany) was developed. Today, the “OnePageView”, i.e. full-screen format for PC browsers, has become important for three reasons:  Content is still “mobile ok”, or “dotmobi compliant”.  Visitors like it because they can see the whole website on one page.  Page owners like it for its features and because it is very search engine-friendly, providing optimal “follow” links to their homepages.

 Having built a website with xsMobi, you are only a few minutes away from publishing the same content on Facebook by integrating the website as a page tab.  One major advantage over other Facebook Page tab design tools is that you reuse content. You have all the benefits of a search engine-friendly website with xsMobi, plus all the content is shared on Facebook.  Other Facebook page builders also let you edit the content anytime; however, the content is only on Facebook and nowhere else. What’s more, most systems have no RSS for sharing content. With xsMobi you automatically have two publishing channels: Facebook and the web. Plus xsMobi provides an RSS format that lets you share your content on any other site!  Think of a Facebook page as a website with the tabs as links to pages. Around seven to nine tabs will be displayed above the fold. Consider creating multiple tabs ... or think about using a tab (e.g. “contact us”) for multiple pages if you have more than one!  You don’t have an xsMobi website yet? Get one for free: www.xsmobi.com

About us internet partnership, based in Nuremberg, Germany, helps hotels and tourism organizations get found more easily on the web and reach a global audience.

Dr. Eckard Ritter, founder and CEO of internet partnership and champion of German travel & tourism promotion through the internet, has more than 16 years experience as an entrepreneur, technology expert and inventor.

He has developed several tourism sites for German and European destinations, booking systems and online site builders for mobile and desktop formats.

New in 2011: TouristInfo 2.0 (http://touristinfo.ning.com) A Social Network for Travelers and Tourism Professionals touristinfo urlaub.in.deutschland mobihexer touristinfo urlaub99euro mobihexer touristinfo touristinfo TouristInfo 2.0 deutschlandurlaub touristinfo touristinfo

urlaub99euro.de Dr. Eckard Ritter Urlaub in Deutschland internet partnership urlaub99euro touristinfo internet partnership mobihexer touristinfo mobihexer.de mobihexer.de/blog xsmobi.com

internet partnership, Dr. Eckard Ritter Adam-Klein-Str. 158, D-90431 Nuremberg, Germany www.ipartnership.de