Social Media Subscription Plugin with Google Plus Followers

Social Media plugins are very popular and are heavily used by most of the websites/blogs. They are one powerful tool and are very helpful in increasing the traffic to your blog and building your audience on the internet.

The plugin that I'm going to share today is very simple compared to other plugins and it has the following features:

Facebook like box
Twitter follow button with count
Google plus followers of the authors
Google Plus follow button for your Google+ page

The plugin will look something like this.

Now here's the code for it.

<style type='text/css'>
#social-media{
background:#fff;
padding-top:10px;
border:1px solid #d9d9d9;
border-radius:15px;
}
</style>
<div id="social-media">
<center>
<iframe src="//www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Fwww.facebook.com%2Ftechcodes&amp;width=292&amp;height=180&amp;colorscheme=light&amp;show_faces=true&amp;border_color&amp;stream=false&amp;header=false&amp;appId=414290321970908" scrolling="no" frameborder="0" style="background:#fff; overflow:hidden; width:292px; height:180px;" allowtransparency="true"></iframe>
<a href="https://twitter.com/LahaulSeth" class="twitter-follow-button" data-show-count="true" data-size="large">Follow @LahaulSeth</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 class="g-plus" data-action="followers" data-height="300" data-href="https://plus.google.com/116408116032173037344" data-width="262" style="background:#ffffff;">
</div>
<div class="g-plus" data-href="https://plus.google.com/100743570747620795888"></div>
</center>
<font style="font-weight:bold;size:8px;font-family:DejaVu Sans Condensed;"><a href="http://www.blogtipscodes.com/2012/12/social-media-plugin-with-google-plus-followers.html">Get this plugin >></a></font>
</div>
<script type="text/javascript">
(function(){window.___gcfg={'lang':'en'};
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>

Now before using this code you need to change all of the urls to your own.

Find this text and the replace them with your own.

techcodes --> replace with your own facebook page username
LahaulSeth --> replace with your own twitter username
116408116032173037344 --> replace with your own google+ profile id
100743570747620795888 ---> replace with your own google+ page id

After only making this changes you can use this code on your blog.

If you are having trouble using this widget, then do not hesitate to use the comment section to share your problems.