In the previous topic about open graph for blogger, I have discussed about the design of social interaction for your blog. After you finish designing social interaction, the next step is to create a program for the Open Graph. However, this step should be preceded by the use of Javascript SDK of Facebook. Because blogger users can only use Javascript SDK as heart of Graph API. Keep in mind, the Open Graph of Facebook is controlled by the Graph API.
What should you do when using a Javascript SDK is that you must start with FB.init function. This function serves to perform the initialization of all devices of Javascript SDK. In practice, I offer two ways to enable FB.init, the first is by using window.fbAsyncInit and Jquery. However, I prefer to use Jquery, because we can save the loading process. Consider the following code
| Dengan fbAsyncInit | Dengan Jquery |
|---|---|
| <body> <script type=”text/javascript”> window.fbAsyncInit = function() { FB.init({ appId : 'Your-App-Id', status : true, cookie : true, xfbml : true, oauth : true, }); }; // Load the SDK Asynchronously (function(d, s, id) { var js, fjs = d.getElementsByTagName(s)[0]; if (d.getElementById(id)) return; js = d.createElement(s); js.id = id; js.src = "//connect.facebook.net/en_US/all.js#xfbml=1&appId= Your-App-Id "; fjs.parentNode.insertBefore(js, fjs); }(document, 'script', 'facebook-jssdk')); </script> </body> | <head> <script src="http://code.jquery.com/jquery-latest.js"></script> </head> <body> <script type=”text/javascript”> $(document).ready(function(){ window.fbAsyncInit = function() { FB.init({ appId : 'Your-App-Id', status : true, cookie : true, xfbml : true, oauth : true, }); }; // Load the SDK Asynchronously (function(d, s, id) { var js, fjs = d.getElementsByTagName(s)[0]; if (d.getElementById(id)) return; js = d.createElement(s); js.id = id; js.src = "//connect.facebook.net/en_US/all.js#xfbml=1&appId= Your-App-Id "; fjs.parentNode.insertBefore(js, fjs); }(document, 'script', 'facebook-jssdk')); }); </script> </body> |
After you invoke FB.init, the next step is to apply FB.api to call Graph API or FQL. FQL is a kind of SQL but can only be applied to Facebook. In the next topic, I will explain how to implementing Graph API and FQL.
If you look at the code above, you will see the script Asynchronously SDK, you must implementing it to all functions up to work. Besides, you also see authentic (oauth), Facebook application implementing authentic. So, in practice, you can use the Plugin Login or create a login with your style. When you implementing login plugin, then after user login, the user will see pictures of him and those who have been logged. Speaking about authentic, then you can apply a number of permissions on your own facebook application. To be more explicit about the authenticity of the facebook permission, we suggest you read more about Facebook permissions. Consider the following code
| Dengan fbAsyncInit | Dengan Jquery |
|---|---|
| <body> <script type=”text/javascript”> window.fbAsyncInit = function() { FB.init({ appId : 'Your-App-Id', status : true, cookie : true, xfbml : true, oauth : true, }); }; // Load the SDK Asynchronously (function(d, s, id) { var js, fjs = d.getElementsByTagName(s)[0]; if (d.getElementById(id)) return; js = d.createElement(s); js.id = id; js.src = "//connect.facebook.net/en_US/all.js#xfbml=1&appId= Your-App-Id "; fjs.parentNode.insertBefore(js, fjs); }(document, 'script', 'facebook-jssdk')); </script> <div class="fb-login-button" data-show-faces="true" data-width="200" data-max-rows="1" scope="user_checkins,email,publish_actions"></div> </body> | <head> <script src="http://code.jquery.com/jquery-latest.js"></script> </head> <body> <script type=”text/javascript”> $(document).ready(function(){ window.fbAsyncInit = function() { FB.init({ appId : 'Your-App-Id', status : true, cookie : true, xfbml : true, oauth : true, }); }; // Load the SDK Asynchronously (function(d, s, id) { var js, fjs = d.getElementsByTagName(s)[0]; if (d.getElementById(id)) return; js = d.createElement(s); js.id = id; js.src = "//connect.facebook.net/en_US/all.js#xfbml=1&appId= Your-App-Id "; fjs.parentNode.insertBefore(js, fjs); }(document, 'script', 'facebook-jssdk')); }); </script> <div class="fb-login-button" data-show-faces="true" data-width="200" data-max-rows="1" scope="user_checkins,email,publish_actions"></div> </body> |
The codes above are implementing user_checkins, email, and publich_actions permissions. Other side, login plugin can work as logout button together, but if you use this way then you and your friends picture will not showed. See the example code below
| Dengan fbAsyncInit | Dengan Jquery |
|---|---|
| <body> <script type=”text/javascript”> window.fbAsyncInit = function() { FB.init({ appId : 'Your-App-Id', status : true, cookie : true, xfbml : true, oauth : true, }); }; // Load the SDK Asynchronously (function(d, s, id) { var js, fjs = d.getElementsByTagName(s)[0]; if (d.getElementById(id)) return; js = d.createElement(s); js.id = id; js.src = "//connect.facebook.net/en_US/all.js#xfbml=1&appId= Your-App-Id "; fjs.parentNode.insertBefore(js, fjs); }(document, 'script', 'facebook-jssdk')); </script> <div class="fb-login-button" data-show-faces="true" data-width="200" autologoutlink='true' data-max-rows="1" scope="user_checkins,email,publish_actions"></div> </body> | <head> <script src="http://code.jquery.com/jquery-latest.js"></script> </head> <body> <script type=”text/javascript”> $(document).ready(function(){ window.fbAsyncInit = function() { FB.init({ appId : 'Your-App-Id', status : true, cookie : true, xfbml : true, oauth : true, }); }; // Load the SDK Asynchronously (function(d, s, id) { var js, fjs = d.getElementsByTagName(s)[0]; if (d.getElementById(id)) return; js = d.createElement(s); js.id = id; js.src = "//connect.facebook.net/en_US/all.js#xfbml=1&appId= Your-App-Id "; fjs.parentNode.insertBefore(js, fjs); }(document, 'script', 'facebook-jssdk')); }); </script> <div class="fb-login-button" data-show-faces="true" data-width="200" autologoutlink='true' data-max-rows="1" scope="user_checkins,email,publish_actions"></div> </body> |
The main function of login is to get access token, with access token then you can use Graph API. Access token value very depends on kind of permission authentic.
DEMO LOGIN BUTTON WITH JQUERY
Post a Comment