Social plugins are the extensions of Facebook and are specifically designed so no user data is shared with the sites on which they appear. Social plugins including the Like Button, Send Message, and Share content – enable developers to provide social experiences to their users with just a few lines of HTML. Like button, share button, comment plugin and send message button are the social plugins used in this application.
3.2.1- Facebook JavaScript SDK for Social Plugins
Facebook SDK for JavaScript provides a rich set of client-side functionality for adding Social Plugins, Facebook Login and Graph API calls. It doesn't have any standalone files that need to be downloaded or installed; instead we simply need to add JavaScript in HTML that will asynchronously load the SDK. Social plugins such as like button to like content or website, share button to share stories or content, etc. can be easily added in the application using the Facebook
Fig. 3.9 “Settings” and “App Details” to fill other information
26 SDK. For the same, first we load and initialize the Facebook SDK code for JavaScript after the
<body> tag in the HTML code like below:
In the above JavaScript SDK code, we added appId of our own Facebook Application. We found this appId using the App Dashboard.
3.2.2- Like Button
Like button is the quickest way for people to express that they like, enjoy or support certain piece of content. A single click on the Like button will 'like' pieces of content on the web and share them on Facebook with their friends. Figure 3.10(a) shows the like button on website. Figure 3.10(b) shows the sample login dialog to like the content. Figure 3.10(c) shows single click to like content. Figure 3.10(d) shows the number of people who liked the content.
To include like button on the application, we used few lines of HTML code:
<div class="fb-like" data href="https://140.109.221.54:63690/hom.aspx"
data-layout="standard"data-action="like"data-show-faces="true"data-share="true">
</div>
27 Layout Settings:
HTML5 Attributes:
Table 3.3 Layout Settings for “Like Button”
Table 3.4 HTML5 Attributes for “Like Button”
28 Fig. 3.10(a) “Like button” on the website
Fig. 3.10(b) Sample Facebook login
Fig. 3.10(c) Single click to like and add content
Fig. 3.10(d) Number of people who liked piece of content
1 person liked
Facebook login box to like page
Confirm like after login
2 persons liked
29 3.2.3- Share Button
Share button allow people to add message and share on Facebook, with particular friends or with a group. It provides facility to share content in a privacy settings like public, only me, custom, etc. Alternatively, they can share in a private message. Figures 3.11(a), 3.11(b), 3.11(c), 3.11(d) shows the share button on the website, timeline settings, privacy settings and the shared content on the Facebook.
To include share button on the website, we used few lines of HTML code:
<div class="fb-share-button"
data-href="http://140.109.221.54:63690/hom.aspx"
data-layout="button_count"
data-colorscheme="light">
</div>
HTML5 Attributes
Table 3.5 HTML5 attributes for “share button”
30 Fig. 3.11(a) “Share button” on the website
Fig. 3.11(b) Member setting to share content
Fig. 3.11(c) Privacy setting to share content
Fig. 3.11 (d) “Facebook - Google Chrome” security check
Content and Friends Timeline settings
Privacy setting
Facebook-Google Chrome
Security Check
31 3.2.4- Send Message Button
The Send button used to send content or message privately from our site to one or more friends in a Facebook message, to an email address, or share it with a Facebook group. When we use send message button to send message to a specific friend, the message will go to a specific friend’s inbox. It will work as a private message. On the other hand, when we send message in group, it will work as a posting story or shared content. Figure 3.12(a) shows the send button on the website. Figure 3.12(b) shows select friend from the list of Facebook friends to send message. Figure 3.12(c) shows message to send to a specific friends. Figure 3.12(d) Shows inbox message of the specific friend.
To include send message button, we have added few lines of HTML code as below:
<div class="fb-send"
data-href="https://developers.facebook.com/docs/plugins/"></div>
Fig. 3.11(d)“Facebook- Google Chrome” security check
Fig. 3.11 (e) Shared content on Facebook
Shared content
32 HTML5 Attributes
Table 3.6 HTML5 Attributes for “Send Message Button”
Fig. 3.12(a)“Send Message” button on the website
Fig. 3.12(b) "Select friend” dialog to send message
Select Recipients Dialog
33 3.2.5- Comment Plugin
Comment plugin allows people to comment on our website using their Facebook account. If we wish to we can share this activity to our friends in News Feed as well. It also contains built-in moderation tools and special social relevance ranking. Figures 3.13(a), 3.13(b), 3.13(c), 3.13(d), 3.13(e) and 3.13(f) shows the comments posted on site and how to post new comment on the site.
To include comment plugin on website, we used few lines of HTML5 code:
<div class="fb-comments"
Table 3.7 HTML5 attributes for “comment plugin”
Fig. 3.12(c) "Facebook’s inbox” of a specific friend
Recipients Facebook Inbox
34 Fig. 3.13(a) Comments posted on the website
Fig. 3.13(b) “Add a comment” box
Fig. 3.13(c) New comment in the “comment box”
Posted Comments
New comment
35 3.3 User Experiences
This section describes how to retrieve Facebook timeline posts from the Facebook developer’s account as well as friends account who installed the application.
3.3.1- Algorithm
This section describes step by step procedure to retrieve user experiences from Facebook.
Fig. 3.13(d) “Facebook login” dialog box
Fig. 3.13(e) Latest posted comment
Facebook login box to post new comment
Latest posted comment
36
37 3.3.2- JSON for User Experiences
Most data returned by Facebook APIS will be in the form of JSON strings. When we make Graph API call to retrieve all user experiences from Facebook timeline from developers and friends accounts, JSON data will be returned from the Facebook’s Graph API.
What is JSON?
JSON stands for JavaScript Object Notation. It is used to store and exchange data. It is not only easy for humans to read and write but also easy for machines to parse and generate data. JSON is an alternative to XML. JSON is an easier-to-use alternative to XML. JSON is language independent, self-describing and easy to understand. We can access JSON data in a really logical manner.
JSON Syntax Rules
1.
Data is written in name/value pairs2.
Data is separated by commas3.
Curly braces hold objects4.
Square brackets hold arrays ([])Value value objects or arrays may be as follows:
1. Number (integer or floating point) 2. String
38 In this example, the object "students" is an array containing four objects. Each object is a record of a student with the name and score.
3.3.3- Graph API
Graph API is a primary way to read and write data to and from Facebook. In this section, we are going to describe how to make Graph API calls and how to retrieve user experiences from Facebook using Graph API.
3.3.3.1- Grant permissions and Access Token
To retrieve Facebook Timeline posts from developer’s as well as friend’s accounts, we took some permission such as “user_friends”, “user_posts” and “manage_pages” from the Facebook Administrators. And then we got access token for retrieving user posts and manage pages from Facebook by requesting for the token. Figures 3.14(a), 3.14(b), 3.14(c), 3.14(d) show how to request for permissions and access token.
Fig. 3.14(a) “Graph API Explorer” tool
39 Fig.3.14 (b) Permission “user_friends, user_posts” from “User Data Permissions”
Fig. 3.14(c) Permission “manage_pages” from “Extended Permissions”
Permissions
Fig. 3.14(d) Requested access token
40 3.3.3.2- First Graph API Call
After taking user_posts, manage_pages permissions and access token, we made first Graph API request (read) for reading data from Facebook. In the Graph API Explorer, "GET" method used to read data from Facebook. To read data about user, we use 'me' endpoint. The special endpoint:
/me translate to the user ID of the person whose access token is being used to make the request.
Figure 3.15(a) shows the first Graph API call using me special endpoint.
After pressing the submit button, Facebook data about particular user pulled on page. Figure 3.15(b) shows the JSON reply from the Graph API call.
Fig. 3.15(b) JSON reply from the Graph API call Fig. 3.15(a)“First Graph API” call using “me” special endpoint
JSON data returned by Facebook Graph API
41 3.3.3.3- Second Graph API Call
We made our second Graph API call in the Graph API Explorer debug window using posts API with GET method. Figure 3.16(a) shows the second Graph API call using Post API.
GET method is used to retrieve data from Facebook insights and “/me” is a special endpoint that translates to the user ID of the person whose access token is being used to make the request.
After executing our second Graph API call using feed API with the GET method, Graph API returned JSON output in figure 3.16(b) with the details of the posts.
Fig. 3.16(a) “Second Graph API” call using “Post API”
POSTS API call
42 The above JSON data returned from the Graph API describes as follows:
The "data" is an array containing many objects.
Each object is a record of a post with the message, created time and id. We successfully made two Graph API call requests in the Graph API Explorer. Now we have to make Graph API calls from the web pages.
3.3.3.4- POSTS API Call from Web Page to Get User Experiences
To retrieve all posts from the Facebook timeline, we made Graph API call using posts API.
Graph API returns output in the form of JSON. In order to grab JSON reply on our web pages, we need to download the JSON data on our web pages using WebClient class. Figure 3.17(a) shows all user experiences from the Facebook Timeline. Figure 3.17(b) shows selected link to
Fig. 3.16(b) JSON reply from the second Graph API call
“POSTS API call”
results in the form of JSON returned by Facebook Graph API
43 see details of all user experiences from Facebook. Figure 3.17(c) shows details of the selected link of the user experience.
Fig. 3.17(a) User Experiences from Facebook timeline
44 Fig. 3.17(b) One of the selected link of the user experiences
Fig. 3.17(c) Details of the selected link
45