Description
In this exercise, you are asked to create a webpage that allows you to search for information
about a set of Facebook entities (i.e., users, pages, events, places, and groups) using the
Facebook Graph API, and the results will be displayed in a tabular format.
Please note that to use the Facebook Graph API, you need to have an App Secret, App ID and
Access token as explained in detail in Sections 3.1 and 3.2.
2.1. Description of the Search Form
A user first opens a web page, called Search.php (or any valid web page name), where he/she
can enter a keyword and choose an entity type (i.e., users, pages, events, places and groups) from
a drop-down list. The default value for the “Type” drop-down list is Users. An example of the
web page is shown in Fig. 1. If the user chooses the “Places” option from the “Type” drop-down
list, the page shows an additional two text fields (Location and Distance). An example of the web
page when searching for Places is shown in Fig. 2. Showing/hiding the location and distance
2
The search form has two buttons:
● The Search button: If the user clicks on the Search button without providing a value for
all the form fields, you should show an HTML5 error message. The error message should
indicate which fields are missing. An example of an error message is shown in Fig. 3.
Figure 3: An Error Message when there is no input
Once the user provides all required selections and data and clicks on the Search button,
your page should send a request to your Apache web server for Search.php with the
form data. You can use either GET or POST to transfer the form data to the web server.
A PHP script will retrieve the data and use it to query the Facebook Graph API Service.
● The Clear button: This button must clear the result area and reset the form fields to their
initial state (i.e., empty keyword and the type option should be Users and the location and
distance text fields should be empty and hidden). The Clear operation should be
implemented using a JavaScript function.
2.2. Displaying Search Results
In this section, we outline how to use the form data to construct HTTP requests to the Facebook
Graph API service and display the result in the web page.
The PHP script (i.e., Search.php) uses the input information (e.g., Keyword and Type) to
construct a restful web service URL to retrieve all entities matching the user query. The
Facebook Graph API expects four parameters:
q: the search keyword provided by the user in the keyword text field.
type: the entity type which is being searched. This value depends on the Type option
selected by user.
o If the type option is Users, the value of the type parameter is user.
o If the type option is Pages, the value of the type parameter is page.
o If the type option is Events, the value of the type parameter is event.
o If the type option is Groups, the value of the type parameter is group.
o If the type option is Places, the value of the type parameter is place.
fields: The fields to be retrieved for the entities being searched. The fields are comma
separated. For example, to retrieve id, name, and picture for the entities which are being
3
searched, we can set the parameter value as fields=id,name,picture. In this homework, we
are only interested in the following fields:
o id
o name
o picture
o albums
o posts
center: This parameter is used only when type=place. It is used to narrow the search to a
specific location. The value is a geo-location specified by latitude and longitude values
separated by comma (e.g., center=34.028418,-118.283953).
distance: This parameter is used only when type=place. It is used to narrow the search to
a specific location within radius (i.e., spatial circle query). The value is a number which
represents the distance in meters.
access_token: This is the token which you will get during the registration step (explained
in Section 3.2).
An example of the HTTP call to the Facebook Graph API when the Type is user is shown
below.
https://graph.facebook.com/v2.8/search?q=The_Keyword_to_be_searched&type=user&fields=
id,name,picture.width(700).height(700)&access_token=Your_Access_Token
An example of the HTTP call to the Facebook Graph API when the type is event is shown below.
https://graph.facebook.com/v2.8/search?q=The_Keyword_to_be_searched&type=event&fields=
id,name,picture.width(700).height(700)&access_token=Your_Access_Token
If the chosen Type is places, the PHP script should first translate the location address provided
by the user (e.g., 941 Bloom Walk, Los Angeles, CA 90089-0781) into the corresponding geolocation
(i.e., latitude and longitude) before calling the Facebook Graph API. The PHP script
should construct a web service URL to query the Google Geocoding API appropriately:
https://maps.googleapis.com/maps/api/geocode/json?address=941+Bloom+Walk,Los+Angeles,+C
A+90089-0781&key=YOUR_API_KEY
How to create a Google API key is explained in section 3.4. The response of this URL is a
JSON-formatted object. Two key pieces of data returned are the latitude and longitude values for
the given address. Figure 4 shows an example of the JSON object returned in the Google
Geocoding API web service response. After extracting latitude and longitude, you can use them
to construct another URL to call the Facebook Graph API to query place objects as shown
below.
https://graph.facebook.com/v2.8/search?q=The_Keyword_to_be_searched&type=place¢er=
34.028418,-118.283953&distance=1000&fields=
id,name,picture.width(700).height(700)&access_token=Your_Access_Token
The API returns the list of objects matching a given input in JSON format. The returned output
includes a set of fields for each object (e.g., name, id, and picture). Fig. 5 shows a sample
response from API.
4
Figure 4: A Sample Result of Google Geocoding Query
Figure 5: A Sample Response of the search query from the Facebook Graph API
5
The PHP script (i.e., Search.php) should parse the returned JSON-formatted object and extract
the necessary fields. After extracting the data, the PHP script should display the data in a tabular
format below the search form. A sample output is shown in Fig. 6. The profile photo and Name
should be displayed in the result table. Also for all the types except for events, a “Details”
column should be listed in this table. If the API service returns an empty result set, the page
should display “No Records have been found” instead of the result table, below the Search form.
This case is shown in Fig. 7.
6
Figure 6: An Example of Search Result (keyword: usc, type: Users)
Figure 7: Example of Empty result set
When the search result contains at least one record, you need to map the data extracted from the
API result to render the HTML result table as described in Table 1.
Table 1: Mapping the result from Graph API into HTML Table
HTML Table Column API service response
Profile Photo The value of the “url” attribute which is part of
the “data” object which belongs to the “picture”
object. Each profile photo is about 30×40 in size
(px)
Name The value of the “name” attribute
Details Hyperlink that uses the “id” attribute of the user
(see section 2.3)
When the profile picture is clicked, the picture is to be shown in a new window with the original
size (a high resolution image has to be shown).
Note: There is no major change when calling the API for Places or Groups. The only
change is to provide a different value for the Type parameter while the JSON response is
the same for all types
For the type “events”, you need to show the picture, Name of the event and place of the event.
The mappings for the events type is as follows
HTML Table Column API service response
Profile Photo The value of the “url” attribute which is part of
the “data” object which belongs to the “picture”
object. Each profile photo is about 30×40 in size
(px)
Name The value of the “name” attribute
7
Place The value of “name” attribute which is present in
“place” attribute.
The call for the type events is as follows.
https://graph.facebook.com/v2.8/search?q=The_Keyword_to_be_searched&type=event&fields=
id,name,picture.width(700).height(700),place&access_token=Your_Access_Token
A sample response for the above call is as follows:
Note: There is no “Details” field for events.
2.3. Displaying Details Information
In the search result table, the Details column contains a “Details” link. When clicking on the
“Details” link of a certain record, the PHP script (i.e., Search.php) should use the
corresponding “id” value to make another HTTP request to the restful web service URL to
query detailed information about the selected record. In order to retrieve the top 5 albums and
top 5 posts, you can use the following format for the query.
https://graph.facebook.com/v2.8/id?
fields=id,name,picture.width(700).height(700),albums.limit(5){name,photos.limit(2){nam
e, picture}},posts.limit(5)&access_token=Your_Access_Token
The above query also requests two photos in each album. In the above API call replace the ‘id’
with the id of the object, as shown in the following example.
8
https://graph.facebook.com/v2.8/124984464200434?
fields=id,name,picture.width(700).height(700),albums.limit(5){name,photos.limit(2){nam
e, picture}},posts.limit(5)&access_token=Your_Access_Token
Fig. 8 shows a sample response from the ‘id’ API.
9
Figure 8: A Sample Response of the search for pages
The PHP script should map the data retrieved from the API service response to render the object
details using the mapping described in Table 2.
Table 2: Mapping the result from Graph API into HTML Table
Table Column API Service Response
Albums
You should display at most 5 albums present in
data attribute which is present in albums attribute.
Each Album should display two pictures.
Each picture must be of size 80×80 (px)
Posts You should display at most 5 posts present in data
attribute which is present in posts attribute.
The details information include two sub-sections: Albums and Posts which are by default hidden
(as shown in Fig. 9). The details information should over-write the result table and needs to be
displayed under the search form. When the user clicks on the “Albums” hyperlink, the “Albums”
sub-section should be expanded and the “Posts” sub-section should be hidden (if it is open) and
vice versa.
Figure 9: Both the Albums and Posts are hidden
The “Albums” sub-section should display a maximum of 5 albums which are hidden by default
(as show in Fig. 11). When clicking on the header of each album, the album displays only two
photos (as shown in Fig. 11). When there are no images under an album, the album should not be
clickable (it should be just a plain text). If the header of the album is clicked while the album
photos are shown the album photos should be hidden. When a photo is clicked, it should be
opened in a new window with the original high resolution image. To obtain original high
resolution images, the following API can be used.
https://graph.facebook.com/v2.8/id/picture?access_token=Your_Access_Token
Here ‘id’ is the picture id obtained in Fig 8. This ‘id’ will be seen in Albums-data-photos-
data. It will give the original size
An example is:
https://graph.facebook.com/v2.8/1084855054970797/picture?access_token=Your_Access_Token
10
Fig. 10 shows a sample response from API.
{
“data”: {
“is_silhouette”: false,
“url”:”https://scontent.xx.fbcdn.net/v/t1.0-
9/p720x720/16682033_1084855054970797_8061484663955976808_n.jpg?oh=4a13bc07cb22e3d6461b
3be33603be00&oe=59063C4E”
}
}
Figure 10: A Sample Response of the original High Resolution Image
The ‘url’ value is the actual URL of the high-resolution image.
The “Posts” sub-section should display a maximum of 5 posts (as shown in Fig. 12). Please note
that expanding or hiding sub areas should be implemented using JavaScript and you are not
allowed to use JQuery.
Figure 11: The albums are displayed only when they are clicked. Posts are hidden.
Figure 12: When posts are clicked, Albums are hidden.
11
If the API service returns an empty result set, the page should display “No Albums have been
found” instead of albums section and “No Posts have been found” instead of posts section. A
sample output is shown in Fig. 13.
Figure 13: Search Result When clicking the View Details link of the first result
In summary, the search mechanism to be implemented behaves as follows:
● Based on the input data in the search form, construct a web service URL to retrieve the
output from the API service.
● Parse the returned JSON and extract the values.
● Display the user’s albums and posts in tabular format.
2.7. Saving Previous Inputs
In addition to displaying the results, the PHP page should maintain the provided values to display
the current result. For example, if a user searches for “Keyword: USC, Type: Events”, the user
should see what was provided in the search form when displaying the results.
When clicking on the “Search” button, the page should display the result retrieved from the
Facebook Graph API and retain the values provided in the search form. In addition, when
clicking on the “Details” link, the page should display the result retrieved from the web service
and keep the value provided in the search form. It follows that you need to keep the whole search
box/input fields and buttons even while displaying results/errors.
3. Hints
3.1. HOW TO GET THE FACEBOOK APP ID AND APP SECRET
To use any of the Facebook Graph APIs you should first register as a “Facebook developer” at
https://developer.facebook.com/. After registration, you will be able to create your own
Facebook Application ID.
12
Fig 3.1: Registering as a Developer Fig 3.2: App ID and App Secret
Fill out the form with a name of your homework, your email and category as education. To get
your App ID and App Secret click on the dashboard at the left side menu. The App Secret is used
to create a User Access Token which can make API requests on behalf of any user of the app.
3.2. HOW TO CREATE A NEW APPLICATION
To create a new application, click on settings, then choose new platform.
Fig 3: Creating a new platform Fig 4: Creating the Application.
Select website as your new platform as you are building a website that uses Facebook Graph
APIs. Enter the URL of your website and click Save to complete the process. You need the
OAuth Login to be set to ‘yes’ in your application. You can do this by changing OAuth settings
in the Products section. You need to set the correct OAuth redirection URIs.
You can get an Access Token from the Graph Explorer by clicking the “Get Token” button. By
default, Facebook generates only short lived access token. You can get a long-lived token by
visiting https://www.slickremix.com/facebook-60-day-user-access-token-generator/. You need to
fill in details such as your App ID, App Secret and Access Token. You can visit the website for
more hints and steps to create the Application (Step 6 is not necessary for the current
assignment). This website generates the long-lived token that can be used for a period of 60 days.
13
3.3. INSTALL FACEBOOK SDK FOR PHP
It is required that you install Facebook SDK for this PHP application. Refer
https://developers.facebook.com/docs/php/gettingstarted.
Go with the manual method.
1. Download php-graph-sdk-5.0.0.zip
2. Extract it
3. Upload it under the directory which hosts your PHP file
4. In your code file include the line
require_once __DIR__ . ‘/php-graph-sdk-5.0.0/src/Facebook/autoload.php’;
3.4. CONSTRUCTING THE URL FOR FACEBOOK GRAPH API CALLS
The Facebook SDK for PHP is a library with powerful features that enable PHP developers to
easily integrate Facebook login and make requests to the Graph API. See:
https://developers.facebook.com/docs/php/gettingstarted
Once you obtain the app access token, you can use the APIs and get the results. To know more
about the fields and parameters for the APIs, please visit:
https://developers.facebook.com/docs/graph-api/using-graph-api/
For reference, you can visit the Graph API Explorer at:
https://developers.facebook.com/tools/explorer
In the explorer, you can directly get code by clicking “generate code’ and use that in order to
make API calls.
3.5 How to get Google API Key
To get a Google API key, please follow these steps:
Go to the Google Developers Console
(https://console.developers.google.com/flows/enableapi?apiid=geocoding_backend&key
Type=SERVER_SIDE&reusekey=true).
Create or select a project.
Click Continue to Enable the API.
Go to Credentials to get a Server key (and set the API Credentials).
3.6. PARSING JSON-FORMATTED DATA IN PHP
In PHP 5, you can parse JSON-formatted data using the “json_decode” function. For more
information, please go to https://php.net/manual/en/function.json-decode.php.
14
To read the contents of a JSON-formatted object, you can use the “file_get_contents” function.
4. Files to Submit
In your course homework page, you should update the HW6 link to refer to your new initial web
page for this exercise. Also, submit your file (A single .php file named search.php) electronically
to the csci571 account so that they can be graded and compared to all other students’ code via the
MOSS code comparison tool.
**IMPORTANT**:
All discussions and explanations in Piazza related to this homework are part of the
homework description and grading guidelines. So please review all Piazza threads, before
finishing the assignment. If there is a conflict between Piazza and this description and/or
the grading guidelines, Piazza always rules.
You should not use JQuery for Homework 6.
You should not call Facebook APIs directly from JavaScript, bypassing the Apache
proxy. Doing this will result in an 8-point penalty.
The link to the video is : https://youtu.be/tWu2b3324Bk
