Today social media is a rapidly growing channel for promoting your
business. Facebook dominates this space and provides opportunities
through their business pages making a good Facebook page design important. These pages can now display your actual website using iFrame and adds another dimension to your website design challenges.
With Facebook making the switch from FBML to iFrame with a 520 pixels width, the days of coding for yet another version of the website in another markup are over. The new approach means that you can design and build websites as before with HTML, CSS and JavaScript. This is all very good but there is still work to be done in the default markup, HTML.
The Facebook iFrame is not detectable as a device. So, responsive web design is hard to apply in this scenario.
In this case there are two options to display your site on Facebook.
1. Plan your current website design to display a portion of your website with all the essential information visible in the iFrame in the 520 pixels width with scroll bars showing additional sections
2. Create a Facebook compatible microsite having a width of 520 pixels and call that site in the Facebook page iframe by setting the Canvas URL to the microsite main page.
Currently the second option is a better option as it offers more control.
2. Create an iFrame tab for your facebook page.
I. Installing the Facebook Developer Application
Log in to Facebook and then visit the URL http://www.facebook.com/developers
If this is your first time install the Developer Application, you will see the Request for Permission dialog box shown below:
Click the Allow button to proceed.
II. Creating your iframe application
Now that you have the Developer App installed, click on the Set up New App button.
Give your application a name, click the Agree bubble and then click the Create App button. Give your app a name that is short and descriptive. This name will appear on your list of apps on your developer page.
Enter the security phrase and then click Submit.
III. The “About” tab
You can add a small description for your App here and change the default icon and logo (optional)
IV. The “Facebook Integration” Tab
Click on the Facebook Integration tab.
In the Canvas URL section, enter the URL you wish to call in iframe
Further down on that tab, enter information about your Tab in the Page Tabs section.
V. Installing your iFrame application on your Fan Page
Click on the Application Profile Page link on the right side of your application page.
Now click the Add to My Page link on the left of your facebook page.
Find the page that you want to add the Tab to and click the Add to Page button.
Visit your Facebook page and you will have a Tab on your Left with the name provided by you.
Facebook now uses iframe to display your website on your Facebook page. This provides an opportunity to provide your fans with a better experience directly through your regular website. This also poses its own unique design challenges.
The feature complements Facebook and enables you to provide your fans with a complete web experience. It combines the power of Facebook with that of your own website making for a truly interactive as well as informative aspect.
With Facebook making the switch from FBML to iFrame with a 520 pixels width, the days of coding for yet another version of the website in another markup are over. The new approach means that you can design and build websites as before with HTML, CSS and JavaScript. This is all very good but there is still work to be done in the default markup, HTML.
The Facebook iFrame is not detectable as a device. So, responsive web design is hard to apply in this scenario.
In this case there are two options to display your site on Facebook.
1. Plan your current website design to display a portion of your website with all the essential information visible in the iFrame in the 520 pixels width with scroll bars showing additional sections
2. Create a Facebook compatible microsite having a width of 520 pixels and call that site in the Facebook page iframe by setting the Canvas URL to the microsite main page.
Currently the second option is a better option as it offers more control.
Steps to setup your Facebook tab and display your website using iFrame
1. Create a facebook compatible microsite.2. Create an iFrame tab for your facebook page.
I. Installing the Facebook Developer Application
Log in to Facebook and then visit the URL http://www.facebook.com/developers
If this is your first time install the Developer Application, you will see the Request for Permission dialog box shown below:
Click the Allow button to proceed.
II. Creating your iframe application
Now that you have the Developer App installed, click on the Set up New App button.
Give your application a name, click the Agree bubble and then click the Create App button. Give your app a name that is short and descriptive. This name will appear on your list of apps on your developer page.
Enter the security phrase and then click Submit.
III. The “About” tab
You can add a small description for your App here and change the default icon and logo (optional)
IV. The “Facebook Integration” Tab
Click on the Facebook Integration tab.
In the Canvas URL section, enter the URL you wish to call in iframe
Further down on that tab, enter information about your Tab in the Page Tabs section.
- The Tab Name is what will appear on the sidebar of your Fan Page.
- Enter index.php in the Tab URL box.
V. Installing your iFrame application on your Fan Page
Click on the Application Profile Page link on the right side of your application page.
Now click the Add to My Page link on the left of your facebook page.
Find the page that you want to add the Tab to and click the Add to Page button.
Visit your Facebook page and you will have a Tab on your Left with the name provided by you.
Facebook now uses iframe to display your website on your Facebook page. This provides an opportunity to provide your fans with a better experience directly through your regular website. This also poses its own unique design challenges.
The feature complements Facebook and enables you to provide your fans with a complete web experience. It combines the power of Facebook with that of your own website making for a truly interactive as well as informative aspect.
Tidak ada komentar:
Posting Komentar