« PREV: Raffaello, Sanctu...
SanDisk Custom... :NEXT »

How to Create a Custom Facebook Share Button with a Custom Counter

How to Create a Custom Facebook Share Button with a Custom Counter

To add on to How to Create a Custom Facebook Share Button for your iFrame Tab, we at Daddy Design have figured out how to add a fully customizable counter to go along with it! Let’s get started:

The Code

Step 1: PHP

<?php
function fb_count() {
global $fbcount;
$facebook = file_get_contents('http://api.facebook.com/restserver.php?method=links.getStats&urls=http://www.daddydesign.com/wordpress/how-to-create-a-custom-facebook-share-button-with-a-custom-counter/');
$fbbegin = '<share_count>'; $fbend = '</share_count>';
$fbpage = $facebook;
$fbparts = explode($fbbegin,$fbpage);
$fbpage = $fbparts[1];
$fbparts = explode($fbend,$fbpage);
$fbcount = $fbparts[0];
if($fbcount == '') { $fbcount = '0'; }
}		
?>

First, you will want to grab this code and save it as its own PHP file on your server. Name this file social.php. After saving this file, change the URL in $facebook = file_get_contents(‘http://api.facebook.com/restserver.php?method=links.getStats&urls=http://www.daddydesign.com/wordpress/how-to-create-a-custom-facebook-share-button-with-a-custom-counter/‘); to the URL you wish to ‘Share’.

<?php
require("social.php");
fb_count();
?>

After you have your social.php file set up, you will then want to migrate to the web page in which your custom Facebook share button with a custom counter will be placed. With the code above, place it under the <html> tag of your page. Make sure that require{“social.php”) is linked appropriately.

<?php
$title=urlencode("How to Create a Custom Facebook Share Button with a Custom Counter");
$url=urlencode("http://www.daddydesign.com/wordpress/how-to-create-a-custom-facebook-share-button-with-a-custom-counter/");
$summary=urlencode("Learn how to create a custom Facebook 'Share' button, complete with a custom counter, for your website!");
$image=urlencode("http://www.daddydesign.com/ClientsTemp/Tutorials/custom-iframe-share-button/images/thumbnail.jpg");
?>

Remember this? If not, you can read about it here. This is the backend to your custom Facebook ‘Share’ button. Plug in the necessary information to display in the Facebook ‘Share’ window.

Step 2: XHTML

<a onClick="window.open('http://www.facebook.com/sharer.php?s=100&amp;p[title]=<?php echo $title;?>&amp;p[summary]=<?php echo $summary;?>&amp;p[url]=<?php echo $url; ?>&amp;&p[images][0]=<?php echo $image;?>', 'sharer', 'toolbar=0,status=0,width=548,height=325');" href="javascript: void(0)"> 
Insert text or an image here. 
</a>

This is the all-important link that will lead to the pop up Facebook ‘Share’ window. Once again, if you are unfamiliar with its function, please check the original tutorial.

<div id="fbcount">
<?php	echo $fbcount; ?>
</div>

Last but not least, this is the code for the Facebook ‘Share’ counter to show. The $fbcount will be fed from the social.php file, so be sure to have the above code. And with the code being inside the #fbcount div, you have unlimited options on how to make your Facebook ‘Share’ counter look awesome with CSS.

Completed Code

<!DOCTYPE html>
<html lang="en-us">
<?php
require("social.php");
fb_count();
twit_count();
?>
<head>
<meta charset="utf-8">
<title>Daddy Design - Custom Facebook Share Button With Custom Counter - Demo</title>
<link href="style.css" rel="stylesheet" type="text/css" media="screen" />
<base target='_blank' />
</head>
<body>
<div id="container">
<?php
$title=urlencode("How to Create a Custom Facebook Share Button with a Custom Counter");
$url=urlencode("http://www.daddydesign.com/wordpress/how-to-create-a-custom-facebook-share-button-with-a-custom-counter/");
$summary=urlencode("Learn how to create a custom Facebook 'Share' button, complete with a custom counter, for your website!");
$image=urlencode("http://www.daddydesign.com/ClientsTemp/Tutorials/custom-iframe-share-button/images/thumbnail.jpg");
?>
<a onclick="window.open('http://www.facebook.com/sharer.php?s=100&amp;p[title]=<?php echo $title;?>&amp;p[summary]=<?php echo $summary;?>&amp;p[url]=<?php echo $url; ?>&amp;&p[images][0]=<?php echo $image;?>', 'sharer', 'toolbar=0,status=0,width=620,height=280');" href="javascript: void(0)"> 
Insert text or an image here. 
</a>
<div id="fbcount">
<?php	echo $fbcount; ?>
</div>
</div>
</body>
</html>

Live Demos

Example 1

Example 2

Example 3

Do you like our examples? Download all of the codes here.

Please Note

Your web page must be a PHP file in order for this to work.

Be sure to read our article on how to create a custom Facebook share button before starting this tutorial to have full knowledge on how to create and customize your very own Facebook ‘Share’ button.

The counter will only read the full number of Facebook ‘Shares’. The number will not be shortened to (for example:) “10K”. Be sure to keep this in mind while designing your own custom Facebook ‘Share’ button with a custom counter. We are working on a way to shorten larger numbers.

In order to see the Facebook ‘share’ you have just posted on the counter, the page must be refreshed after submitting. We are working on a code that will automatically refresh the page after submitting your Facebook ‘share’.

Troubleshooting

If you are having problems getting this tutorial to work please reread the tutorial and try again. If you still cannot get it to work please leave us a comment below and we will respond as soon as possible. Please do not email us with problems regarding this tutorial. Only comments will be responded to.

Posted In

Tutorials

46 Comments

  1. jasmijn December 20, 2011

    Hi there,

    I used the code in a facebook fanpage to share a great campaign to win something. But now we like to see who shared it so we can give away our prices. I know that facebook doesn’t show everything because of privacy issues but hope that there still is a way to see it.

    Thanks in advance!

    Jasmijn

    Reply
  2. John January 2, 2012

    can you tell me how to make these lines with numbers ?

    Reply
    • daddydesign January 4, 2012

      It’s a wordpress plugin called “SyntaxHighlighter”.

      Reply
  3. site stats January 4, 2012

    I created my own facebook share button but I havn’t think about counting how many people actually click the button.. Thank you so much for the share! greate article. ;)

    Reply
  4. Michael January 19, 2012

    Anyone got this to work in a Concrete5 site? I cant get it to work :(

    Reply
  5. Ahmad Najiullah February 24, 2012

    any idea for blogger?

    Reply
    • admin February 27, 2012

      should work in blogger as well..

      Reply
      • ahmad najiullah September 21, 2012

        blogger not supported php code,….

        :(

        Reply
  6. Neil April 6, 2012

    Hello! Great tutorial, thanks!
    It all seems to work, except the popout “share” window displays the php commands (e.g. displays title as “” and summary as “”) instead of the information defined earlier. Any thoughts on why this would not be echoing properly?
    Thanks again!

    Reply
    • Neil April 6, 2012

      Solved my problem.. should have read through the tutorial more carefully. I didn’t realize the whole html should be saved as a .php file. Thanks! Works great.

      Reply
  7. Shailesh May 8, 2012

    Really good post .But How can we close window after share the link ?

    Reply
  8. Rasmus Olesen June 1, 2012

    I am having trouble getting an image on my share box. I specify it, but nothing happens.
    Do i need to specify it in open graph instead?

    Reply
  9. mauro June 12, 2012

    g00d work…thanks

    Reply
  10. Sachin Khanna July 20, 2012

    I m using this code….it’s working fine…
    but only problem is count is not stared from 0, it is started from 345….
    how can i make it to start from 0…
    Plz help me…..
    n Thanks for lovely article…

    Reply
    • daddydesign July 23, 2012

      1. You need to make sure to change the URL to your own page URL and not the one inserted form the tutorial.
      2. If your button shows 345, it’s because your URL has been liked or shared in Facebook 345 times before adding this button and you can not change that.

      Reply
      • Sachin Khanna July 23, 2012

        thnx man…it works

        Reply
  11. Delroy Brown September 15, 2012

    what id the twit_count(); function for? you don’t mention it at all

    Reply
    • daddydesign September 17, 2012

      It’s nothing important, that was for another code for twitter count button. We never created the tutorial for it. Sorry about that, we will take it out this week.

      Reply
  12. paul September 28, 2012

    I was curious, I have the HTML code for the like button but it has the Sign in long verbage after the LIKE button. What I would really like to see is how do you do the LIKE button with the counter going next to it? This is the basic HTML code that i have with the long verbage:

    My Great Web page

    Reply
  13. Shaimoom Newaz October 16, 2012

    Thanks for this. How would implement this on a WordPress site?

    Reply
  14. Alex October 29, 2012

    Is it possible to also modify the Facebook “Send” button?

    Reply
  15. Rozani November 3, 2012

    Thanks a lot. how about twitter and google plus? Hope you can do tutorial for these buttons too. Thanks.

    Reply
  16. Ravinder November 9, 2012

    Very Nice. Sir.. Is there any same fb like iframe code.. same as your share.. If yes.. Please tell me.. Thanks

    Reply
  17. Carlos Aguilar January 4, 2013

    The build in sharing buttons from the Jetpack WordPress Plugin are pretty sweet, I’ve been looking for some that I can personalize even further, do you also have some custom codes for the other social networks?

    Reply
    • daddydesign January 22, 2013

      Not now, but we are working on some and I will keep you updated

      Reply
      • Carlos Aguilar January 22, 2013

        ok, perfect, I’m subscribed already.

        =)

        Reply
  18. andrew January 8, 2013

    Hi,

    Very cool tutorial. I really appreciate it. I was just wondering, though, if it’s possible to dynamically update the counter after each share, rather than on each page load.

    Thanks again!

    Reply
    • daddydesign January 22, 2013

      I am sure there is a way but we just don’t know.. Hopefully someone can show us all how to.

      Reply
      • James M. March 16, 2013

        Probably takes a little Ajax to do that. But it would definitely make it look more awesome.

        Reply
  19. MPO February 13, 2013

    How do I create this for a HTML webpage?

    Reply
    • daddydesign February 19, 2013

      Should work the same way, have you tried it?

      Reply
  20. Tom February 19, 2013

    Great and easy tutorial, thank you!
    Is there any way to get the popup window to be displayed in the middle of the screen instead of upper-left corner?

    Reply
  21. Adrian March 7, 2013

    The image no longer shows up in the facebook post.

    Reply
    • daddydesign May 1, 2013

      We think FB fixed this issue, please let us know if the image still isn’t showing up.

      Reply
      • Ski May 15, 2013

        the image still isn’t showing up for me? When i use your link it works, when I use my own nothing shows up.

        Reply
        • daddydesign May 16, 2013

          Did you use our exact code? It should work..

        • Steve May 24, 2013

          Its funny. I have the same problem. I put your p[images][0] file on my server with the name thumbnail3.jpg and tested it. It works. Then i created my own file with the same dimension & dpi and it doesnt works. And now comes the best: I took your pictures and saved it again with my Photoshop CS5 under thumbnail4.jpg (same server, same image, same dimension, same dpi, only file open and save) and baaam -> the image doesn’t work anymore.

          I have no idea what the heck the problem is. Does it anything have to do with the file itself. And a couple of months it works fine and now is your image the only one which works.

          Maybe other question: What for an image program do you use? I would be really glad for your help.

  22. Nathan March 13, 2013

    This is awesome, I hope I manage to do it with my very small knowledge of coding, will this:
    A: work in Joomla
    B: will I be able to see all the people who have shared this link? I want to be able to encourage people to share a post on my facebook page (it’s a competition) obviously I want to pick a winner at random so I will need to be able to see the people who have shared it!

    Reply
  23. Mike March 19, 2013

    Great tutorial, can you make this for a like button ?

    Reply
  24. Pradeep Maurya March 21, 2013

    Hello

    Great tutorial.

    but i want to open a new popup window after share , is it possible?.

    Reply
  25. George July 14, 2013

    Great! I was looking for something like this from weeks. But how do you implement this for WordPress?

    Reply
  26. xsavitch September 5, 2013

    good job, thank you so much :)

    Reply
  27. Divyesh February 4, 2014

    where to find social.php file in counter code.

    Reply
    • daddydesign February 5, 2014

      Did you download the zip?

      Reply
      • Divyesh February 6, 2014

        ok but while sharing to fb in popup box there is image but originally in fb image not see,
        what u say I have to use open graph in head or any solution. thnx.

        Reply

Leave a Reply

Your email is never published nor shared.
Required fields are marked *

You may use these HTML tags and attributes:<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Notify me of followup comments via e-mail. Or subscribe without commenting.