Social networking buttons, plugins and widgets are known as one of the most important things for any blog as it helps in various places like gaining more traffic from social sites, allowing readers to share your posts easily and many more. As every blogger love to have more and more traffic then it's always a great idea to add some social sharing button into their blog.As we all know it's quite easy to find such social sharing plugin for wordpress but whenever it comes to blogger it's little tricky.So here today we're going to share such an all in one social sharing button for blogger users.
Must Read : Add Scroll Back to Top Button on Blogger
Blogger Social Sharing Buttons
This is basically a horizontal social sharing button bar which we're going to share today in this tutorial. As you can see the live demo this looks beautiful in the design as the buttons are placed in good manner and each button is separated in squares. This social buttons bar comes with a title which will help to get more shares and three different buttons from different social sites along with comment counter button. These four buttons are Twitter's tweet button, Facebook's like button, Google Plus's +1 button,as these three are are the most popular social networking site in these days. These are all well reputed social sites which used widely in the world and they will definitely help you to get good number of traffic towards his blog from these various social sites. You just need to place this sharing bar on your blog and your readers will automatically do the job if you've some loyal readers.Mean, they will socialize your content which can help you to receive good traffic. Basically, this widget is built with XML, CSS, HTML and JavaScript which are used by developers. We've customized the coding of these buttons in such way that they will only load when they've needed means only into post pages of your blogger blog and it really helps in improving the page load speed of your blog and it is also important to take a note about it while implementing new things in your blog.
Add Social Share Buttons into Blogger
Goto Blogger > Template >HTML Editor
Search for </head> tag there
Paste the following code above </head> tag
<b:if cond='data:blog.pageType == "item"'> <script type='text/javascript'> // Twitter (function (a, b, c){var d=a.getElementsByTagName(b)[0];if (!a.getElementById(c)){a=a.createElement(b);a.id=c;a.src="//platform.twitter.com/widgets.js";d.parentNode.insertBefore(a, d)}})(document, "script", "twitter-wjs"); </script> <style type='text/css'> /*---- Horizontal Social Buttons Bar By RafayTutorials ---- */ #SocialShareBar { float: left; border-top: 1px solid #eaeaea; border-bottom: 1px solid #eaeaea; width: 610px; margin-bottom: 20px; margin-left: -10px; margin-top: 10px; position: relative; clear:both; z-index: 9999; } .social-heading h5 { float: left; padding-right: 20px; padding-top: 13px; text-transform: uppercase; font-weight: bold; margin: 0px; padding-left: 10px; font-family: 'Lora',Arial,Helvetica,Geneva,sans-serif; font-size: 15px; color: #555555; } .twitter-tweet, .facebook-like, .google-plus, .comment-counter { float: left; border-left: 1px solid #eaeaea; padding-left: 18px; padding-top: 15px; padding-bottom: 10px; width: auto; height: 22px; } .comment-counter a { text-decoration: none !important; } .share-bubble{ background: url(http://4.bp.blogspot.com/-dvG3kQrRsJc/UoKM0HSkjUI/AAAAAAAAAbw/jZnkyNLnS9I/s1600/Comments.png) no-repeat; height: 22px; min-width: 30px; float: left; margin: 4px 5px 0px 5px; } .google-plus { margin-left: 20px; } </style> </b:if>
Now Search for below Code.
<b:if cond='data:blog.metaDescription == ""'>
Now above it paste the below code
<!-- Horizontal Social Sharing Buttons By TechTrickHome --> <b:if cond='data:blog.pageType == "item"'> <div id='SocialShareBar'> <div class='social-heading'> <h5>SOCIALIZE IT →</h5> </div> <div class='twitter-tweet'> <a class='twitter-share-button' expr:data-text='data:post.title' expr:data-url='data:post.url' href='https://twitter.com/share'>Tweet</a> </div> <div class='facebook-like'> <iframe allowTransparency='true' expr:src='"http://www.facebook.com/plugins/like.php?href=" + data:post.url + "&layout=button_count&show_faces=false&width=100& action=like&font=arial&colorscheme=light"' frameborder='0' scrolling='no' style='border:none; overflow:hidden; width:80px; height:21px;'/> </div> <div class='google-plus'> <div class='g-plusone' data-size='medium' expr:data-href='data:post.url'/> </div> <div class='comment-counter'> <div class='share-bubble'/> <a class='comment-link' expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'> <data:post.numComments/></a> </div> </div> </b:if>
Now save it and you're done. Must Read : Add Meta Tags on Blogger
So take a look onto your newly made widget and see how's it working.Don't forget share your view about this widget with us through the below comment section.