11 Facebook Share Buttons And Plugins for Blogger Post

Are you searching for how to add social media buttons to blogger posts, facebook share widget for blogger, adding a facebook share button to blogger and how to share blogger posts on facebook automatically. This post has the best information on blogspot facebook share, facebook like and share button code for blogger, share button facebook and custom share buttons blogger.

Now a days social presence of a blog is critical and Facebook social plugins are necessary to achieve a good social presence. This post includes HTML, CSS and JavaScript codes for installing all the 11 Social plugins provided by Facebook including Comments, Embedded Comments, Embedded Posts, Embedded Videos, Follow Button, Like Button, Page Plugin, Quote Plugin, Save Button, Send Button and Share Button.

Activity Feed, Face pile, Like Box, Recommendations Feed and Facebook for WordPress Plugin are deprecated hence not included here.

Step 1: Add Facebook og Metadata to blog template

Open graph protocol of Facebook is need to included in the blogger template. For that we can use meta tags. Below are the meta tags needed to add open graph protocol to blogger. There is no need to addxmlns:og=’http://ogp.me/ns# inside <html….> tag as it will throw an error in XML validation. You can check XML validation in the Online Error Parsing XML Validator Tool For Blogger.

Metadata code to copy if you do not have a FB AppID

<!—[Facebook meta tag]—>
<metaexpr:content=’data:blog.pageTitle‘ property=’og:title’/>
<metaexpr:content=’data:blog.url’ property=’og:url’/>
<metacontent=’en_US’ property=’og:locale’/>
<metacontent=’shipmethis’property=’og:site_name’/>
<metacontent=’https://www.facebook.com/shipmethis’ property=’fb:admins‘/>
<metacontent=’article’ property=’og:type’/>

Where to Paste the Copied Code

The metadata code should be pasted before<b:include data=’blog’ name=’all-head-content’/>.

Metadata code to copy if you have a FB AppID

If you have made an app with developer.facebook, then you can add the app ID in the below metadata code. You can app ID by going tohttps://developers.facebook.com/ and select your app. You can see the App ID on the url.

Find Facebook app ID easily

Metadata code to copy

<!— [ Facebook meta tag ] —>
<meta expr:content=’data:blog.pageTitle‘ property=’og:title’/>
<meta expr:content=’data:blog.url’ property=’og:url’/>
<meta content=’en_US’ property=’og:locale’/>
<meta content=’shipmethis’ property=’og:site_name’/>
<meta content=’https://www.facebook.com/shipmethis’ property=’fb:admins‘/>
<meta content=’article’ property=’og:type’/>
<meta content=’AppId ‘ property=’fb:app_id’/>

Change the AppId to your AppID.

Where to Paste the Copied Code

The metadata code should be pasted before<b:include data=’blog’ name=’all-head-content’/>.

Step 2: Verify the Meta Tags Added in the Blogger Template

You have added the meta tags to blogger template. These meta tags has to verified by Facebook. If there is any mistakes happened while adding meta tags, a parsing error will be shown and page will not be crawled by Facebook bots.

To verify added metatags, Go to Facebook Debugger
Paste any post URL in the box
Select Fetch New Scrap Information
All the meta tags will appear here.
Check for any parsing error.

Step 3: Add Facebook JavaScript SDK ToBlog-spot Blog

Facebook JavaScript SDK is a script that loads all the social plugins. The new JavaScript version is 2.9 and it has been modified to suit XML parsing of blogger template.

You have to add this JavaScript code to your blogger template only once and can add any social plugin after that.

Facebook Modified JavaScript 2.9 – No App ID – Code to copy

<div id=’fb-root’/>
<script>
/* <![CDATA[ */
(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
js = d.createElement(s); js.id = id;
js.src = “//connect.facebook.net/en_US/sdk.js#xfbml=1&version=v2.9”;
fjs.parentNode.insertBefore(js, fjs);
}(document, ‘script’, ‘facebook–jssdk‘));
/* ]]> */
</script>

Where to Paste the Copied Code

Paste the script after the </body> tag and before the </html> tag.

Facebook Modified Script 2.9 – Have an App ID – Code to copy

<script>(function(d, s, id) { var js, fjs = d.getElementsByTagName(s)[0]; if (d.getElementById(id)) return; js = d.createElement(s); js.id = id; js.src = "//connect.facebook.net/en_US/all.js#xfbml=1&appId=630535786999761"; fjs.parentNode.insertBefore(js, fjs); }(document, 'script', 'facebook-jssdk'));</script>

The above javascript script is well formed and minified for blogspot blogs to load the website fast. You need to change the red coloured App Id 630535786999761to your app ID.