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&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='<data:post.url/>'</script><script>reddit_title='<data:post.title/>'</script><script language='javascript' src='http://reddit.com/button.js?t=1'/>
<!-- Reddit button end -->
</div>
<script type='text/javascript'>var addthis_config = {"data_track_clickback":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:
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:
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!
Chrome Extensions
Android
MTG Finder
MTG Wishlist
FAQ
MTG
Wikiquote
