tvanantwerp/custom-social-media-buttons.md

## custom-social-media-buttons.md

      
    Raw
  

              custom-social-media-buttons.md
            
          
    Custom Sharing Buttons for Social Media

These files contain a basic template for creating customized social media share buttons on a web page. The CSS styles are arbitrary, and easily changes. The HTML and JavaScript works as follows.
HTML Structure

The buttons are simply a elements with no href value. Font Awesome is used to add icons. The IDs are used by the JavaScript to modify these a elements.
JavaScript Structure

This file uses jQuery.
Three functions are defined to find share counts for Facebook, Twitter and LinkedIn. Google+ is currently excluded.
The web page address is grabbed by window.location.href and encoded. The page title is pulled from whatever HTML element has id="title". The share count functions are called, and the results appended to the inner text of the share buttons. The the href of each button is changed to the appropriate URL for sharing the webpage.

  
## social.html
<html>
	<head>
		<link rel="stylesheet" href="//netdna.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" >
		<link rel="stylesheet" href="style.css">
	</head>
	<body>
		<!-- Example Content -->
		<h1 id="title">Title</h1>
		<p>Lorem ipsum stinky butthole.</p>

		<!-- Social Media Share Buttons -->
		<a class="social-link facebook" href="" id="fb-share" rel="nofollow" target="_blank" title="Share on Facebook"><i class="fa fa-facebook"></i> Share</a>
		<a class="social-link twitter" href="" id="tweet" rel="nofollow" target="_blank" title="Tweet this Page"><i class="fa fa-twitter"></i> Tweet</a>
		<a class="social-link linkedin" href="" id="linkedin" rel="nofollow" target="_blank" title="Share on LinkedIn"><i class="fa fa-linkedin"></i> LinkedIn</a>
		<a class="social-link gplus" href="" id="gplus-share" title="Plus 1 on Google+"><i class="fa fa-google-plus"></i></a>
		<a class="social-link email" href="" id="email-share" title="Email to a Friend"><i class="fa fa-envelope"></i></a>

		<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
		<script type="text/javascript" src="social.js">	</script>
	</body>
</html>

## social.js
jQuery(document).ready(function($){
	function getFBShares(page){
		var shares;
		$.getJSON("http://graph.facebook.com/?ids=" + page, function(data){
			if (data[page].shares > 1){
				shares = data[page].shares;
				$("#fb-share").append(" (" + shares + ")");
			}
		});
	}
	function getTweets(page){
		var tweets;
		$.getJSON("http://urls.api.twitter.com/1/urls/count.json?url=" + page + "&callback=?", function(data){
			if (data.count > 1) {
				tweets = data.count;
				$("#tweet").append(" (" + tweets + ")");
			}
		});
	}
	function getLinkedIn(page){
		var linkedinCount;
		$.getJSON("http://www.linkedin.com/countserv/count/share?url=" + page + "&callback=?", function(data){
			if (data.count > 1) {
				linkedinCount = data.count;
				$("#linkedin").append(" (" + linkedinCount + ")");
			}
		});
	}

	var Url = window.location.href;
	var UrlEncoded = encodeURIComponent(Url);
	var title = encodeURIComponent(document.getElementById("title").innerText);
	getFBShares(Url);
	getTweets(Url);
	getLinkedIn(Url);
	document.getElementById("fb-share").href="http://www.facebook.com/share.php?u=" + UrlEncoded;
	document.getElementById("tweet").href="http://twitter.com/home?status=" + title + " " + UrlEncoded;
	document.getElementById("linkedin").href="http://www.linkedin.com/shareArticle?mini=true&url=" + UrlEncoded + "&title=" + title;
	document.getElementById("gplus-share").href="https://plus.google.com/share?url=" + UrlEncoded;
	document.getElementById("email-share").href="mailto:?body=Take a look at this page I found: " + title + ". You can read it here: " + Url;
});

## style.css
a.social-link {
	display:inline;
	background-color: #aaa;
	color:#fff !important;
	text-decoration:none;
	padding:6px 12px;
	margin: 0;
	-webkit-transition: background 0.1s linear;
	-moz-transition: background 0.1s linear;
	-ms-transition: background 0.1s linear;
	-o-transition: background 0.1s linear;
	transition: background 0.1s linear;
}
a:hover.facebook {
	background-color:#4a66b7;
}
a:hover.twitter {
	background-color:#00acee;
}
a:hover.linkedin {
	background-color:#1b86bc;
}
a:hover.gplus {
	background-color:#dd4b38;
}
a:hover.email {
	background-color:#ff9600;
}
	<html>
	<head>
	<link rel="stylesheet" href="//netdna.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" >
	<link rel="stylesheet" href="style.css">
	</head>
	<body>
	<!-- Example Content -->
	<h1 id="title">Title</h1>
	<p>Lorem ipsum stinky butthole.</p>

	<!-- Social Media Share Buttons -->
	<a class="social-link facebook" href="" id="fb-share" rel="nofollow" target="_blank" title="Share on Facebook"><i class="fa fa-facebook"></i> Share</a>
	<a class="social-link twitter" href="" id="tweet" rel="nofollow" target="_blank" title="Tweet this Page"><i class="fa fa-twitter"></i> Tweet</a>
	<a class="social-link linkedin" href="" id="linkedin" rel="nofollow" target="_blank" title="Share on LinkedIn"><i class="fa fa-linkedin"></i> LinkedIn</a>
	<a class="social-link gplus" href="" id="gplus-share" title="Plus 1 on Google+"><i class="fa fa-google-plus"></i></a>
	<a class="social-link email" href="" id="email-share" title="Email to a Friend"><i class="fa fa-envelope"></i></a>

	<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
	<script type="text/javascript" src="social.js"> </script>
	</body>
	</html>
	jQuery(document).ready(function($){
	function getFBShares(page){
	var shares;
	$.getJSON("http://graph.facebook.com/?ids=" + page, function(data){
	if (data[page].shares > 1){
	shares = data[page].shares;
	$("#fb-share").append(" (" + shares + ")");
	}
	});
	}
	function getTweets(page){
	var tweets;
	$.getJSON("http://urls.api.twitter.com/1/urls/count.json?url=" + page + "&callback=?", function(data){
	if (data.count > 1) {
	tweets = data.count;
	$("#tweet").append(" (" + tweets + ")");
	}
	});
	}
	function getLinkedIn(page){
	var linkedinCount;
	$.getJSON("http://www.linkedin.com/countserv/count/share?url=" + page + "&callback=?", function(data){
	if (data.count > 1) {
	linkedinCount = data.count;
	$("#linkedin").append(" (" + linkedinCount + ")");
	}
	});
	}

	var Url = window.location.href;
	var UrlEncoded = encodeURIComponent(Url);
	var title = encodeURIComponent(document.getElementById("title").innerText);
	getFBShares(Url);
	getTweets(Url);
	getLinkedIn(Url);
	document.getElementById("fb-share").href="http://www.facebook.com/share.php?u=" + UrlEncoded;
	document.getElementById("tweet").href="http://twitter.com/home?status=" + title + " " + UrlEncoded;
	document.getElementById("linkedin").href="http://www.linkedin.com/shareArticle?mini=true&url=" + UrlEncoded + "&title=" + title;
	document.getElementById("gplus-share").href="https://plus.google.com/share?url=" + UrlEncoded;
	document.getElementById("email-share").href="mailto:?body=Take a look at this page I found: " + title + ". You can read it here: " + Url;
	});
	a.social-link {
	display:inline;
	background-color: #aaa;
	color:#fff !important;
	text-decoration:none;
	padding:6px 12px;
	margin: 0;
	-webkit-transition: background 0.1s linear;
	-moz-transition: background 0.1s linear;
	-ms-transition: background 0.1s linear;
	-o-transition: background 0.1s linear;
	transition: background 0.1s linear;
	}
	a:hover.facebook {
	background-color:#4a66b7;
	}
	a:hover.twitter {
	background-color:#00acee;
	}
	a:hover.linkedin {
	background-color:#1b86bc;
	}
	a:hover.gplus {
	background-color:#dd4b38;
	}
	a:hover.email {
	background-color:#ff9600;
	}