Monkey Raptor

Thursday, March 7, 2013

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>


Vertical Buttons Layout


Facebook fb-root element and all JavaScript
For either horizontal/vertical layout above


(New) Combined Script

Remember to wrap the snippet below with <script> and </script>.


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):

Or combine those:


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


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.

Facebook Like, Twitter, and Google Plus Buttons for Blogger
http://monkeyraptor.johanpaul.net/2013/03/facebook-like-twitter-and-google-plus.html

7 comments

  1. BIG BIG!!!!!! thanks for this!!! this helped me alot

    ReplyDelete
    Replies
    1. Could you please tell me that if i use these buttons on my blogger posts that it will count the posts like ? or not. Because i don't want to lose like count for each post for example if i change my website or something like that and when i again use this button in the new template or other settings it will stay the same count or start from zero ? Hope you understand :) I will wait for your answer MonkeyRaptor :).

      Delete
    2. @Shan Iqbal:
      Hello there.
      Each button statistics, the like/share number, will based on the URL of the post/page.
      Therefore, if you switch the buttons layout/resources into this example, as long as the post/page URL doesn't change, you'll see the exact same statistics.

      Keep in mind, on Blogger "post/page preview", because the URL isn't the actual post/page URL, the count number will be different than the actual published post/page.

      Delete
    3. @MonkeyRaptor

      Thanks Man! You are great and fast response i love that. Good luck.... i understood and i also added already buttons on my blogger site and thanks for the nice information :).

      Delete
    4. @Shan Iqbal:
      You're welcome!! Thanks for stopping by. :D

      Delete

Tell me what you think...