Include Social Network buttons in your Blogger posts

Social networks are actually the most important traffic source in the web. Including buttons is a good way to socialize your blog. Here we'll show some tips to include buttons in your website, particularly in Blogger.



AddThis


The first tool you must know is AddThis. It integrates a lot of social network buttons (349 at the moment) in several languages in one widget with a few code lines. It also provides analytics services and trend statistics. To include AddThis in your website, you only need to follow the instructions of the following link: Get AddThis (select the blogger option to see blogger's instructions).

For example, here's the code used in this blog:

<!-- AddThis Button BEGIN -->
 <div class='addthis_toolbox addthis_default_style' expr:addthis:title='data:post.title' expr:addthis:url='data:post.url'>
  <a class='addthis_button_compact' href='http://www.addthis.com/bookmark.php?v=250&amp;username=yourusername'>Share</a>
  <a class='addthis_counter addthis_bubble_style'/>
  <span class='addthis_separator'>|</span>
  <a class='addthis_button_preferred_1'/>
  <a class='addthis_button_preferred_2'/>
  <a class='addthis_button_preferred_3'/>
  <a class='addthis_button_preferred_4'/>
  <a class='addthis_button_stumbleupon'/>
  <a class='addthis_button_delicious'/>
  <a class='addthis_button_digg'/>
  <a class='addthis_button_google_plusone' g:plusone:size='small'/>
 </div>
 <div class='addthis_toolbox addthis_default_style' expr:addthis:title='data:post.title' expr:addthis:url='data:post.url'>
  <a class='addthis_button_facebook_like'/>
  <a class='addthis_button_tweet' tw:via='themunsonsapps'/>
  <!-- Reddit button start -->
  <script>reddit_url=&#39;<data:post.url/>&#39;</script><script>reddit_title=&#39;<data:post.title/>&#39;</script><script language='javascript' src='http://reddit.com/button.js?t=1'/>
  <!-- Reddit button end -->
 </div>
 <script type='text/javascript'>var addthis_config = {&quot;data_track_clickback&quot;:true};</script>
 <script src='http://s7.addthis.com/js/250/addthis_widget.js#username=yourusername' type='text/javascript'/>
 <!-- AddThis Button END -->

That looks like this:

Remember to include it before the <div class='post-footer'> tag if you're using Blogger.

Although it allows full customization using its API, it has some display limitations. Maybe you want the button to have a different layout or to display counters that AddThis not implements. This is the case of social networks buttons with counters like reddit, digg, stumbleupon and much more.

Facebook



There's a form to include facebook buttons in your website, you only need to insert the URL to like, facebook account and layout params like font, color or width.
You can choose the kind of button:

• Like Box
  
• Like Button
• Login Button
• Send Button

And much more. Once again, to include them in in Blooger, insert the code just after <div class='post-footer'> tag in your template.

Twitter


Twitter API is available here. There are several kinds of button, languages and customization.

For example:

<a href="http://twitter.com/share" class="twitter-share-button" data-url="http://themunsonsapps.blogspot.com" data-count="vertical" data-via="themunsonsapps">Tweet</a><script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script>

Try this button:

Tweet

You can also set the predefined text, account to suggest, url to tweet and more. Visit the full dev API for Tweet Button. See also how to add Twitter button to Blogger.

Google +1


Google plus one is the new Google's social network. To include a button in your website, you only need to fill some form fields from the official +1 button site and paste the code where you want. To include it in blogger you can follow these tips.

<script type="text/javascript" src="https://apis.google.com/js/plusone.js"></script>
<g:plusone size="tall" href="http://themunsonsapps.blogspot.com"></g:plusone>

Check the generated button:



Reddit


Check the different reddit buttons and them customizations here: Reddit Buttons.

<script type="text/javascript">
  reddit_url = "http://themunsonsapps.blogspot.com";
  reddit_title = "Reddit Buttons!";
</script>
<script type="text/javascript" src="http://www.reddit.com/static/button/button3.js"></script>

Reddit this sample:




To include it in every Blogger post, search once again for the <div class='post-footer'> tag and insert the code after it, but in this case, set the url parameter to: <data:post.url/> (see how to add reddit button to every Blogger post).

For example:

<script type="text/javascript">
  reddit_url = "<data:post.url/>";
  reddit_title = "Reddit Buttons 2!";
</script>
<script type="text/javascript" src="http://www.reddit.com/static/button/button3.js"></script>

Delicious

The official website for inserting delicious buttons can be found here. Here there is a sample of what will you get:

Bookmark this sample button in delicious:
Bookmark this awesome website on Delicious

<img src="http://l.yimg.com/hr/img/delicious.small.gif" height="10" width="10" alt="Delicious" /><a href="http://www.delicious.com/save" onclick="window.open('http://www.delicious.com/save?v=5&noui&jump=close&url='+encodeURIComponent(location.href)+'&title='+encodeURIComponent(document.title), 'delicious','toolbar=no,width=550,height=550'); return false;"> Bookmark this awesome website on Delicious</a>

To include it in every Blogger post, you will need to make other changes, check them at add delicious button to Blogger post.

Digg 


Just like delicious, you can insert a digg button with counter in your website following the official guidelines.

Digg this sample 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>
<!-- Wide Button -->
<a class="DiggThisButton DiggWide" href="http://digg.com/submit?url=http%3A//themunsonsapps.blogspot.com"></a>

Check the blogging tips about how to add digg button to Blogger post.

StumbleUpon 


SumbleUpon buttons are named badges. You can consult the official badge setup here. It also includes guidelines for blogger, feedburner, wordpress and more. You can choose the button layout and style, including a default url or getting it from the actual website, for example this:

<script src="http://www.stumbleupon.com/hostedbadge.php?s=5&r=http://themunsonsapps.blogspot.com"></script>

I hope this can be useful for you! Enjoy it!