Thursday 18 August 2011

How to create a facebook application for your Blog.

Facebook is the worlds greatest social network and it has more than 750 million users. So it is necessary for a blogger to create a facebook page that he will surely have. And how about creating a facebook app. Yes guys. You might have seen and you might have used many many apps as a facebook user. Creating a facebook app is really easy and that you should have some basic knowledge on web designing languages. And if you have a good knowledge you can easily create really great apps. If your becomes famous then facebook might pick you up for an internship. But lets not go that complex. Now we will be creating an app that will let users to see your blogs feed and they will also be able to subscribe to it. So lets get started :

1. Lets assume that you have a facebook account. Just login to it and navigate to the following URL :

http://developers.facebook.com/apps

2. Now in this page click the "Create a new app" button in the top right.


3. Enter the name of your app. Accept to the terms and conditions. Click on the Continue button.

4. In the following page enter all the details accordingly.

5. Now open up your notepad. You will have to write some codes for showing up your feed.

6. And before that you have to get your Buzz Boost  codes. For that do the following
  • Login to your feed burner account where you have burnt your feed
  • Open up your feed.
  • Navigate to Publicize > BuzzBoost
  • And add your preferences there and get the code.
  • Set the number of posts to be showed as 10 so that it looks good in your facebook page.
7. Now that you have got your Buzz Boost code. Now open up your notepad and enter the following codes .



<html>
<body>
<style>
.burner{
font-family: 'Trebuchet MS';
border:3 px dotted #CCCCCC;
font-size:12px;
color:#000000;
font-weight:normal;
text-align:left;
padding:2px;
margin:4px;
}
.burner a{
font-size:17px;
color:#686868;
font-weight:bold;
}
.burner a:hover{
color:#CC0000;
}
.burner a:visited{
color:#686868;
}
</style>
<div style="float: left; width: 500px;
  margin: 5px; padding: 5px; border: 1px solid black;">
<div class="burner">
BUZZ BOOST CODES HERE
</div></div>
FACEBOOK LIKE BUTTON HERE
</body>
</html>

8. Replace "BUZZ BOOST CODES HERE" with your Buzz Boost codes and replace "FACEBOOK LIKE BUTTON HERE" with your facebook like button.

9. You can also add other widgets that you wanna add to your facebook app by just adding the HTML code below the facebook like button code. The appearance for the above codes will look like the following :


10. Now save the document with a .html extension.

11. Upload the file anywhere online. And get the URL.

THINGS TO REMEMBER WHILE UPLOAD A FILE ONLINE :

1. I have uploaded my files in my3gb.com
2. Go to my3gb.com and create an account.
3. Go to your control panel and from there to your file manager.
4. Click on create a new directory and name it. (i have named as Cyber Freaks)
5. Rename your HTML document as index.html and upload the file into that directory.
6. Now open that file from my3gb.
7. Your file will be redirected to an URL as follows :

http://example.my3gb.com/Your%20Directory/index.html

Replace Example with your domain that you got while registering with my3gb and replace "Your" with the first name of your directory and "Directory" with the second name of your directory. If your directory does not have any second name then remove "%20Directory".

Do all modifications and note down that URL.

12. Now come back to facebook.

13. Click on the "On Facebook" link on the left sidebar.

14. In the page you will be asked to add some details. Enter the details as follows.

Canvas Page : Your own preference

Canvas URL : The URL of your hosted HTML file that you got in step 3.6. (Dont forget to add trailing slashes)

Secure Canvas URL : The URL of your hosted HTML file that you got in step 3.6. (with https:// instead of http://. If this does not work then leave that area blank)

Tab URL : The URL of your hosted HTML file.

Secure Tab URL : The URL of your hosted HTML file that you got in step 3.6.  (with https:// instead of http://. If this does not work then leave that area blank)

And now save the changes. And thats it your app is ready now. Now lets add it to your facebook fan page.

1. In the page in the bottom of the left side bar you will see a link called as "View application profile page"

2. In the bottom of the left sidebar you will see a link as "Add to my page" Click on that and a list of your pages will appear. Click on the page that you want your application to be added and click close.

And thats it you have created your app and added it to your page. Any queries post them as a comment and enjoy blogging !! :)