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.
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&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!
Got It!
Data submitted via comments collected & stored by the respective providers.
Read our Privacy Policy to learn more on data management & protection.