10/12/2013
17
Social networking sites are becomes most important for blogging. Just publishing post on your blog and submitting it on Webmaster is not enough. You must have to be social. By sharing your blog post on social networking sites is good idea to get referral traffic. Though we cannot ignore the social networking sites. It plays crucial role to build up your blog popularity and also increase traffic. When other people share your content than it gets more exposure. So it is good to add an easy option to share your content on these social network site. You can simply add social sharing buttons on your blog so that your readers can share your post directly from your blog. Previously we shared social sharing button just below the post, today we going to share social sharing button just below the post title.

Social Sharing Widget

About this Social Sharing Buttons

The widget we are going to share looks very unique and elegant. This widget has title "Socialite It" so that people can easily notice it and share your content. It is well organized in a open table so the each buttons looks pretty. The widget included four social button which are tweet for Twitter, like for Facebook, +1 for Google+, and stumble it for stumble your post on StumbleUpon. All these sites are very reputed social sites and the referral traffic which comes from these sites are very helpful to increase your blog reputation. The widget is build by using CSS, HTML, XML and JavaScript and we have done some modification in code so that these buttons can only appear in post page. So lets headed to installation process.

Add the Social Sharing Button Below Post Title in Blogger

To adding this social sharing button below your post title in blogger template is not a difficult task. You just have to follow below instruction step by step and you will done it. Below are the step by step guide so that you can add this widget on your blog without hassle.
  1. Log in to your blogger.
  2. Go to Template and back up your template.
  3. Now click on "Edit HTML" and find the </head> section.
  4. Copy the following code and paste it just above the </head> section.

  5. <b:if cond='data:blog.pageType == "item"'>
    
    <script type='text/javascript'>
    
    // Twitter
    undefinedfunction undefineda, b, c){var d=a.getElementsByTagNameundefinedb)[0];if undefined!a.getElementByIdundefinedc)){a=a.createElementundefinedb);a.id=c;a.src="//platform.twitter.com/widgets.js";d.parentNode.insertBeforeundefineda, d)}})undefineddocument, "script", "twitter-wjs");
    // Stumbleupon
    undefinedfunction undefined){var a=document.createElementundefined"script");a.type="text/javascript";a.async=true;a.src="https://platform.stumbleupon.com/1/widgets.js";var b=document.getElementsByTagNameundefined"script")[0];b.parentNode.insertBeforeundefineda, b)})undefined);
    
    </script>
    
    
    <style type='text/css'>
    
    /*--------Social Sharing Button by Blogging Tuition--------*/
    #SocialBT {
        float: left;
        border-top: 1px solid #eaeaea;
        border-bottom: 1px solid #eaeaea;
        width: 610px;
        margin-bottom: 20px;
        margin-left: -10px;
        margin-top: 10px;
    }
    
    .headingsharer h5 {
        float: left;
        padding-right: 20px;
        padding-top: 18px;
        text-transform: uppercase;
        font-weight: bold;
        margin: 0px;
        padding-left: 10px;
    }
    
    .tweeetero, .fbwolo, .g-plusones, .stumblo {
        float: left;
        border-left: 1px solid #eaeaea;
        padding-left: 18px;
        padding-top: 15px;
        padding-bottom: 10px;
    }
    
    .g-plusones {
        margin-left: 20px;
    }
    
    </style>
    
    </b:if>
    


  6. Now search for <div class='post-body entry-content'>
  7. And paste following code just above it.


  8. <b:if cond='data:blog.pageType == "item"'>
    <div id='SocialBT'>
     <div class='headingsharer'>
      <h5>SOCIALIZE IT →</h5>
     </div>
     <div class='tweeetero'>
      <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='fbwolo'>
      <iframe allowtransparency='true' expr:src='"//www.facebook.com/plugins/like.php?href=" + data:post.url + "&send=false&layout=button_count&width=80&show_faces=false&action=like&colorscheme=light&font&height=21"' frameborder='0' scrolling='no' style='border:none; overflow:hidden; width:80px; height:21px;'/>
     </div>
     <div class='g-plusones'>
      <div class='g-plusone' data-size='medium' expr:data-href='data:post.url'/>
      </div>
      <div class='stumblo'>
       <su:badge expr:location='data:post.url' layout='1'/>
      </div>
     </div>
     </b:if>
    

  9. Now click on "Save Template" and you're done!

Words from Editor

So dear pals this is another social sharing button widget from Blogging Tuition. We would like hear from your about this widget. If you facing any difficulty to adding this widget ask for help we will guide on that. Keep visiting Blogging Tuition for more updates and secrets on Adsense, SEO, Blogging and more. You can simply subscribe our newsletter for free so you will not miss any important post. See you in next post till than happy blogging.
Share this article :

17 comments:

  1. Not working for me brother. Whenever I save it says:
    Error parsing XML, line 1324, column 114: The reference to entity "send" must end with the ';' delimiter.

    Help me!

    ReplyDelete
    Replies
    1. Hi, there is no coding about send parameter. Share you url here then i can say something about it.

      Delete
    2. hi I am having same problem. not working for me as well. getting same msg as above

      Delete
    3. Problem is with this <iframe allowtransparency='true' expr:src='"//www.facebook.com/plugins/like.php?href=" + data:post.url + "&send=false&layout=button_count&width=80&show_faces=false&action=like&colorscheme=light&font&height=21" ' frameborder='0' scrolling='no' style='border:none; overflow:hidden; width:80px; height:21px;'/>

      Delete
    4. mail me your blogger password and username using our contact page. let me check and correct what is wrong with your template?

      Delete
    5. I get the same exact error. I'm not sending login information though. How do I correct it?

      Delete
    6. Kindly provide your blog url Tiffany.

      Delete
  2. Not working for me too...my blog URL is http://learnatleisure.blogspot.com

    ReplyDelete
    Replies
    1. It is already ahowing there Debasish.

      Delete
  3. HTML inside XML , use to "&" to replace "&"

    ReplyDelete
  4. Follow blogger's instructions and add the ";" after each of the words it tells you to. After I did this, it worked great: www.theskinnymonkey.com

    ReplyDelete
  5. Thats Just doesnt work at all please change or modify the post

    ReplyDelete
  6. Hello Sanket, i have added all the codes correctly but it still not showing up on my blog. I even corrected the errors there were showing up by following bloggers instruction and adding ';' I also thought the problem could be because i already had bloggers shared buttons underneath post so i deleted that but it still did not work. Please what do you reckon I do now? what else could be the problem? Many thanks in advance

    ReplyDelete
  7. It didn't work for me :s

    ReplyDelete
    Replies
    1. If not working for you then you can simply add the above code just before the and save your template.

      Delete
  8. The code is giving me problem to install... it gives me an error....

    ReplyDelete

Confused? Feel free to ask
Your feedback is always appreciated. We will try to reply to your queries as soon as time allows.

Note:
1. To add HTML CODE in comments then please use our HTML Encoder
2. You can also test the tutorial based on blogger in our HTML Editor
3. We have Zero Tolerance to Spam. Cheesy Comments and Comments with Links will be deleted immediately upon our review.