Add New Meta Facebook Like Button in Blogger Posts

Blogger has discontinued the auto Add Widget functionalities as of 10/2024. All widgets requires manual additions. Sorry for the disruptions.
Contact us if you need support!

Several Blogger blog users had issues with their old & outdated Facebook Like button. The button becomes unresponsive, sometimes a greyed out panel appears, while most of the time when clicked nothing happens.

In this page we will guide you on how to add the latest version of Meta's Facebook Like button, the Social Plugin issued by official Facebook Developers.

Add New Meta Facebook Like in Blogger Blog Posts

The current version, as of this post, issued by Meta Facebook Developer social plugins for the Like Button is at v.18.

You can find the official Facebook Like social plugin help page here: https://developers.facebook.com/docs/plugins/like-button/

How to Add Meta Facebook Like Button

Do a Theme Backup

Backup your Blogger Theme to your computer using the Theme Backup option

Add Facebook Social Plugin SDK

1. At Theme > Edit HTML and find this tag <body>

2. Now paste below Facebook Social Plugins codes so it will look like this in your Blogger Theme.

<body>
<div id="fb-root"></div>
<script async="async" defer="defer" crossorigin="anonymous" src="https://connect.facebook.net/en_GB/sdk.js#xfbml=1&amp;version=v18.0" nonce="7zLaJhrT"></script>

3. Click Save Theme

Facebook Like Button Placements

1. At Theme > Edit HTML > click Jump to Widget, select Blog1.

2. At Blog1 widget markups, scroll a bit until you'll find <b:includable id='post' var='post'>

3. Inside these block of codes you will find <data:post.body/>

4. Now paste your custom Facebook Social Plugin Like Button codes below <data:post.body />, it will look something like this..

<data:post.body /> <!-- this is your reference -->
<div class="fb-like" expr:data-href="data:post.url" data-width="" data-layout="" data-action="" data-size="" data-share="true"></div>

5. Click Save Theme

There you go, you are all set!

Go to your blog post, hit the browser Refresh, you will see the Like button rendered just after your contents.

Sign in to your Facebook account at your web browser & test them out.

You can also fine tune the Facebook Like button features as explained at Facebook Social Plugin page linked provided earlier.

You can also display the Facebook Share button, besides this new Facebook Like button if you want -- just fine tune the settings as explained at the Facebook Developer page.

Hope it Helps!

New shopping cart widget for Blogger blogs -- transform your blog & sell products using your blog posts instantly! Visit Add Shopping Cart Widget Page to learn more.

Interesting Related to this Topic at Irsah inDesigns Blog

Got It!

Data submitted via comments collected & stored by the respective providers.

Read our Privacy Policy to learn more on data management & protection.

DISQUS With Us!