Updated 8/9/12: Since the timeline change the width of the template expanded to 810px
I had the following needs for my Facebook Welcome Page.
- An Iframe from an HTTPS site, without buying a SSL certificate for my website
- A welcome tab that did not require users approval to use the app. Did not want my Welcome page to display an authorization request.
- A page with a Like button, not the classic “Click Like Button Above” message
- No ads or attribution links
If you are ok with having a small 3rd party link below the page you can use Iframe Apps which eliminates the need for most of the steps below. If you have an SSL certificate on your site, see our build a Facebook tab hosted on your secure server post.
1. Install the Facebook Developers app, then create a new app, and sign up for cloud services.
This will create your own secure server space with Heroku. Follow the directions on how to set up an app using Heroku. Setting up the app with Heroku is not easy. It involves using the command line to register changes in the code and then upload. Here are some hints for using Heroku on Windows.
- Open you command line by searching for cmd.exe in your start menu.
- Type “heroku login” to sign into the Heroku server
- Download the app files by typing “git clone firstname.lastname@example.org:deep-winter-1234.git -o heroku” where deep-winter-1234 is the name that heroku has given your folder.
- Type “cd deep-winter-1234” to enter the directory where your files were downloaded
- Find the Heroku files by going to My Computer > C: > Users > YourName > Heroku Folder
- Make changes to your files locally with a text editor then type “git commit -am” to register any changes to the local files.
- To add a file to your page, like an image, use the command “git add filename.jpg“.
- Type “git push heroku” to upload the new files to Heroku.
If you want to import personalized information from the Facebook API, then users will have to approve the app before using it. The default Heroku app requires approval. If you just want to create a basic welcome page then I suggest replacing the default Heroku code with our Boom Visibility Welcome page – https://www.boomvisibility.com/files/heroku-template.zip.
2. Add a Like button to your Welcome page
You can treat your heroku page like any other website and use the same “Like” and “Send” buttons you would use on a website. I just used the developer code generator for these and pasted the code into the index.php.
3. Make your app a Facebook tab
After you get the page running outside of Facebook, you will need to complete your Facebook app settings.
To activate the app you will need to paste a custom URL into your browser.
Replace the app_id= with your app id, and the next= with the URL of your secure folder. It will prompt you to choose which page you want to add the tab to and then you are good to go.
So there you have it, a Welcome page that uses an Iframe on an HTTPS site without paying for an SSL certificate. It also does not require users to install it, and contains like and send buttons. If you want us to help you set up something similar be sure to contact us.
See our app in action – https://www.facebook.com/BoomVisibility?sk=app_233122110101136
Download our source code – https://www.boomvisibility.com/files/heroku-template.zip
Facebook Tab Tutorial – https://developers.facebook.com/docs/appsonfacebook/pagetabs/
Facebook Apps Dashboard – https://developers.facebook.com/apps/
Heroku Directions – http://devcenter.heroku.com/articles/facebook
Build a Facebook tab hosted on your own secure server – https://www.boomvisibility.com/building-a-custom-facebook-tab-hosted-on-your-secure-server-2012/