Facebook Like, Twitter, and Google Plus Buttons for Blogger

Dec 8, 2015

---

We noticed that Twitter button by default doesn't include the count bubble now.
So the layout below looks quite something.

---

Anyway, if you wanna put social media buttons on your blog but doesn't wanna pull the JavaScript libraries (to speed up your page load), use this method — you need to tinker that a bit, like the (additional) CSS, (additional) HTML element(s) maybe, and (additional) JavaScript controller.

Horizontal Buttons Layout

To change the displayed verb from LIKE to RECOMMEND (Facebook button), you can add the additional data-action="recommend" parameter in the HTML section of the button.
Example:

<div class="fb-like" data-action="recommend" data-layout="box_count" data-send="false" data-show-faces="false" data-width="45"></div>

Tweet

<b:if cond='data:blog.pageType == "item"'> <!--Horizontal Sharer HTML starts--> <table> <tbody> <tr> <td style='vertical-align:top'> <div class="fb-like" data-layout="box_count" data-send="false" data-show-faces="false" data-width="45"></div> </td> <td style='vertical-align:top'> <a class="twitter-share-button" data-count="vertical" data-lang="en" data-size="medium" href="https://twitter.com/share">Tweet</a> </td> <td style='vertical-align:top'> <g:plusone size="tall"></g:plusone> </td> </tr> </tbody> </table> <!--Horizontal Sharer HTML ends--> </b:if>

---

Vertical Buttons Layout

Tweet

<!--Vertical Sharer HTML starts--> <table> <tbody> <tr> <td> <div class="fb-like" data-layout="box_count" data-send="false" data-show-faces="false" data-width="60"></div> </td> </tr> <tr> <td> <a class="twitter-share-button" data-count="vertical" data-lang="en" data-size="medium" href="https://twitter.com/share">Tweet</a> </td> </tr> <tr> <td> <g:plusone annotation="bubble" size="tall"></g:plusone> </td> </tr> </tbody> </table> <!--Vertical Sharer HTML ends-->

---

Facebook fb-root element and all JavaScript
For either horizontal/vertical layout above
<!--Facebook Like root element--> <div id="fb-root"></div> <!--Sharer JavaScript starts (all async)--> <script> // *********************** // Facebook Like // *********************** (function (d, s, id) { var js, fjs = d.getElementsByTagName(s)[0]; if (!d.getElementById(id)) { js = d.createElement(s); js.id = id; js.src = "https://connect.facebook.net/en_US/all.js#xfbml=1"; fjs.parentNode.insertBefore(js, fjs); } }(document, "script", "facebook-jssdk")); // *********************** // Twitter Tweet // *********************** (function (d, s, id) { var js, fjs = d.getElementsByTagName(s)[0]; if (!d.getElementById(id)) { js = d.createElement(s); js.id = id; js.src = "https://platform.twitter.com/widgets.js"; fjs.parentNode.insertBefore(js, fjs); } }(document, "script", "twitter-wjs")); // *********************** // Google+ // *********************** (function (d, s) { var js, fjs = d.getElementsByTagName(s)[0]; js = d.createElement(s); js.src = "https://apis.google.com/js/plusone.js"; fjs.parentNode.insertBefore(js, fjs); }(document, "script")); </script> <!--Sharer JavaScript ends-->

---

(New) Combined Script

Remember to wrap the snippet below with <script> and </script>. function showShareButtons() { "use strict"; var d = document, s = "script", js = { "Facebook": { // Facebook resource and script ID "source": "https://connect.facebook.net/en_US/all.js#xfbml=1", "ID": "facebook-jssdk" }, "Twitter": { // Twitter resource and script ID "source": "https://platform.twitter.com/widgets.js", "ID": "twitter-wjs" }, "GooglePlus": { // Google Plus resource (no script ID) "source": "https://apis.google.com/js/plusone.js", "ID": "" } }, je = Object.keys(js), // an array: ["Facebook", "Twitter", "GooglePlus"] s0 = d.getElementsByTagName(s)[0]; function createScript(v) { var newScript; /* ------------------------------------------------ *\ |* updated: to avoid "passing empty string" warning *| \* ------------------------------------------------ */ if (js[v].ID !== "" && !d.getElementById(js[v].ID)) { newScript = d.createElement(s); newScript.src = js[v].source; newScript.id = js[v].ID; s0.parentNode.insertBefore(newScript, s0); } else if (js[v].ID === "") { // Google+ newScript = d.createElement(s); newScript.src = js[v].source; s0.parentNode.insertBefore(newScript, s0); } } je.forEach(createScript); } showShareButtons();

---

About the buttons and new combined script

The count number on the bubble will automatically follow your current post stats. The current sharing stats shown above is the stats of this post. Those buttons above are from the original social networks.

The new script snippet works similar with the three anonymous-auto-invoked functions. They're just combined into one block, and it is manually-invoked.
The bottom showShareButtons() is the invocation part.
Object.keys() (object-array-related) and forEach() (loop-block) methods are compatible with IE (from version 9 and above) and many other recent browsers.

---

Placing the JavaScript (+Facebook root element)

Put it before </body> tag. Go to template ➙ HTML editor ➙ find the </body> tag ➙ paste the script right before that.
Best practice of placing JavaScript on webpage

The Facebook root element, this code: <div id="fb-root"></div> , can be placed before the script tag (like the snippets above).

Or, you can also move it near the Facebook Like button element. Place it after the <div class="fb-like"... — before the first </td> (column) closing tag.
Either way, the (Facebook) script will do the same job.

---

About Google Plus button on Blogger

The Google Plus resource is a built-in feature on Blogger. So the Google Plus resource invocation can be omitted, for Blogger blog only.

We can just use these particular lines (Facebook and Twitter): // *********************** // Facebook Like // *********************** (function (d, s, id) { var js, fjs = d.getElementsByTagName(s)[0]; if (!d.getElementById(id)) { js = d.createElement(s); js.id = id; js.src = "https://connect.facebook.net/en_US/all.js#xfbml=1"; fjs.parentNode.insertBefore(js, fjs); } }(document, "script", "facebook-jssdk")); // *********************** // Twitter Tweet // *********************** (function (d, s, id) { var js, fjs = d.getElementsByTagName(s)[0]; if (!d.getElementById(id)) { js = d.createElement(s); js.id = id; js.src = "https://platform.twitter.com/widgets.js"; fjs.parentNode.insertBefore(js, fjs); } }(document, "script", "twitter-wjs"));

Or combine those: function showShareButtons() { "use strict"; var d = document, s = "script", js = { "Facebook": { "source": "https://connect.facebook.net/en_US/all.js#xfbml=1", "ID": "facebook-jssdk" }, "Twitter": { "source": "https://platform.twitter.com/widgets.js", "ID": "twitter-wjs" } }, je = Object.keys(js), s0 = d.getElementsByTagName(s)[0]; function createScript(v) { var newScript; if (!d.getElementById(js[v].ID)) { newScript = d.createElement(s); newScript.src = js[v].source; newScript.id = js[v].ID; s0.parentNode.insertBefore(newScript, s0); } } je.forEach(createScript); } showShareButtons();

---

Placing the HTML elements

• If you wanna center the elements, include style="margin:auto" on table element.
  Example : <table style="margin:auto">.
• To show the horizontal share buttons under every post, go to template ➙ HTML editor ➙ expand widgets ➙ look for:

  <div class='post-footer'>

  and paste the code above that.
• To show the horizontal share buttons under the title of the post, go to template ➙ HTML editor ➙ expand widgets ➙ look for this code below :

  <div class='post-header-line-1'/>
  </div>

  paste the HTML below the closing </div>
• The conditional b:if tags will show the sharers only on the item page (your single post, either static page or the blog post itself), not on the list/blogroll/label search and homepage.
  That will make things more efficient, since the visitors will land mostly on your single posts. But, if you do not want that, then delete the <b:if cond='data:blog.pageType == "item"'> and the closing </b:if>.
  If you wanna read some more about b:if tag, there's a post about that.

---

References

• Google Plus at this link.
• Twitter at this link.
• Facebook at this link.

---

See ya

If you have any problem using/placing the codes from this post, or you find errors on them, go ahead write your question/feedback on the comment box below.