Powered by Blogger.
Menu :

Add A Fancy Share Buttons To Blogger And Wordpress

If you've checked every bottom of my blog posts you'll noticed a set of social sharing buttons just below the posts. This social sharing buttons doesn't only beautify your blog with a unique look, but it also gives the readers a freeware of sharing your posts to their various social networking sites such as facebook and twitter, which in-turn boost your traffic and fetched you with more targeted audience as well. Ever since i implemented this social sharing buttons to my blog, I've experienced a dramatic increase in my traffic.

add social share buttons to blogger and wordpress
In this tutorial am going to work you through the installation process of this social sharing buttons. So, just site back and relax while i provide you with all the necessary step by step guide to add this sharing buttons to your blog.

PREAMBLE:- This set of social sharing buttons is only for used on Blogger and Wordpress platforms at the time of writing this post. Hence, if you're blogging with any of this platforms (Blogger or Wordpress), then you'll definitely won't be missed out. All you have to do is to follow all the steps outlined below appropriately, in other to achieve the aim of reaching out to more targeted audience and gaining exposure as well. This social sharing buttons comprises of some top social networking and bookmarking site(s) including:
  • Facebook share button
  • Googl+1 share button
  • Tweet share button
  • Digg bookmarking share button
  • StumbleUpon bookmarking share button
  • Facebook like button.
social sharing buttons for wordpress and blogger

Now, base on the fact that this social sharing buttons is both for Blogger and Wordpress users, that's why we're going to make it more concise by dividing the tutorial into two sections, "Blogger and Wordpress".

Adding The Social Share Buttons To Blogger

1. Log in to Blogger account if you're not already logged in.
2. Go to Template => Edit HTML
3. Click => Format Template just above the template Editor.
4. Click anywhere inside the Template Editor and search for this code:-

</head>
 And just above/before </head> paste the following codes

<script type="text/javascript" src="http://w.sharethis.com/button/buttons.js"></script><script type="text/javascript">stLight.options({publisher: "ur-47c9cca-cf33-f245-f3f6-43ed7a58f34f"}); </script>
 5. Now search for this code:

<data:post.body/>
Wait! Note that if you're template has an Auto-Read-More installed, then you're likely to have more than one of these code "<data:post.body/>". So, you just have to test them one after the other until you get a satisfying result.

6. Copy the below code and paste it just below <data:post.body/> if you want the social sharing buttons to appear below posts. But if you want the social sharing buttons to appear above posts, i.e under posts Title, then you have to paste the below codes above <data:post.body/>.


<b:if cond='data:blog.pageType == &quot;item&quot;'><style>.blogstable-style-share-buttons{-webkit-border-radius: 5px;-moz-border-radius: 5px;border-radius: 5px;border:1px solid #BBBBBB;background-color:#FFFFFF;-webkit-box-shadow: #B3B3B3 5px 5px 5px;-moz-box-shadow: #B3B3B3 5px 5px 5px;box-shadow: #B3B3B3 5px 5px 5px;padding: 5px;margin: 10px;}</style><p align='center' class='blogstable-style-share-buttons'><span class='st_facebook_hcount' displayText='Facebook'/><span class='st_plusone_hcount' displayText='Google +1'/><span class='st_twitter_hcount' displayText='Tweet'/><span class='st_pinterest_hcount' displayText='Pinterest'/><span class='st_digg_hcount' displayText='Digg'/><span class='st_stumbleupon_hcount' displayText='StumbleUpon'/><span class='st_fblike_hcount' displayText='Facebook Like'/></p></b:if>

Adding The Social Share Buttons To Wordpress

To install the social share button to your Wordpress theme simply follow the steps below. Note: You always need to backup your Wordpress theme if you're making a manual customization to your blog, in-case of error.
How To Install The Social Sharing Buttons To Wordpress Blog Without Plugin? Yes! it's quite possible. Just follow this simple steps:
Go to Settings => Posts Layout => Before The Content. Paste he bellow codes:

<style>.blogstable-style-share-buttons{-webkit-border-radius: 5px;-moz-border-radius: 5px;border-radius: 5px;border:1px solid #BBBBBB;background-color:#FFFFFF;-webkit-box-shadow: #B3B3B3 5px 5px 5px;-moz-box-shadow: #B3B3B3 5px 5px 5px;box-shadow: #B3B3B3 5px 5px 5px;padding: 5px;margin: 10px;}</style><p align='center' class='blogstable-style-share-buttons'><span class='st_facebook_hcount' displayText='Facebook'/><span class='st_plusone_hcount' displayText='Google +1'/><span class='st_twitter_hcount' displayText='Tweet'/><span class='st_pinterest_hcount' displayText='Pinterest'/><span class='st_digg_hcount' displayText='Digg'/><span class='st_stumbleupon_hcount' displayText='StumbleUpon'/><span class='st_fblike_hcount' displayText='Facebook Like'/></p>
Now Save it, and you're all done!

Feedback!

These's all i have for now regarding this tutorials. You can as well share it to you're friends using the sharing buttons below. If you happen to face any challenges adding the social share buttons to your blog, kindly post your query via comments.

You don't want to miss any of our future updates? Please subscribe for our daily newsletter so as to get our latest update delivered directly to your email. Stay blessed, and do have a wonderful weeks ahead. Happy blogging pals...

0 comments:

Post a Comment