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

Although the Facebook Graph API can be used to retrieve a trove of wide-ranging data, I specifically showed you step-by-step 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 client-side scripting of HTML.

Knowing the average person is often not familiar with PHP scripting and programming, and how to setup 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 in your file as a starting point:

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 it possible to download and include 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:

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 a 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.

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 right 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:

The above code will execute once the page successfully loads. There are a 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 to it the apiUrl variable that has the url variable appended to it to create the Facebook Graph API url in its entirety.

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 does 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 you code looks like the following in its entirety:

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 answer me any questions should you encounter issues. That’s all for now!

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.