Facebook New (Dec 9) Change to Facebook Welcome Pages
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
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
Head to https://developers.facebook.com/apps and click on Create New App.
Step 3.) 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
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
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
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:
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
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
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).