Domain Names Domain Tools How-To Guide Optimization Optimization Tools Ranking Search Engine Marketing Social Media

Working with Facebook’s Graph API Using Javascript and jQuery.

November 10, 2017 by Alvin Brown 6 Comments
Written by: Alvin Brown

A week or so ago, I introduced you to the Facebook Graph API using PHP.

Although the Facebook Graph API can retrieve a trove of wide-ranging data, I specifically showed you how to retrieve the total count for a unique URL’s likes, shares, and comments.

Today, I’m going to show you the same, but this time using JavaScript and jQuery, a cross-platform JavaScript library designed to simplify the client-side scripting of HTML.

Knowing the average person is often not familiar with PHP scripting and programming, and how to set up WordPress on a Windows or Linux web server, I chose to focus today’s tutorial on a simple and easy-to-use programming language: JavaScript (also referred to as Javascript).

In my opinion, Javascript is a fairly easy programming language to grasp for the non-programmer person needing to operate a website.

In fact, programming using Javascript can be done without the use of a web server. That’s right. You can program Javascript in a simple HTML file using a text editor (i.e., Sublime, Dreamweaver, Notepad++, Eclipse, or good ole’ Notepad).

Once you complete your Javascript programming, then simply view the file using a web browser (i.e., Chrome, Firefox, Safari, Internet Explorer, or Safari).

This tutorial won’t cover all the details as I did with the previous tutorial, Facebook Graph API, using PHP. Please refer to it for greater detail surrounding Facebook for Developers and Graph Documentation.

Create HTML5 Document and Include jQuery.

To get started retrieving the total count for a unique URL’s likes, shares, and comments using Javascript and Facebook Graph API, you’ll need to create a simple HTML5 file.

Using a text editor of your choice, create, name, and save the following file to your desktop or a place you’ll remember: fbg-url-js.html.

Copy and paste the following HTML5 code into your file as a starting point:

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>URL Facebook Likes - Javascript and Graph API</title>
</head>
<body>
</body>
</html>

Next, it’s time to include jQuery. It is possible to retrieve the total count for a unique URL’s likes, shares, and comments using nothing but Javascript. It’s possible but not recommended.

jQuery actually allows you to use less code in a more scalable manner than Javascript alone.

It’s best to use a content delivery network (CDN) to include jQuery, although it is possible to download and include the jQuery library on your local machine.

If you don’t have access to the internet when programming or executing jQuery, then you’ll want to download and include a local version (preferably minified version).

To include jQuery within your newly created file, include the following comment and code just after the closing of the title tag and before the closing head tag:

<!-- Include Required Prerequisites -->
<script type="text/javascript" src="//code.jquery.com/jquery-1.12.4.js"></script>

Making Facebook Graph API Call using jQuery’s Ajax.

Now it’s time for a bit of Javascript and jQuery magic programming.

Between the open (i.e., <body>) and close (i.e., </body>) tags, you’ll need to create an HTML element to display the total number of likes. This HTML element, the div, must have a unique id assigned to it.

For the purpose of this tutorial and to know your code successfully executes, I’ve added the word “test” within the div element with the id value of fb-like-div.

// div to display number of url likes

<div id="fb-like-div">test</div>

If you were to save and execute your html file in a web browser, then it should display the word “test” (as shown below).

In short, we’ll now write a few lines of jQuery code that will overwrite the “test” text in the div with the total number of URL likes.

Immediately following the div element, copy and paste the following code:

<script type="text/javascript">

$(function(){

	var url = 'http://www.texashillcountry.com';
	var apiUrl = 'https://graph.facebook.com/?ids='+url;

 	$.ajax({url: apiUrl, success: function(result){

        $.each( result, function( key, val ) {

        	console.log(key + ' - ' + val['share']['share_count']);

        	var shareCount = val['share']['share_count'];
        	
        	$("#fb-like-div").html(shareCount);

  		});

    }});

});

</script>

The above code will execute once the page successfully loads. There are new things to note about the script above.

First, be sure you change the url variable to the appropriate URL of your choice. This example uses “http://www.texashillcountry.com” as the value for the URL variable.

To make the API call, I’m using jQuery’s $.ajax method, passing the apiUrl variable with the URL variable appended to it to create the entire Facebook Graph API URL.

As mentioned in the previous tutorial, you can view the Facebook Graph API URL with your desired URL appended to it in a web browser without being logged into Facebook (shown below).

Within the $.ajax method, we’ll access the Facebook Graph API call and response data using the success function.

Within the success function, I’m using the $.each method to access the response data, which is represented by the result variable.

Within the $.each method’s function, note that I’m using the console.log method to display the key and val values in the browser.

Finally, define and set the shareCount variable, and then inject the div with the shareCount variable appending the .html method to the jQuery selector for the div. And that’s it for this tutorial! 🙂

Ready to test your Javascript and jQuery prowess?

Believe it or not, you’re ready to now save and execute your HTML file via a web browser. But before you do, be sure your code looks like the following in its entirety:

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>URL Facebook Likes - Javascript and Graph API</title>

<!-- Include Required Prerequisites -->
<script type="text/javascript" src="//code.jquery.com/jquery-1.12.4.js"></script>

</head>

<body>

<div id="fb-like-div">test</div>

<script type="text/javascript">

$(function(){

	var url = 'http://www.texashillcountry.com';
	var apiUrl = 'https://graph.facebook.com/?ids='+url;

 	$.ajax({url: apiUrl, success: function(result){

        $.each( result, function( key, val ) {

        	console.log(key + ' - ' + val['share']['share_count']);

        	var shareCount = val['share']['share_count'];
        	
        	$("#fb-like-div").html(shareCount);

  		});

    }});

});

</script>

</body>
</html>

Once executed, your web browser should display the following:

Don’t forget you’ll need to be sure to use the local jQuery version when you’re not connected to the internet. Otherwise, using the jQuery CDN should do the trick.

Please don’t hesitate to ask any questions should you encounter any issues. That’s all for now!

Share:
Written by Alvin Brown
He's an experienced and passionate serial entrepreneur, founder and publisher of Kickstart Commerce. Alvin possesses a great love for startups dominating their market using profitable digital strategies for greater commerce.