Creating a custom Facebook share is easy html but you need a little bit of javascript to create the count box. But don’t worry here is how to do it in your website
We are not going to discuss how to do the custom facebook share since we talked about it in details in a previous post click here to check it out.
To get the number of shares first you have to call the jquery library, here is how to call version 1.6.2. You don’t need to add this in your code if you are calling jquery library anywhere else in the page. <script type=”text/javascript” src=”http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js”></script>
Add the following Script and HTML code to where you want the number to appear, usually everyone has it next to the share button itself
<div id=”facebookCount”></div>
<script>
var url = “http://logicum.co/creating-custom-share-buttons-facebook-twitter-google/”;
$.getJSON(“http://graph.facebook.com/” + url, function (json)
{
$(‘#facebookCount’).html(json.shares);
});
</script>
You need to replace the URL with the URL of your web page or just replace it with “document.url” and the code itself will get the URL of the page it is located in. You end up with this code
<div id=”facebookCount”></div>
<script>
var url = “http://logicum.co/creating-custom-share-buttons-facebook-twitter-google/”; $.getJSON(“http://graph.facebook.com/” + url, function (json)
{
$(‘#facebookCount’).html(json.shares);
});
</script>
In the end don’t forget to style your box to look good