Digital Points
Hi... My Dear Visitor nice to meet you here in this forum kindly register for being in touch with us..... Smile Smile



 
HomePortalCalendarGalleryFAQSearchMemberlistUsergroupsRegisterLog in
Affiliates

Latest topics
» SEO Stater to do list
Adding an iFrame Application to your Facebook Fan Page – 2011 EmptyFri Feb 15, 2013 3:17 pm by rachil

» Top 55 Social Bookmarking Websites
Adding an iFrame Application to your Facebook Fan Page – 2011 EmptyFri Feb 15, 2013 3:13 pm by rachil

» Hiiiiiiiiiiii
Adding an iFrame Application to your Facebook Fan Page – 2011 EmptyTue Feb 05, 2013 5:01 pm by boon_pal

» Analytics tool
Adding an iFrame Application to your Facebook Fan Page – 2011 EmptyTue Feb 05, 2013 4:49 pm by boon_pal

» Benefits of Search Engine Optimization
Adding an iFrame Application to your Facebook Fan Page – 2011 EmptySat Jan 19, 2013 12:09 am by fivestarawards

» Basic job of a SEO is to optimize a website
Adding an iFrame Application to your Facebook Fan Page – 2011 EmptyThu Jan 17, 2013 8:35 pm by boon_pal

» what is the SEO and SEM Difference
Adding an iFrame Application to your Facebook Fan Page – 2011 EmptyThu Jan 17, 2013 8:32 pm by boon_pal

» Google Dancing
Adding an iFrame Application to your Facebook Fan Page – 2011 EmptyThu Jan 17, 2013 8:17 pm by boon_pal

» how to increase websites page rank
Adding an iFrame Application to your Facebook Fan Page – 2011 EmptyWed Dec 26, 2012 10:30 pm by fivestarawards

September 2019
MonTueWedThuFriSatSun
      1
2345678
9101112131415
16171819202122
23242526272829
30      
CalendarCalendar
Social bookmarking
Social bookmarking digg  Social bookmarking delicious  Social bookmarking reddit  Social bookmarking stumbleupon  Social bookmarking slashdot  Social bookmarking yahoo  Social bookmarking google  Social bookmarking blogmarks  Social bookmarking live      

Bookmark and share the address of Digital Points on your social bookmarking website
Sponsors

Share
 

 Adding an iFrame Application to your Facebook Fan Page – 2011

Go down 
AuthorMessage
sasikumar

sasikumar

Posts : 47
Points : 144
Reputation : 6
Join date : 2011-09-21

Adding an iFrame Application to your Facebook Fan Page – 2011 Empty
PostSubject: Adding an iFrame Application to your Facebook Fan Page – 2011   Adding an iFrame Application to your Facebook Fan Page – 2011 EmptyMon Sep 26, 2011 6:18 pm

Quote :
IMPORTANT: You have to upgrade your Fan Page to the new layout before the below application will work on your Fan Page. Many Pages will see a big banner at the top of their Page announcing the upgrade. If you don’t, you can click here to upgrade your Fan Page.

Adding an iFrame Application to your Facebook Fan Page – 2011 Iframe-app_pic
Facebook recently announced that on March 11, 2011, the Static FBML application will no longer be available to be added to Pages and that no new FBML applications can be created after that date.

While Facebook indicates that current Static FBML and FBML tab applications will continue to function for now, they are strongly encouraging everyone to move to using iFrame applications rather than FBML ones.

Over the coming weeks, we will be posting a series of tutorials to help you get started with using iFrame applications on your Fan Page.

iFrames are now supported on Page tabs

Prior to February 10, 2011, Facebook had disallowed iFrames on Page tabs and, although were allowed on Canvas pages, they required a user to click activation text or an image to load the iFramed content.

However, as of February 10 iFrames are allowed on both Page tabs and Canvas pages AND they don’t require an activation to load them!

What is an iFrame application?

An iFrame application you allows you to embed an external Web page in your tab on your Facebook page (in the new Page layout, “tabs” are on the left side of your Page, rather than appearing on the top).

The good news is that this Web page, because it’s not hosted on Facebook, can use standard HTML, CSS, and JavaScript like any other Web page does. Interactions with Facebook content are done using the Facebook Software Development Kits (SDKs) and XFBML tags. (For this tutorial, the Facebook SDK is not required.)

The downside of this approach is that you need to be familiar with those technologies and you will need a Web-accessible server where you upload the files for your application page.

Setting up your server

On your Web server, create a directory for your iFrame application. In this example, we are going to create a new directory on the server called “facebook” and then a subdirectory called “mytestapp”. The file path will look something like this in your FTP program:

Adding an iFrame Application to your Facebook Fan Page – 2011 File_path

You will want to put all of your files (HTML, CSS, Javascript, PHP, etc) in this folder or its subdirectories. If you don’t know how to do this, read this FTP tutorial.)

Your HTML file

Remember, in your HTML file you can utilize CSS — and inlining styles with the <style> … </style> tags works fine with iFramed HTML files — and JavaScript (Do not use FBML or FBJS!).

You’ll want to set the main container DIV for your content to 520 pixels wide. Here’s a very stripped-down example of your HTML file:

Code:
 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
    <head>
    <link type="text/css" href="http://www.hyperarts.com/blog/adding-iframe-application-to-facebook-fan-page/style.css" />
    <style type="text/css">
    body {
    width:520px;
    margin:0; padding:0; border:0;
    }
    </style>
    <meta http-equiv="Content-Type" content="text/html;
    charset=iso-8859-1" />
    </head>
    <body>
    <div id="container">
    <p>This is some HTML content</p>
    </div>
    </body>
    </html>

In the above example, I include both the code for an external stylesheet called with the <link /> tag, as well as inlined styles called with the <style> … </style> tags, in case you want to do it that way. Either should work fine.

Installing the Facebook Developer Application

The first step in creating an application in Facebok is to install the Facebook Developer application.

To do that, log in to Facebook and then visit the URL https://facebook.com/developers

If this is your first time installed the Developer Application, you will see the Request for Permission dialog show below:

http://content6.clipmarks.com/clog_clip_cache/amplify.com/B2795E55-4442-48E5-939E-91F801BA4166/D5CCB8B2-0E8C-4A5E-B3F2-16770CF0FC6E

Click the Allow button to proceed.

Creating your iFrame application

Now that you have the Developer App installed, click on the Set up New App button.

http://content7.clipmarks.com/clog_clip_cache/amplify.com/B2795E55-4442-48E5-939E-91F801BA4166/7F04BB2A-71E8-441D-87B9-425DB008D0EA

Give you application a name, click the Agree bubble and then click the Create App button.

http://content8.clipmarks.com/clog_clip_cache/amplify.com/B2795E55-4442-48E5-939E-91F801BA4166/22EF9AE0-75B6-4F4C-B516-D9843DA9A3F9

Enter the security phrase and then click Submit.

http://content9.clipmarks.com/clog_clip_cache/amplify.com/B2795E55-4442-48E5-939E-91F801BA4166/A63C6DF9-E2DB-419C-B4FA-BBE0BB902DBE

There are a lot of options you can tweak related to your application. In this post, we are going to focus on the basics needed to get your application up and running.

The “About” Tab: Name your application and set a small and large icon

Give your app a name that is short and descriptive. This name will appear on your list of apps on your developer page.

The icons are quite important, especially the small one now that it’s shown in the left-column navigation. So make it eye catching. If you don’t create your own icons, you’ll get the defaults, as shown below.

http://content6.clipmarks.com/clog_clip_cache/amplify.com/B2795E55-4442-48E5-939E-91F801BA4166/8C879234-F86E-47D0-A10D-1A4EAB1531B6
The “Facebook Integration” Tab: The really important stuff!

Click on the Facebook Integration tab on the left to get started.
http://www.hyperarts.com/blog/wp-content/uploads/integration.jpg

In the Canvas section, enter the URL for the location on your server where you are storing your application files.

http://content7.clipmarks.com/clog_clip_cache/amplify.com/B2795E55-4442-48E5-939E-91F801BA4166/244C25EE-1C95-4B20-A583-EDC3C7773E64

Further down on that tab, enter information about your Tab in the Page Tabs section.

http://content8.clipmarks.com/clog_clip_cache/amplify.com/B2795E55-4442-48E5-939E-91F801BA4166/A0978612-2C64-441E-9059-556DC03033AF

* The Tab Name is what will appear on the sidebar of your Fan Page. It can be up to 16 characters in width;

* The Page Tab Type should be set to iFrame;

* The tab URL is the file name of the file that should be loaded first when the Tab is loaded into your Fan Page. It will generally be index.html, index.php or something similiar. Make sure to put something in the field or your tab will not appear on your Fan Page.

Click the Save Changes button.

Installing your iFrame application on your Fan Page

Once your Facebook application has been created, you will need to add it to your Fan Page. To do that, click on the Application Profile Page link on the right side of your application page.

http://www.hyperarts.com/blog/wp-content/uploads/application_profile_page.jpg

Now click the Add to My Page link on the left.

A dialog overlay will open and will show any pages that you are an Admin on.

http://content9.clipmarks.com/clog_clip_cache/amplify.com/B2795E55-4442-48E5-939E-91F801BA4166/AB064168-7DD8-4F4A-82ED-139800FE64A1

Find the page that you want to add the Tab to and click the Add to Page button.

Your new iFrame app should now appear on your Fan Page. If you don’t see it there right away, you may need to adjust your Page settings. From your Fan Page, click on the Edit Page link. Then click on Apps and find the application that you just added. Click on the Edit Settings link next to the app and Add link.

Troubleshooting

Based on feedback to this post, we are starting to compile some iFrame App Troubleshooting Tips. We will update this section as new questions some up.

Check your URLs!
Make sure that the URL you set for your iFrame is correct. Try accessing it directly, via your browser, instead of via your Page tab. Bad URL addresses are the most common problem. If the URL to the Web page or image you want in your iFrame Page tab is incorrect, obviously the tab won’t work.

You can also test the validity of your URL by right-clicking the area where your iFramed content should be and then select “This Frame: Open Frame in new window” or something similar (each browser presents this option a little differently).

Error messages from your server
If your server returns an error when Facebook tries to load the HTML page into the iFrame, you may need to change the file extension from .html to .php or .aspx (depending on the server platform you are using). When Facebook loads the iFrame, they do a POST to the index page in order to pass some data to your application and it looks like some servers are set up to not allow a POST to a file with the .html extension. We will be taking a look at how to access the data that Facebook passes in the next tutorial, but I wanted to mention this now since it caused issues for some people.

Scroll Bars
If your iFrame content causes a horizontal scroll bar to appear, something is causing the width to exceed 520 pixels, which is the maximum that Facebook allows.

We recommend adding some CSS (either inline as shown below or in your separate CSS file) to remove margin, padding, and border from elements by default. Many browsers add spacing around certain elements by default which can cause the scrollbars to appear unexpectedly.

Code:
<style type="text/css">
    body {
    width:520px;
    margin:0; padding:0; border:0;
    }
    </style>

Next Steps

If you are famaliar with HTML and CSS, you can begin building your tab page content right away. In future tutorials, we will be looking at adding interactivity to your Tab using the PHP SDK and XFBML tags.
Back to top Go down
View user profile https://digitalpoints.forumotion.com
 
Adding an iFrame Application to your Facebook Fan Page – 2011
Back to top 
Page 1 of 1
 Similar topics
-
» Hanna-Adapt or Die 2011-DVDRip

Permissions in this forum:You cannot reply to topics in this forum
Digital Points :: Marketing :: Social Networks :: Face Book-
Jump to: