• X

    How to Add Social media buttons With Share count in WordPress

    By in WordPress

    Bluehost hosting

    One of the  must have tip for any blogger would be add social media buttons around your blog post. This is very helpful for readers to share and bookmark your post. There are many social bookmarking WordPress plugins which can do it for you, but the best way to do it by adding manual code. As it is, I hate plugins specially when things can be done by manual code.

    So here I’m going to share tutorial for those who are looking forward to add social media buttons and social bookmarking buttons in WordPress. If you get good amount of social media share, I would suggest rather use Social media buttons with share count. As Share count will work as an ego boost and also your reader will look at your Website as a credible Website.

    How to add Social media Buttons into WordPress blog manually?

    Social Networking can generate a lot of traffic if used correctly. Many people share things on Facebook, twitter etc which they like. So if someone like something on your blog, they should have an option of sharing it. In this post I am will cover how to add stylish sharing buttons below the post in WordPress which includes Facebook like, Topsy (Twitter),  Digg, Google Plus, StumbleUpon and LinkedIn.

    sharing buttons 550x303 How to Add Social media buttons With Share count in WordPress

    There are plugins which can do this job for you but they slow down you site’s performance that’s why I am using the custom code to add social media buttons.

    Well, you will have to still install a plugin according to this tutorial which will automatically add the code below the post so you don’t have to edit any file. This lightweight plugin won’t slow down your blog.

    Procedure:

    1) Download the following plugin, install and activate it. <Link>

    2) [Optional but Recommended] Download this CSS file and upload it to your web-server. <Link>

    3) Open Post Layout’s setting page and add the following code in After the content field under Single Post.

    post layout settings 550x522 How to Add Social media buttons With Share count in WordPress

    <p><div class='hff_post_share'><div class='hff_buttons'>
    <div class='hff_button'><script type="text/javascript" src="http://cdn.topsy.com/topsy.js?init=topsyWidgetCreator"></script><div class="topsy_widget_data"><!--{"url":"[link]","style":"big","theme":"blue","nick":"havefunforever"}--></div></div>
    <div class='hff_button'><script type='text/javascript' src='https://apis.google.com/js/plusone.js'></script><g:plusone size='tall' href='[link]'></g:plusone></div>
    <div class='hff_button'><script src="http://connect.facebook.net/en_US/all.js#xfbml=1"></script><fb:like href="[link_encoded]" send="false" show_faces="false"  layout="box_count" width="50"  ></fb:like></div>
    <div class='hff_button'><script src='http://www.stumbleupon.com/hostedbadge.php?s=5&amp;r=[link_encoded]'></script></div>
    <div class='hff_button'><script type='text/javascript' src='http://platform.linkedin.com/in.js'></script><script type='in/share' data-url='[link]' data-counter='top'></script></div>
    <div class='hff_button'><script type='text/javascript'>(function() {var s = document.createElement('SCRIPT'), s1 = document.getElementsByTagName('SCRIPT')[0];s.type = 'text/javascript';s.async = true;s.src = 'http://widgets.digg.com/buttons.js';s1.parentNode.insertBefore(s, s1);})();</script> <a  class="DiggThisButton DiggMedium external" href="http://digg.com/submit?url=[link_encoded]" rel="nofollow" target="_blank"></a></div>
    </div><div style='clear:both'></div></div></p>
    <link rel="stylesheet" href="http://havefunforever.com/wp-content/custom/sharebts.css" type="text/css" media="screen" />

    4) [If Step 2 Done] If you skipped step 2 then you don’t have to edit the code but if you did, replace http://havefunforever.com/wp-content/custom/sharebts.css with your CSS file’s link.

    5) Replace twitter-username with your twitter username.

    I hope this tutorial will help you to add a stylish and sexy social bookmarking buttons with share count on your Blog. Do let us know if you are stuck anywhere or have any questions.

    Subscribe to Download WordPress Guide Worth $99

    Discover more awesome articles

    Article by

    Yousuf has written 6 articles.

    If you like This post, you can follow ShoutMeLoud on Twitter. Subscribe to Blogging tips via RSS or EMAIL to receive instant updates.

    { 9 comments… read them below or add one }

    Pranay Patel

    Yes very true post. It could easily help us to improve our site traffic and rank as well.

    Reply

    Mushfique

    Hey Yousuf! Great post I must say :) I was actually searching for something that wouldn’t slow down my blog
    Was wondering if I could add the code listed above in Thesis open hook ?

    Reply

    Yousuf Khan Jee

    No, this code only works with post layout plugin.

    Reply

    Ujjwal

    Nice way but I have implemented another way on my blog and made a static social media panel with all the sharing buttons. It’s my own creation :D

    Reply

    Raj @ Thesis Theme Customization

    instead of opting this plugin why can we go for Digg-Digg WordPress plugin which is far better and offers much convenience??

    Reply

    Yousuf Khan Jee

    Digg Digg is a good plugin and I have used it but it was slowing down my blog and it added a lot of scripts in my site.

    Reply

    Jitendra

    For thesis users, its already easy putting it after the post either by using custom function and thesis hooks or by using the thesis openhook plugin. For rest of the users not using thesis, it is definitely very good. Thanks for sharing…

    Reply

    prashant

    This is a pretty nice share… But i like the green re-tweet button…

    Reply

    Yousuf Khan Jee

    @Prashant, you can replace the following code with the tweetmeme or official twitter button code to show the one you like:

    Reply

    Leave a Comment

    Previous post:

    Next post:

    `