Learn More

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. 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. 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. if I insert these tags that you suggested me error in the template: (

    ReplyDelete
  4. 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. 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. 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. 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. 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. it is just that I will follow you and you are already my hero;) I will follow immediately

    ReplyDelete