Maybe you want to display on your shop or anywhere a counter of the number of fans you have on your Facebook page.
There is connected devices that allow users to do that (like Smiirl) but they are quite expensive. The idea is to do here something simpler: create a webpage that will display the number of likes/ fan on your facebook page that will then be displayed in full screen in a tablet.
Doing that was quite easy a few years ago but security policies did evolve and it is a bit more challenging now. I did find a way to do that. It is a live counter that will automatically update every 20 seconds.
What you need:
- get a website where you will host the page that we will create
- get a Facebook account that is admin for the page you want the fan count to be displayed
One of the limitation of my solution is that you can only retrieve the fan count of a Facebook page you are administrating. If you want the fan count of a page you are not an admin in, you will have to go through Facebook App review as you will require more access rights.
Step 1: Facebook app creation
The first step is to create a Facebook app here: https://developers.facebook.com/ . You have to fill some fields but it is not complicated. What is important is to keep your appID, it will be used later.
Step 2: Creation of the webpage of the counter
Brows your website via a FTP tool and create a new webpage. Copy/paste the code below. You juste have to update your appID:
<!DOCTYPE html>
<html>
<head>
<title>Facebook Fanpage counter</title>
<meta charset="UTF-8">
<style>
.carac{
padding: 8px;
background:white;
margin-left: 4px;
border: 1px solid black;
font-size: 50px;
color: #1877F2;
border-radius: 15px 15px 15px;
}body{
color: white;
}
p{
margin: 10px}
</style>
</head><body style="text-align: center; background:#AAC9FF; font-size: 20px;font-family: Arial;">
<script>
// This is called with the results from from FB.getLoginStatus().
function statusChangeCallback(response) {
console.log('statusChangeCallback');
console.log(response);
// The response object is returned with a status field that lets the
// app know the current login status of the person.
// Full docs on the response object can be found in the documentation
// for FB.getLoginStatus().
if (response.status === 'connected') {
// Logged into your app and Facebook.
displayFanCount();
} else {
// The person is not logged into your app or we are unable to tell.
document.getElementById('status').innerHTML = 'Please log ' +
'into this app.';
}
}// This function is called when someone finishes with the Login
// Button. See the onlogin handler attached to it in the sample
// code below.
function checkLoginState() {
FB.getLoginStatus(function(response) {
statusChangeCallback(response);
});
}window.fbAsyncInit = function() {
FB.init({
appId : 'YOUR_APP_ID',
cookie : true, // enable cookies to allow the server to access
// the session
xfbml : true, // parse social plugins on this page
version : 'v4.0' // The Graph API version to use for the call
});FB.getLoginStatus(function(response) {
statusChangeCallback(response);
});};
// Load the SDK asynchronously
(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 = "https://connect.facebook.net/fr_FR/sdk.js";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));// Function that is calling the graphApi from Facebook to get the fan count
function displayFanCount() {
document.getElementById('loginButton').style.display="none";
FB.api('/me?fields=id,name,accounts{fan_count}', function(response) {
console.log('Fetching fan count');
var fan_count = response.accounts.data[0].fan_count ;
var strfan_count=fan_count.toString();
var caracs = "";
for (let i = 0; i < strfan_count.length; i++) {
caracs +='<span class="carac">'+strfan_count.charAt(i) +'</span>';
}
document.getElementById('fanCount').innerHTML = caracs;
});//Relaunching the function every 20 seconds : Number of calls is limited by Facebook at 200 times per hour
setTimeout(displayFanCount,20000);
}
</script><!--
Below we include the Login Button social plugin. This button uses
the JavaScript SDK to present a graphical Login button that triggers
the FB.login() function when clicked.
-->
<div id="loginButton">
<fb:login-button scope="manage_pages,pages_show_list" onlogin="checkLoginState();">
</fb:login-button>
</div><div id="status">
</div><p style="margin-left: 40px;">Vous êtes</p>
<p style="margin:0px;padding:15px;background:#1877F2;color: white; width: 100%" >
<span id="fanCount">
</span></p>
<p style="margin-left: 40px;">à nous suivre sur Facebook, <b>merci!</b></p>
<img style="margin-left: 40px;" src="capture.jpg">
<div clear=both>
<br>
</body>
</html>
Some explanations
- Start is only some CSS to display the counter nicely
- We then have some JS code. The idea is to test if the user is loggued in our Facebook app. If it is not the case, we will display a loggin button.
- We click on the loggin button and we need to authentify with the Facebook account that got the rights on the Facebook page we are looking for.
- When the user is connected, we call the function displayFanCount()
- displayFanCount() is doing that:
- Hide the loggin button that is no longer needed
- Make a call to Facebook graphAPI to get the fan count for the specific page
- Display the result on a span element with the id "fanCount" that is displayed below
- and recall the function every 20 seconds so that the counter is always up to date.
The refresh is only every 20 seconds because Facebook is limiting the number of call to the graphAPI at 200 per hour. So with every 20 seconds we are at 180 calls per hour.
I hope it helps!