Thursday, April 19, 2018

How to Insert Facebook Like Button on Blogger

In this Blogger tutorial, you are going to learn how to add Facebook like button on Blogger. Having a Facebook like button on your blog allows your visitors to promote/share your blog content on the Facebook wall and Newsfeed.

Facebook like button is a great way to get more visitors to your website from Facebook. It also allows them to like your Facebook fan page. To show a like button on all your Blogger posts, you have to insert the like button code into your theme's template.

Read: Embed JW Player in Blogger to play Videos

Generate Code for Facebook Like Button

Step #1. First, make sure you're logged into your Facebook account. Then, enter the following URL into the address bar and open it.
https://developers.facebook.com/docs/plugins/like-button
Step #2. Now, add the URL of your blogger blog in which you'd like to add the Facebook like button. (see screenshot for reference)

Facebook Like Button Configurator for Blogger

Note: Under Like Button Configurator, you can also set the width, layout, and size of the button. Change according to your preference.

Step #3. Click Get Code to generate the code.

Step #4. Select the IFRAME code and copy it.

Facebook Like Button Code

Now, you have generated the Facebook like button code for your Blogger blog. It's time to add it to your blog. You can add the code using two ways: the first way is using the gadget method and second way is to insert the code into the Blogger template. I have mentioned both ways to add Facebook like button to Blogger.

Note: Do Step 5 ---> Step 7 to add the code using the Gadget method. Most of the time it adds the like button at the sidebar.

Step #5. Now, login to your Blogger dashboard and choose Layout from the left navigation bar.

Step #6. Click on Add a Gadget link and add the HTML/Javascript gadget.

Step #7. Paste the code generated in Step 4 above and click Save. (see screenshot below)

add facebook like button on Blogger

That's it.

Perform Step 8 ---> Step 11 to add the code to the blog post.

Step #8. On your blogger dashboard, go to Theme > Edit HTML.

Step #9. Click Hide warning if it shows any HTTPs warning.

Step #9. Place your mouse cursor anywhere inside the code and press Ctrl+F to open the Blogger search box.

Step #10. Inside the search box, type <data:post.body/> and hit enter.

Step #11. Paste the Facebook like button code just below the <data:post.body/> and save the template.

insert like button code in Blogger template

Visit your blog to see the Facebook like button on every blog posts on blogger.

1 comments:

  1. Great article. This is what I have been searching for. Thanks for this post.

    ReplyDelete

Join the Discussion by leaving the comments!