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&p[title]=<?php echo $title;?>&p[summary]=<?php echo $summary;?>&p[url]=<?php echo $url; ?>&&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&p[title]=<?php echo $title;?>&p[summary]=<?php echo $summary;?>&p[url]=<?php echo $url; ?>&&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.
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
can you tell me how to make these lines with numbers ?
It’s a wordpress plugin called “SyntaxHighlighter”.
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.
Anyone got this to work in a Concrete5 site? I cant get it to work
any idea for blogger?
should work in blogger as well..
blogger not supported php code,….
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!
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.
Great, glad you got it figured out!
Really good post .But How can we close window after share the link ?
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?
g00d work…thanks
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…
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.
thnx man…it works
what id the twit_count(); function for? you don’t mention it at all
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.
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
Thanks for this. How would implement this on a WordPress site?
Is it possible to also modify the Facebook “Send” button?
Thanks a lot. how about twitter and google plus? Hope you can do tutorial for these buttons too. Thanks.
Very Nice. Sir.. Is there any same fb like iframe code.. same as your share.. If yes.. Please tell me.. Thanks
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?
Not now, but we are working on some and I will keep you updated
ok, perfect, I’m subscribed already.
=)
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!
I am sure there is a way but we just don’t know.. Hopefully someone can show us all how to.
Probably takes a little Ajax to do that. But it would definitely make it look more awesome.
How do I create this for a HTML webpage?
Should work the same way, have you tried it?
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?
The image no longer shows up in the facebook post.
We think FB fixed this issue, please let us know if the image still isn’t showing up.
the image still isn’t showing up for me? When i use your link it works, when I use my own nothing shows up.
Did you use our exact code? It should work..
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!
Great tutorial, can you make this for a like button ?
Hello
Great tutorial.
but i want to open a new popup window after share , is it possible?.