Social Button Plugin

2 Jun

Recently I wrote some code wherein we can plug buttons from various social networks like Twitter,Facebook,LinkedIn etc. on the website or on the blog.These buttons as one of the ways where content from your site can be shared to other sites like Facebook,twitter etc.Idea of the socials buttons always had fascinated me and I thinking of implementing this for quite sometime now and finally succeeded in implementing this.

Writing the code for these social buttons to share content was not a very time consuming since most of these social network sites has lot of documentation wherein they show as how to implement the buttons and various types of the buttons that one can implement in the site.

Below code has social buttons for

-Facebook- It has like button
-Twitter – It has tweet button
-LinkedIn-It has share button
-Google Plus – It has g+ button to share link.
-Reddit – Share button
-Tumblr- Share button
-Stumble Upon – Share Button
-Email – Open the email client to send mail.
-Print this Page – Prints the current page

Each of the these social networks provides the api for customizing the buttons


<html>
<head>


<script type="text/javascript" src="http://platform.tumblr.com/v1/share.js">
</script>
<script type="text/javascript" src="//assets.pinterest.com/js/pinit.js">
</script>
<style type="text/css">
 div.socialdiv{
	 border-style:!important;
	 width:500px;
	 height:20px;
	 position:fixed;	 
 }
 div.clfblike{
	 border-style:none;
	float:right;
	margin-left:10px;	
 }
<!--div.clfbdiv{
	border-style:none;
	float:right;
	}-->
div.cltwdiv{
	border-style:none;
	float:right;
	margin-left:10px;		
}
div.cllindiv{
	border-style:none;
	float:right;
	margin-left:10px;		
}
div.clgdiv{
	border-style:none;
	float:right;
	margin-left:10px;	
}
div.clsudiv{
	border-style:none;
	float:right;
	margin-left:10px;	
}
div.cltumdiv{
	border-style:none;
	float:right;
	margin-left:10px;
}
div.clreddiv{
	border-style:none;
	float:right;
	margin-left:10px;	
}
div.clpindiv{
	border-style:none;
	float:right;
	margin-left:10px;	
}
div.clprint{
	border-style:none;
	float:right;
	margin-left:10px;	
}
#idbtnprint
{
  border: 1px solid #777777;
  background: #6e9e2d;
  color: white;
  font: bold 11px 'verdana';
  padding: 4px;
  cursor: pointer;
  -moz-border-radius: 4px;
  -webkit-border-radius: 4px;
}
div.clemail{
	border-style:none;
	float:right;
	margin-left:10px;	
}
#idbtnemail
{
  border: 1px solid #777777;
  background: #2a9faa;
  color: white;
  font: bold 11px 'verdana';
  padding: 4px;
  cursor: pointer;
  -moz-border-radius: 4px;
  -webkit-border-radius: 4px;
}
</style>




<div id="idsocialdiv" class="clsocialdiv">
<div id="idfblike" class="clfblike"> <div id="fb-root"></div> <script>
        (function(d, s, id) {
          var js, fjs = d.getElementsByTagName(s)[0];
          if (d.getElementById(id)) {return;}
          js = d.createElement(s); js.id = id;
          js.src = "//connect.facebook.net/en_US/all.js#xfbml=1";
          fjs.parentNode.insertBefore(js, fjs);
        }(document, 'script', 'facebook-jssdk'));
      </script> <div class="fb-like"></div> </div>
<div id="idtwdiv" class="cltwdiv">
<a class="twitter-share-button" href="https://twitter.com/share" data-via="kiranbadi">Tweet</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>&nbsp;&nbsp;&nbsp; <div id="idlindiv" class="cllindiv"> <script src="//platform.linkedin.com/in.js" type="text/javascript"></script> <script type="IN/Share"></script> </div>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <div id="idgdiv" class="clgdiv"> <g:plusone annotation="none"></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 id="idsudiv" class="clsudiv"> <su:badge layout="6"></su:badge> <script type="text/javascript">
  (function() {
    var li = document.createElement('script'); li.type = 'text/javascript'; li.async = true;
    li.src = 'https://platform.stumbleupon.com/1/widgets.js';
    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(li, s);
  })();
</script> </div>
<div id="idtumdiv" class="cltumdiv"> <a style="text-indent: -9999px; width: 129px; display: inline-block; background: url(http://platform.tumblr.com/v1/share_3T.png) no-repeat left top; height: 20px; overflow: hidden" title="Share on Tumblr" href="http://www.tumblr.com/share">Share on Tumblr</a> </div>
<div id="idreddiv" class="clreddiv"> <a onclick="window.location = 'http://www.reddit.com/submit?url=' + encodeURIComponent(window.location); return false" href="http://www.reddit.com/submit"> <img border="0" alt="submit to reddit" src="http://www.reddit.com/static/spreddit7.gif"></a> </div>
<div id="idpindiv" class="clpindiv"> <a class="pin-it-button" href="http://pinterest.com/pin/create/button/?url=www.indianads.org&amp;media=www.indianads.org%2Fimages" count-layout="none"><img title="Pin It" border="0" src="//assets.pinterest.com/images/PinExt.png"></a> </div>
<div id="idprint" class="clprint"> <input id="idbtnprint" onclick="window.print()" value="Print This Page" type="button"> </div>
<div id="idemail" class="clemail"> <input id="idbtnemail" onclick="location.href='mailto:you@yourdomain.com'" value="Email" type="button"> </div>
</div>

The above code displays the button horizontally which looks like below,

Social Buttons

In case if you need to customize it to suit your website requirements, you can easily do it via CSS Properties.

Feel free to copy the code and use in your site.

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

%d bloggers like this: