For this tutorial, I’ll explain how to make a page tab on Facebook that redirects to an external link. You’ll need a place to store a file online (your own domain and hosting), a Facebook profile, and a familiarity with HTML, CSS, and JavaScript (really just one line of JavaScript code, but this will help).
First, I’ll give a basic description of what’s going on for an individual who knows nothing about web design/development, then move into the how to section.
Recently, Facebook has made a lot of changes to their API – which means that some old functionality has changed – like using a page tab to take you out of Facebook. Of course, Facebook wants to keep you on Facebook, but sometimes, you want people to leave Facebook to view YOUR site.
With the new timeline layout, there are now 4 spots for applications and what used to be called page tabs, but you can really only highlight 3 main items (as the 4th spot is reserved for your photos). This makes whatever you choose to place in these 3 positions a bit more important (others appear but are hidden by a drop-down button). One possible choice for one of these links could be a link to your website, or a specific promotional page on your website.
As you can see, on the Pacer Facebook Page – we added our own images and custom pages to these spots.
These are also available on fan pages too. Other items that could go into these 3 spots could be apps that link users youtube, twitter, or games, or a number of different things.
So how can we trick Facebook into doing this? One very simple and overlooked solution to this problem is a redirect – but not just any redirect – a javascript iframe parent window redirect! So what does that mean?
Basically, Facebook will let you develop your own html and css pages, and slap them in an iframe within Facebook – the limitations here is that the viewing area is restricted to about 520px or 820px (820px is a new addition with the current changes to Facebook), which is a bit limiting. You need to create a facebook application to do this, and basically all the application does is tell Facebook to display your page inside of the viewing area in Facebook.
We can take this and use it to trick Facebook into directing us to our websites. Any code written within the Iframe will be executed, so with the right code, you can tell your browser to change the parent window (needed because you are in an iframe – a child window if you will).
Now for the meat of the tutorial…
Step 1: Make a page on your website that contains the redirect code.
-Make a file called something like… fbredirect.php and upload it to your server.
-Write this code inside of this page – be sure to replace YOUR_SITE with your actual website URL.
<script type=”text/javascript”>
window.top.location.href = “https://www.YOUR_SITE.com”;
</script>
<p>If you are not automatically redirected here is a link to <a target=”_blank” href=”https://www.YOUR_SITE.com”>YOUR_SITE</a>. Opens in a new tab or window.</p>
-The HTML link is there just in case someone happens to be browsing Facebook with JavaScript turned off, it’s always a good idea to have a backup plan, however, this code should almost instantly redirect someone to your website.
Step 2: Create the Facebook application for the homepage
-Go to developers.facebook.com – click the apps tab along the top. Then click create a new tab (in the upper right corner).
-You need to add 2 sections the app on facebook area, and the page tab section on the create an app page.
-Canvas URL and Secure Canvas URL – these are for your redirects, the first link below is the canvas URL, and the second is the secure URL:
http://www.YOUR_SITE.com/fbredirect.php/
https://www.YOUR_SITE.com/fbredirect.php/
-These link to the file we created in step 1!
-Page Tab Section
Page Tab Name: What you want to appear as text underneath the photo on your Facebook page.
Page Tab URL: The same URL of above with /?app_tab=true after it.
http://www.YOUR_SITE.com/fbredirect.php/?app_tab=true
Page Tab URL: Same as above with HTTPS.
https://www.YOUR_SITE.com/fbredirect.php/?app_tab=true
Step 3: Allow Your Facebook Page to use the App you just created!
NOTE: Here is a link to facebook’s tutorial on adding page tabs – this process is described in detail there.
http://developers.facebook.com/docs/appsonfacebook/pagetabs/
-Use this link below in your Address Bar, but replace YOUR_APP_ID with your application ID from the Application you just created, and YOUR_URL with http://www.YOUR_SITE.com – of course you’re replacing YOUR_SITE with your actual site URL – but sometimes it can be confusing which URL you want to use – is it the URL of the APP – no, it’s the URL of the site you want to redirect to.
http://www.facebook.com/dialog/pagetab?app_id=YOUR_APP_ID&next=YOUR_URL
-This brings up Facebook in your browser. You will need to select the pages you want the application to show up on (your personal page or any number of fan pages you have access to).
-After you select the sites, hit Allow – and you are done. If you did this correctly, your app will show up on your Facebook page. If you have a few apps already, you may have to use the arrow and switch out the position of it so it appears in one of the main 3 spots.
-Now you’ll notice that the application has no picture! This is an easy fix. Click the arrow to expand the application area. Now when you hover over an item, you’ll see that you can edit (the little pencil marker in the upper right) the item. Click edit settings, then add/change the custom image associated with the tab to a custom graphic.
Congratulations – that’s it! If you have any questions about this process, feel free to leave some questions in the comments below.