Get Latest Update Basic Setting Bootstrap on Blogger

Learn More

Contributors

  2. Blogger and Widget
  3. How To Publish An Action Of Facebook Open Graph
Saturday, August 25, 2012

How To Publish An Action Of Facebook Open Graph

facebook
Publish an action of Open Graph Facebook is not difficult. You just change the method of parameters of FB.api with 'POST'. Consider the following code snippet

function setPublishAction(token){
FB.api('/me/[YOUR_APP_NAMESPACE]:cook?recipe=’+window.location.href+’access_token=’+token,'post',function(response){
console.log('Post was successful! Action ID: ' + response.id);
});
}

The above example can also be applied to all the action-object pair of non built-in. However, if you apply the Read - Article as action-object pair built in, then the number of additional rules should be applied. The rules are:

  1. Action Read be published if your blog visitors have read your articles more than 10 seconds.
  2. Your blog visitors should be aware that they have given permission for your application to publish an action to the Facebook Timeline.
If you do not follow the above rules, then Facebook will not approve your application for use by your visitors. We can solve the first problem by applying the Javascript, while the second problem can be solved with Jquery. You also have to put the publish function in FB.getLoginStatus and FB.login. Consider the following code example

<html xmlns:fb="https://www.facebook.com/2008/fbml"> 
<head prefix='og: http://ogp.me/ns# fb: http://ogp.me/ns/fb# article: http://ogp.me/ns/article#'>  <title>OG Tutorial App</title>
  <meta property="fb:app_id" content="[YOUR_APP_ID]" /> 
<meta content='article' property='og:type'/>
  <meta property="og:title" content="Stuffed Cookies" /> 
  <meta property="og:image" content="http://fbwerks.com:8000/zhen/cookie.jpg" /> 
  <meta property="og:description" content="The Turducken of Cookies" /> 
  <meta property="og:url" content="http://fbwerks.com:8000/zhen/cookie.html">
<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,
                });
                FB.getLoginStatus(function(response) {
if (response.status === 'connected') {
        // the user is logged in and has authenticated your
       // app, and response.authResponse supplies
        // the user's ID, a valid access token, a signed
       // request, and the time the access token 
       // and signed request each expire
       var uid = response.authResponse.userID;
        var accessToken = response.authResponse.accessToken;
       $('#loginfb').css('display','none');
       $('#logoutfb').css('display','block');
       //function below to solve the first rule 
var ib,nu,ya = document.cookie.split(";");
for(var i = 0; i < ya.length; i++){
ib = ya[i].substr(0,ya[i].indexOf("="));
nu = ya[i].substr(ya[i].indexOf("=")+1);
ib = ib.replace(/^\s+|\s+$/g,"");
if(ib == "ibnu"){
nu = unescape(nu);
break;   
}
}
if(nu == "true"){        
$(".socialcase strong").html("Off");
$(".socialcase strong").css('color','#FF0000');
}else{
$(".socialcase strong").html("On");
$(".socialcase strong").css('color','#00FF7F');
//function below to solve the second rule
var tanggal = new Date();
var detik = tanggal.getSeconds();
if(detik > 13){
setPublishAction(accessToken);
}
}
controluser(nu);
getlogout(accessToken);
     
} else if (response.status === 'not_authorized') {
// the user is logged in to Facebook, 
// but has not authenticated your app
$('#loginfb').css('display','block');
$('#logoutfb').css('display','none');
} else {
// the user isn't logged in to Facebook.
$('#loginfb').css('display','block');
$('#logoutfb').css('display','none');
}
});

$('#loginfb').click(function(){
FB.login(function(response) {
if (response.authResponse) {
console.log('Welcome!  Fetching your information.... ');
var accessToken = response.authResponse.accessToken;
        //function below to solve the first rule 
var ib,nu,ya = document.cookie.split(";");
for(var i = 0; i < ya.length; i++){
ib = ya[i].substr(0,ya[i].indexOf("="));
nu = ya[i].substr(ya[i].indexOf("=")+1);
ib = ib.replace(/^\s+|\s+$/g,"");
if(ib == "ibnu"){
nu = unescape(nu);
break;   
}
}
if(nu == "true"){        
$(".socialcase strong").html("Off");
$(".socialcase strong").css('color','#FF0000');
}else{
$(".socialcase strong").html("On");
$(".socialcase strong").css('color','#00FF7F');
//function below to solve the second rule
var tanggal = new Date();
var detik = tanggal.getSeconds();
if(detik > 13){
setPublishAction(accessToken);
}
} 
controluser(nu);
getlogout(accessToken);
   
} else {
console.log('User cancelled login or did not fully authorize.');
}
},{scope: 'email,user_likes,publish_stream'});
});
function controluser(stat){
$("#social").click(function () {
var statusf = $(".socialcase strong").html();
if(statusf == "On"){
document.cookie = "ibnu = true;domain=www.threelas.com;path=/";
$(".socialcase strong").html("Off");
$(".socialcase strong").css('color','#FF0000');
}else{
document.cookie = "ibnu = false;domain=www.threelas.com;path=/";
$(".socialcase strong").html("On");
$(".socialcase strong").css('color','#00FF7F');
}
});
}

function getlogout(token){
$('#logoutfb').click(function(){
FB.logout(function(response){
window.location = 'http://www.threelas.com/';
});
});
}
function setPublishAction(token){
FB.api('/me/news.reads?article='+window.location.href, 'post',function(response){
console.log('Post was successful! Action ID: ' + response.id);
}); 
}
};

 // 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>
<button id=”loginfb”>Login</button>
<button id=”logoutfb”>Logout</button>
<div id = "social">Social share : <span class="socialcase"><strong></strong></span></div>
<div id=”output”>Result</div>
</body>
UPDATE SEPTEMBER 18, 2012
Because to many people ask to us why login and logout button doesn't work? Because on this post we focus with publsih an action. If you want to know how to activate the login and logout button, please read http://www.threelas.com/2012/07/how-to-make-facebook-login-button.html. We make this because to make every body easy to learn.

  1. Giovanni AversaSeptember 15, 2012 at 9:50 PM

    I followed your tutorial, but I did not put the meta ones you mentioned have these here:































    then in the body section gave me error to solve this problem I used a converter from html to xml and not me error the problem is that when I try to login nothing happens. where am I wrong?

    ReplyDelete
  2. Putri ArisnawatiSeptember 16, 2012 at 5:59 AM

    If I see from your meta, you had done 2 mistakes, first you are not closing your meta tag, second you wrong in writing conditional tag. Here is the solution




    If you meet any problem again, feel free to contact us

    ReplyDelete
  3. Giovanni AversaSeptember 16, 2012 at 7:15 PM

    if I insert these tags that you suggested me error in the template: (

    ReplyDelete
  4. Putri ArisnawatiSeptember 16, 2012 at 7:59 PM

    Oh.... I know the problems, I forget that disqus.com restricting html code, now I had rewrite the code below, try my suggestion code again.

    ReplyDelete
  5. Giovanni AversaSeptember 16, 2012 at 10:41 PM

    meta tags are working the only problem is that when I go to enter the rest of the code after the as I explained yesterday converted from html to xml the problem and that the web page always loads and the login button and logout does not work, at this point a question arises but this tutorial is to integrate a single page or all blog article? thanks so much for patience

    ReplyDelete
  6. Putri ArisnawatiSeptember 17, 2012 at 2:03 PM

    The javascript code above is an example to use built-in Read-Article. So, this page is support for one page. Please try to write your javascript code in here. I will check where exactly the problems.

    ReplyDelete
  7. Giovanni AversaSeptember 17, 2012 at 4:47 PM

    I used the exact code of the tutorial changing only the parts of the app id and website I thought it was valid for all items once made. there is a method to integrate the social reading in the template applies to all items?

    ReplyDelete
  8. Putri ArisnawatiSeptember 18, 2012 at 12:43 AM

    First, I want to say thank you for all your questions, I know what you want now, you want to know how to make login and logout button are work. But the aim of this topic is explain how to publish an action. So that's why I make login and logout button are not work. But fortunately, you can learn how to activate it from http://www.threelas.com/2012/07/how-to-make-facebook-login-button.html


    I make this separate because to make all tutorials easy to learn, step by step.

    ReplyDelete
  9. Giovanni AversaSeptember 18, 2012 at 2:45 AM

    it is just that I will follow you and you are already my hero;) I will follow immediately

    ReplyDelete
  10. yeliskaJanuary 12, 2014 at 4:41 AM

    Yeliskaespada

    ReplyDelete

Subscribe to: Post Comments ( Atom )

Creative Commons LicenseThreelas by Ibnu Syuhada is licensed under a Creative Commons Attribution-NonCommercial-ShareAlike 3.0 Unported License.
Based on a work at http://www.threelas.com.
Permissions beyond the scope of this license may be available at http://www.threelas.com/p/privacy-policy.html.

Sitemap