How to add Mashable style Social Media box without Plugin

• Tweet
• Save

Social media is an important part of every website and blog. Mashable have a clean and beautiful Social Media box in right sidebar. In this tutorial we are going to create simple Mashable style social box which you can use on your blog.

Copy below code in your blog sidebar

[html]<div id="di-bar" style="width:300px;">
<div class="di-likebox" style="background: white; padding: 10px 10px 0 10px; border: 1px solid #D8E6EB; border-image: initial;">
<iframe src="//www.facebook.com/plugins/like.php?href=https://facebook.com/designsidea&amp;send=false&amp;layout=standard&amp;width=280&amp;show_faces=true&amp;action=like&amp;colorscheme=light&amp;font&amp;height=80&amp;appId=234513819928295" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:280px; height:80px;"></iframe>
</div>
<div class="di-googleplus" style="background: #F5FCFE; border-top: 1px solid white; border-bottom: 1px solid #EBEBEB; border-right: 1px solid #D8E6EB; border-left: 1px solid #D8E6EB; border-image: initial; font-size: .90em; font-family: Arial; color: black; padding: 9px 10px; ">
<g:plusone size="medium" annotation="inline" width="280" href="http://designsidea.com/"></g:plusone>
<script type="text/javascript">
(function() {
var po = document.createElement(‘script’); po.type = ‘text/javascript’; po.async = true;
po.src = ‘https://apis.google.com/js/plusone.js’;
var s = document.getElementsByTagName(‘script’)[0]; s.parentNode.insertBefore(po, s);
})();
</script>
</div>
<div class="di-twitter" style="background: #EEF9FD; padding: 10px; border: 1px solid #C7DBE2; border-top: 0; border-image: initial;">
<a href="https://twitter.com/designsidea" class="twitter-follow-button" data-show-count="true">Follow @designsidea</a>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>
</div>
</div>[/html]

Don’t forget to change

• https://facebook.com/designsidea from line 3 with your Facebook fan page URL.
• http://designsidea.com/ from line 6 with your blog link.
• Both ‘designsidea’ from line number 16 with your Twitter username.

If you are facing any problem, feel free to drop a comment below.