How To Make A Facebook App Redirect Outside of Facebook

Facebook is where you get to be social and engage with existing and potential customers, but surely you want them to check out your website or special offer and perhaps buy from you.

With the Facebook timeline layout, there are 4 spots for applications that are immediately visible, but you can really only highlight 3 main items (as the 4th spot is reserved for your photos).  This makes these 3 positions prime real estate on your timeline as 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.

In this article I would like to give you a way to get them to visit your website or any other external URL just by clicking on one of your Facebook Timeline app images.

The trick I am going to reveal in this article could be used for all of your app’s, e.g. a link to your Twitter account or YouTube channel. There may be times where it is still beneficial to have visitors view an app inside your Facebook page where users may interact more with features such as “Like”.

Now a bit of a warning, for a lot of people this may get a little technical…..this method can be used if you want to create an app that you control but there are third party apps that you can connect to your page that handle this for you.

It should also be noted that in Facebook’s Platform Policy they say:

“The primary purpose of your Canvas or Page Tab app on Facebook must not be to simply redirect users out of the Facebook experience and onto an external site.”

Basically, to create a Facebook app that automatically redirects to an external link such as your website we will be creating a file that needs to be uploaded and stored online (you can use your website’s hosting for this) and then linking it to our Facebook page.

Step 1:  Create a file that contains the redirect code

1. Using a text editing program create a text file and save it as fbwebsiteredirect.php

2. Copy the following code into the file – be sure to replace YOUR_SITE with your actual website URL – and make sure to save the text file again.

<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.

3. Upload it to your website hosting

Step 2: Create the Facebook application for the homepage

1. Go to https://developers.facebook.com/apps, then click “create new app” (in the upper right corner).

2. Select “App on Facebook”-You need to add 2 sections the app on facebook area, and the page tab section on the create an app page.

– Canvas URL  http://www.YOUR_SITE.com/fbwebsiteredirect.php/

– Secure Canvas URL  https://www.YOUR_SITE.com/fbwebsiteredirect.php/

These link to the file we created in step 1!

3. Select “Page Tab”

– Page Tab Name: What you want to appear as text underneath the photo on your Facebook page.

– Page Tab URL:  http://www.YOUR_SITE.com/fbwebsiteredirect.php/?app_tab=true

– Secure Page Tab URL:  https://www.YOUR_SITE.com/fbwebsiteredirect.php/?app_tab=true

4. Add a page tab image and save

[infobox type=”info” clickable=”no”]You can view a more detailed tutorial on creating a Facebook app and adding it to your Page here http://www.diycustomfanpages.com/tutorials/creating-a-facebook-app[/infobox]

Step 3:  Allow Your Facebook Page to use the App you just created!

1. There are two ways to now add the newly created app to your Facebook Page:

a) After creating and saving the FB app you will see a Facebook App ID. Enter your app ID and your site URL at http://www.diycustomfanpages.com/createfanpage/

b) 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

http://www.facebook.com/dialog/pagetab?app_id=YOUR_APP_ID&next=YOUR_URL

2. 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).

3. 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.

 

Congratulations – that’s it! Hopefully you’ve navigated the process successfully 🙂