Get Facebook Followers Count In VisualForce Page as Gage Chart

Requirement: Get Facebook Followers Count In VisualForce Page and shows followers on gauge chart in vf page or html page .

Steps to be followed  : you need to follow the below steps To Get Facebook Followers Count In VisualForce Page:

1.  You need to register yourself to developers.facebook.com. and then create an app. here we need to create an app because we need  ID and App Secret .Id and app are available only when you create an app
2.  save secret keys , fb credentials to custom setting(donot worry you will get secret keys and credentials after you develop app)  so that we can use it during integration.
3.  Write facebook integartion code in apex and get values from response body.
4.  Use value or data you get from response in your vf page or  html page or in gauge chart.

1.  Steps to register yourself to Facebook.com and create an app

1.1. Login to Facebook.com and open developers.facebook.com. Click “Register”.
1.2. Click on My Apps –> Add New App –> Choose Website –> Enter the required details.
1.3. Your app will be listed under the My Apps dropdown. Choose your app. You will be able to see the App ID and App                        Secret. Don’t share these two with anyone.

2.  Save credentials and secret key to custom setting 

3.  Facebook Integration :

// here is the function having fb integration code

public void getFacebookFollowers()
{
  String url;

  // getting fb credentials from label or custom setting(here Facebook_credentials__c is the custom setting name)

  Facebook_credentials__c fbcred=Facebook_credentials__c.getOrgDefaults();

  // send an http request to get access token ( we use access token in our second request in this code later) 
 
  Http h = new Http();
  HttpRequest req = new HttpRequest();
  req.setEndpoint(fbcred.Token_End_Point_URL__c+'?   grant_type=client_credentials&client_id='+fbcred.client_id__c+'&client_secret='+fbcred.client_secret__c);
  req.setMethod('GET');
  HttpResponse res=new HttpResponse();
  if(!test.isrunningtest()){
    res = h.send(req);
  }else{
    res.setBody('{"access_token": "ya29.Glx2BBhdI3ARVe6bTfokC64zbWo_OKh-e9DWIvMb6ssZP85TC4UtC4q3hqxotuF9hzCLAbXEcTwARfp4CeiPGCaJG4siofAcrTkqJhznokeLZ2EalRUDgIZaowEsmw","expires_in": 3600,"token_type": "Bearer"}');
  }

  // parsing response body into json parser

  JSONParser parser = JSON.createParser(res.getBody());
  
  String AccessToken='';
  while (parser.nextToken() != null) {
    if ((parser.getCurrentToken() == JSONToken.FIELD_NAME) && (parser.getText() == 'access_token')) {
      parser.nextToken();
      
    // get access token 

      AccessToken=parser.getText();
    }
  }
  
  // now sending another request to get fb followers count

  Http hPage = new Http();
  HttpRequest reqPage = new HttpRequest();

  // we send fan_count parameter when we need facefollowers and we also passess access token in http request 

  reqPage.setEndpoint(fbcred.FaceBook_End_Point_URL__c+'/'+fbcred.FB_Page_ID__c+'?fields=fan_count&access_token='+AccessToken);
  reqPage.setMethod('GET');
  HttpResponse resPage=new HttpResponse();
  if(!test.isrunningtest()){
    resPage = hPage.send(reqPage);
  }else{
    resPage.setBody('{"test": {"fan_count": 2}}');
  }
  system.debug('----------------'+resPage.getBody());
  parser = JSON.createParser(resPage.getBody());
  
  Integer fan_count=0;
  while (parser.nextToken() != null) 
  {
    if ((parser.getCurrentToken() == JSONToken.FIELD_NAME) && (parser.getText() == 'fan_count')) {
      parser.nextToken();
      fan_count=parser.getIntegerValue();
    }
  }

  // save fan_count variable value to custom setting so that we can use it in our page (It is not mandatory to store value in custom setting you can directly use it in your page )

  facebookdata__c fData = facebookdata__c.getInstance('Facebook_Followers');
  fData.Count__c = fan_count;
  insert fdata;

}

4. Use Data in visualforce page  via Gauge chart

Now we have facebook count in our custom setting  here what we need to include gauge chart in our visualforce page  and pass facebook count to gauge chart.

Below are the steps you need to follow :

1.  Include JustGage and Raphael scripts in your page.

<script src="raphael.2.1.0.min.js"></script>
<script src="justgage.1.0.1.min.js"></script>

2.  Create a div with id, width & height

<div id="gauge" class="200x160px"></div>

3.Call  just Gage using script

<script>
  var g = new JustGage({
    id: "gauge",
    value: 67,
    min: 0,
    max: 100,
    title: "Visitors"
  });
</script>

Hits: 1377