Facebook New (Dec 9) Change to Facebook Welcome Pages

with 1 Comment IN Marketing & Wordpress

 

If you have your own custom Facebook Welcome Page, or you are an internet marketer with lots of clients with Facebook Pages.. you might of noticed something a little bit new this week, like “Where the HECK can I add my custom iFrame to my Facebook Page now? What have I done wrong? Aaargh!”

At least, that’s how it was for me when I went to add 60 new Demo pages and got to Demo 1 and looked at it and wondered what I did wrong. I’ve done this a hundred times before – maybe I need coffee? maybe I need sleep? lol.

Anyway, it was neither – Facebook has changed the developer end *again* – it’s different almost everytime I go in there and their courtesy notifications of never letting you know about the changes, makes you waste an hour or so trying to figure out the new way of doing things.

So if you are affected by this (you create Facebook iFrames or Facebook Apps that you need to add to Pages) here is the new way of adding an iFrame to a Facebook Page. Btw.. there are other changes as well, but this post is going to be big enough already with just this way of doing things. The rest – you can find on the Facebook Developer Blog.

Step 1.) Upload your Fan Page and record the base URL

Upload your Fan Page and record the base URL

I’m not sure why I am adding this step as it’s probably already done and you are stuck ‘after’ this point, but it will help me explain a later step. Basically, you’ll need this base URL later. So upload your fan page to your server and copy the non-https version of the URL down in notepad. I’ll add a new demo site with you. Here is the URL that I will be recording: http://fb.custombizfanpages.com/restaurant-italian/

Step 2.) Create a new Facebook Developer App

media_1323821727783.png

Head to https://developers.facebook.com/apps and click on Create New App.

Step 3.) New App Details

New App Details

Type in the name of your App you want to show to the public and the name you want in your backend for your own stats and click continue.

Step 4.) Page Tab Details

Page Tab Details

Type in the Page Tab Name (The word(s) you want displayed on your Fan page when you add it), the Page Tab URL (the base url you copied previously) and the Secure Page Tab URL (the SSL https: version of your base url) and then click on Save Changes.

Step 5.) Copy the APP ID

media_1323822099438.png

Now Facebook has given you an Application ID number. Copy that to Notepad also. So in my case, I’m copying: 152067194900995

Step 6.) Add APP ID and Base URL to this code

Add APP ID and Base URL to this code

You can choose to create a new application page, but since I have 60 and they are just demo iFrame pages for Facebook welcome pages, I don’t need or want to create a new page for each of them.

Copy this URL into notepad:

https://www.facebook.com/dialog/pagetab?app_id=152067194900995&next=http://fb.custombizfanpages.com/restaurant-italian/

And change the app_id=152067194900995 to YOUR application ID number and change the &next=http://fb.custombizfanpages.com/restaurant-italian/ to YOUR base URL that you recorded in previous steps.

Step 7.) Choose Facebook Fan Page to Add Application to

Choose Facebook Fan Page to Add Application to

Select the drop-down box and choose the Page(s) that you want to add the application to, then choose “Add Tab to My Facebook Pages”.

Step 8.) Done – should now be on your Facebook Page

Facebook Page

If you did everything right – you should now have your Custom Facebook iFrame App on the Fan Page that you chose (might have to switch to the wall or refresh to see it if you already had the page open).

 

Penny (PennyButler.com)
Penny (PennyButler.com)

Who are we? What are we doing here? What is the meaning of life? Penny is a truth-seeker, ever-questioning, ever-learning, ever-researching, ever delving further and deeper down the rabbit hole. This site is a legacy of sorts, a place to collect thoughts, notes, book summaries, whilst providing a searchable archive to easily lookup and reference.

One Comment

  1. Penny Butler says:

    Here’s a neat little trick that works if your base url is causing problems..

    https://www.facebook.com/dialog/pagetab?app_id=342688505766701&next=http%3A%2F%2Ffacebook.com

    (just change the app id to your app id, but leave the facebook.com url) for some reason, if you have problems with your base url, the facebook.com url works fine!

Leave a Reply

Your email address will not be published. Required fields are marked *