Embed Size (px)
Citation preview
Facebook has changed the way a user can add custom tabs to their business pages. As of March 10th Facebook is shutting down it’s FBML coding language. This means the only way to have a custom landing page tab is to do it via an iFrame app.
To start your iFrame you will need content created and available to be pulled into Facebook.
What is an iFrame? An iFrame is a html file living on your website’s server (Figure 1-1). An iFrame pulls that web page content into Facebook. This being the case you will need some piece of content created and availble to be pulled into Facebook.
The width of a Facebook business page is 520 pixels and we recommend using the entire 520 pixels.
If you already know how to create an html file to use for your iFrame, skip to page 4. If you need help, continue on the next page.
Figure 1-1
1
To put an html file online you first should open up a plain text document. On a Mac, open TextEdit and under the Format menu, click Make Plain Text. On a Windows computer, open NotePad which is a plain text editor.
The easiest way to create a nice Facebook tab is with an image. On the document you can paste this text:
<html><body><a href=”http://digsandbox.com/”><img src=”http://9clouds.com/wp-content/uploads/2011/02/Sandbox_FB-tab-1.jpg” width=”520px” height=”600px” alt=”Sandbox is an online community that helps you make sense of social technology so that it works for you.” /></a></body></html>
Now where it says ”http://digsandbox.com/” (Figure 1-2) fill in the link of the address where you want people to go when they click on your tab.
Replace the text highlighted in Figure 1-3 with the address of where your image is located online. (Note that it has to be saved online)
Figure 1-4 shows the width and the height of your im-age. Make sure that the width here is 520 px.
Figure 1-2
Figure 1-3
Figure 1-4
2
The quoted text that comes after “alt=” shown in Figure 1-5 is what people will read if they can’t see the images.
After you have substituted your information in TextEdit, choose Save As. Be sure to save it as a .html file. This can be changed in the File Format drop-down menu (Figure 1-6).
Upload the .html file to your website. You could do this through Wordpress or Dropbox
Visit your file to make sure it works. The web address will be the site where you uploaded followed by a slash and yourtitle.html.
For example, http://9cloudsinc.com/sandbox.html Figure 1-7
Figure 1-5
Figure 1-6
Figure 1-7
3
You can create a Facebook custom iFrame tab using your personal Facebook account as long as you are an adminis-trator to the business page.
First, login to Facebook using your username and password. Then visit www.facebook.com/developers (Figure 1-8).
Click Set Up New App in the top right corner of the screen (Figure 1-9).
Figure 1-8
FIgure 1-9
4
Create a name for your app and click the bubble agreeing to Facebook terms and click Create App (Figure 1-10).
You then will be brought to the main settings page for your app. Here make sure you double check the email on this page. The email that you have con-nected to your personal Facebook page will autofill into the email blanks (Figure 1-11). If this is not the email you want connected to this app make sure you change it.
Figure 1-11
Figure 1-10
5
Figure 1-12
Figure 1-13
On the main settings page you will also see a place to add a custom icon (Figure 1-12). Custom icons mea-sure 16x16 pixels. If you are having a hard time coming up with an icon to fit your app you can check outiconfinder.com for ideas and downloadable icons.
Your custom icon will show up on your main business page underneath profile (Figure 1-13).
6
After clicking Change your icon you will be prompted to upload your image. You can upload a JPG, GIF or PNG file. The dimension of the icon is 16x16 pixels so if your image is larger than that Facebook will automatically resize the image. By clicking Choose File you must select a file off your computer to upload (Figure 1-14).
You can also Change your logo. This is done the same way as changing your icon. Click Change your logo (Figure 1-15).
You can upload a JPG, GIF or PNG file. The dimension of the logo 75x75 pixels so if your image is larger than that Facebook will automatically resize the image. By clicking Choose File you must select a file off your computer to upload (Figure 1-16).
Figure 1-14
Figure 1-15
Figure 1-16
7
From this page click Facebook Integration on the left side toolbar (Figure 1-17). Here you will need to fill in two pieces of information. First, you will insert the Canvas URL. The Canvas URL is the domain name of where your content for the iFrame is living (Figure 1-18). When inserting this don’t forget the trailing / at the end.
Select iFrame as the type (Figure 1-17).
Figure 1-17
Figure 1-18
8
Next, you will fill in the Tab Name and the Tab URL (Figure 1-19).
The Tab URL is the trailing file name from the content webpage (Figure 1-20). Then Save Changes.
Figure 1-19
Figure 1-20
9
Scroll back to the top of the page and click Back to My Apps next to the title of your app (Figure 1-21).
This will bring up all the apps you have created. Click on the app that you are trying to go to.
Then click on Application Profile Page (Figure 1-22).
Figure 1-21
Figure 1-22
10
Figure 1-23
This will bring you to the Facebook Fan Page for that app. On the left side toolbar click Add to My Page (Fig-ure 1-23).
A pop-up of all the pages that you are an administra-tor to will then appear (Figure 1-24). Click the Add to Page button that is next to the corresponding page where you would like the app to appear. Close out of the pop-up.
Figure 1-24
11
Figure 1-26
If you return to your original fan page and scroll down below your profile folder your custom app frame should be there (Figure 1-25).
Click on the tab and you will see that the content from the iFrame page has been pulled into Facebook (Figure 1-26).
Figure 1-25
12
Figure 1-28
Figure 1-27
If you want to set this tab as the default landing page, return to the main page. Click Edit Page in the right top corner (Figure 1-27).
Make sure you are under Manage Permissions on the left side toolbar and under Default Landing Tab click the drop-down menu and select the name of the custom tab that you just created (Figure 1-28). Then Save Changes.
You now have a custom iFrame tab up and ready to go.
13
John T. Meyer612-867-4746Email: [email protected]: http://digsandbox.comTwitter: @johntmeyer
Scott D. Meyer605-695-8968 Email: [email protected] Homepage: http://9clouds.com Twitter: @MrScottMeyerLinkedIn: http://www.linkedin.com/in/scottdavidmeyer
Digital literacy is an essential skill for today’s professionals. At 9 Clouds we teach business leaders what they need to know about tools like Facebook, LinkedIn and blogs and provide the strategy and implementation so they can find clients and grow their business without wasting time online.
If you’re ready to get started, we offer two service offerings:
First we provide personal and group training on the tools that will best help your business and then assist you implementing and measuring their success. Email us at [email protected] to get started.
If you prefer to do-it-yourself, check out Sandbox as an online community with seminars, tutorials and quick answers to any of the questions you may have. Get started with Sandbox at: digsandbox.com
We hope to connect with you soon to help you improve your digital literacy. To learn more about digital literacy and 9 Clouds, subscribe to our blog or give us a call at: 855-9CLOUDS.
That’s what we’re here for.Need Help?
