-
Notifications
You must be signed in to change notification settings - Fork 3
Checkpoint 3: Add Social Plugins to Website
Facebook provides a series of predefined components for developers could add them onto their website, such as like button, share button, follow button, like box, comments..., they're already designed in Facebook-style to let users connect their action on your website to Facebook easily.
For example, if your website site lacks a comment system, you could integrate a out-of-box comment system with Facebook JavaScript SDK on your website, and take advantage of Facebook's membership and relationship as well.
A Social Plugins will have two different version, HTML5 or XFBML, Facebook recommends html5 one, so we will use it in our code lab.
At first, we should prepare some spaces for placing our like button and comments, so we could append these in your html playground:
<div class="row">
<div id="my-like-btn" class="col-md-8">
</div>
<div id="my-comments" class="col-md-4">
</div>
</div>Adding a Facebook social plugin on your website is easy, you just need to add a piece of html code to wherever you want.
For instance, a like button could be done on this, you could put it in "my-like-btn" div:
<div class="fb-like" data-href="https://www.facebook.com"></div>Because social plugins won't work in your local webpage now (it was working), so currently for testing you'll need to specify the data-href point to arbitrary domain name or just leave it blank, it will point to the current URL automatically.
And you've declare the class "fb-like", Facebook JS SDK will automatically convert it into a like button after FB.init(). If you want to customize more on it, you could follow the documentation of like button: Social Plugins - Like Button Documentation
you will see there are a bunch of settings on that documentation, and "HTML5 Attribute" is that important thing you need to follow. It's the attribute name of HTML DOM, so simply add it on your HTML element
If you dig into the documentation of Facebook like button, you will see they provide a lot of options about how to customize your like button, for instance "colorscheme", you could set this option to let your plugin to fit the website theme in dark or light.
"show_faces" option will display your Facebook friend who also pressed this like button.
Add comments snippet in "my-comments" div:
<div class="fb-comments" data-href="https://www.facebook.com"></div>and now you will have a comment system here, with Facebook membership. The documentation of Comments plugin is here: Social Plugins - Comments Documentation
You can define the ordering, colorscheme on this plugin as well.
There's two way you could decide who could have the privilege to moderate your comment plugin, direct add the Admin's Facebook ID, or provide your application ID, and the admins in this application will automatically be grant the privilege to manage your comment.
You just need to add a meta tag in head to achieve this:
<head>
<!-- Directly add admin's Facebook ID -->
<meta property="fb:admins" content="{YOUR_FACEBOOK_USER_ID}"/>
<!-- Specify the application ID, Facebook will identify the admin automatically by the rules you set -->
<meta property="fb:app_id" content="{YOUR_APPLICATION_ID}"/>
</head>Because the result won't be obvious to observe, so we don't process this part in our code lab, let's move on.