Friday, November 4, 2011

Steps to have a “FACEBOOKLIKE BUTTON” for blogspot.com

Since facebook is getting more and more popular many advertisers and innovators used it for commercial purposes. Most of them uses “facebooklike button” on their page to be viewed in users profile who will hit the like button and in return another user might hit the like button again and again and that page will be getting popular and dragging more visitors. Here are some steps for having a facebooklike button on your blog.

1.     Log in to your account in blogspot.com and go to your dashboard. If you are using the old blogger interface your screen will exactly look like this shown below.
Fig. A

2.     As shown in Fig. A, click on the “Design” and your screen will looks like this;

3. As shown on step 2, click on “Edit HTML”, then check the box beside
“Expand Widget Templates” and search for the word <data:post.body/>. Note, before editing your template, you may save a copy of it to recover it again incase anything goes wrong.

4. Go to this url: http://developers.facebook.com/docs/reference/plugins/like/  and the page will show this. Note, “Send Button” box should be unchecked. Fill in the URL to like or your blog URL.

5. As shown in step 4 click on the “Get Code” and you’ll have the code

6.  Click on “IFRAME” for your code to appear and copy it.
7. Back to step 3, after “<data:post.body/>” press “enter” and type “<div class=’facebooklike’>”. Double hit “enter” and type </div>. The blank space underlined with red as shown in the picture is where to paste the code from step 6. Hit “Save Template” to save the changes.
8. If you mess one or more characters on previous steps an error message will appear after saving the changes. But, if all was correct you will have this on your screen



If you are using the updated blogger interface follow this steps;

A.    Image below show the blog dashboard of updated blogger interface user
B.    Click on the dropdown menu as shown here
C.    Click on “Template” and you will have this
D.    Click on “Edit HTML”
E.    Click on “Proceed” and check the box beside “Expand Widget Templates”
F.    Go back to step 3 to step 8 to finish.

Now you have your facebooklike button…HIT LIKE!!!