Friday, November 11, 2011

How To Publish Actions On Timeline

This is my second tutorial of Facebook application development with Open Graph series, in previous tutorial I showed you how to setup your Facebook application with Open Graph. Now in this tutorial I will teach you to how to publish actions on user’s timeline.


Note: Due to changes announced by Facebook on 31st May this tutorial has been updated you can visit the updated tutorial from here.


How to Publish Actions on User’s Timeline
If you have already created actions and objects by following my previous tutorial then the next setup is to publish those actions on user’s timeline, but before proceeding you can check my demo app.

Step 1: Go to developers.facebook.com/apps select the relevant app if you have multiple apps and click on Edit open Graph in Open Graph section.



Step 2: Click on Get Code in Object Types and copy the highlighted code from popup window and save it somewhere.




Step 3: Click on Get Code in Action Types and copy access token as shown in the second image and save it also.




Step 4: Now create a file test.html, paste the following code in it, replace the colored text according to your app's settings and upload it to your hosting server yoursite.com/test.html.


<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" lang="en-US"
xmlns:fb="https://www.facebook.com/2008/fbml">


Paste the code copied in step 2 here and don't forget to replace Put Your Own URL Here with yoursite.com/test.html in og:url, set descriptions and image according to you page content.


<script type="text/javascript">
function read()
{
FB.api('/me/Your_Namespace:action' +
'?object=Yoursite.com/test.html&access_token=Paste the access token copied in step 3','post',
function(response) {
var msg = 'Error occured';
if (!response || response.error) {
if (response.error) {
msg += "\n\nType: "+response.error.type+"\n\nMessage: "+response.error.message;
}
alert(msg);
}
else {
alert('Post was successful! Action ID: ' + response.id);
}
});
}
</script>


</head>


<body>
<div id="fb-root"></div>
<script src="http://connect.facebook.net/en_US/all.js"></script>
<script>
FB.init({
appId:'Your_appId', cookie:true,
status:true, xfbml:true, oauth:true
});
</script>
<form>
<input type="button" value="Post To Your Timeline " onclick="read()" />
</form>
</body>
</html>


Your_Namespce: In my demo app it was onlytipsandtricks change it according to your app.


Action: In demo app it was read but when you click on get code as you did in step 3 you will see underscore after read as read_



You have to include these underscores in both actions and objects otherwise you will get the following error:


The action you're trying to publish is invalid because it does not specify any reference objects. At least one of the following properties must be specified: article_.


Object: We used object article in demo app so you have to replace it according to object settings of your app.


Your_appId: You application id.


Finally you can test your page by visiting yoursite.com/test.html and clicking on Post To Your Timeline button, if all things go well you will see Post was successful! message along with app id on your page.

at

52 comments:

  1. AndreiNovember 11, 2011 at 4:01 PM

    When I click "Publish to Timeline" button I get an error "session is expaired".

    ReplyDelete
  2. HasnainNovember 11, 2011 at 7:52 PM

    You need to add the demo app before publishing to timeline.

    ReplyDelete
  3. Patel pranayNovember 13, 2011 at 6:26 PM

    when I click on "publish to timeline", nothing happens! :( Help soon if possible

    ReplyDelete
  4. peeyushNovember 16, 2011 at 5:02 PM

    The action you’re trying to publish is invalid because it does not specify any reference objects. At least one of the following properties must be specified: article_.

    I am getting the above error as per your doc. i have made chages but not working plz tell wat i do for it .

    ReplyDelete
  5. HasnainNovember 17, 2011 at 11:41 AM

    Have you added underscore "_" after "article_" in this line FB.api('/me/Your_Namespace:read_' +
    '?article_=Yoursite.com/test.html&access_token=Paste the access token copied in step 3','post',

    ReplyDelete
  6. peeyushNovember 17, 2011 at 2:36 PM

    yes I did but now give me below error

    Message: (#3502) Object at URL http://fanmeter1.spanatix.com/Timeline-2/test.html has og:type of 'website'. The property 'movie_' requires an object of og:type 'fmtimelinedemo:movie_'.

    ReplyDelete
  7. HasnainNovember 17, 2011 at 6:09 PM

    I have checked your page on Debugger its ok, if you added the same objects and actions types in your app and still you are getting this error then may be its a Facebook bug many people are complaining this, here is same question from stackoverflow although its related to submitting the object.

    ReplyDelete
  8. AkanshNovember 19, 2011 at 4:07 AM

    Hello!i loved ur article and want to know is it possible that when any person visit my blog and read any article ,when he reads it get posted on facebook that That person has read an article..like today big sites have this feature.please help/

    ReplyDelete
  9. HasnainNovember 19, 2011 at 10:38 AM

    Yes its possible but first thing you need is the user visiting your site for reading articles must authenticate your app before read action can be posted to his timeline, you can use "add to timeline plugin" for this purpose. The other thing is your pages must have open graph meta tags matching with your app's actions and objects, if you have self hosted wordpress blog there are few plugins with can add meta tags to your pages.

    ReplyDelete
  10. AkanshNovember 19, 2011 at 2:22 PM

    But i am using blogger and it`s really difficult to start that service.Can You write a tutorial for enabling that sevice for a blog.My blog is paisaearn.in

    ReplyDelete
  11. Yuvraj SinghNovember 26, 2011 at 5:50 PM

    i got an error that unknown path components/mynamespace:read_

    ReplyDelete
  12. Janusz JasinskiDecember 4, 2011 at 11:24 PM

    I keep getting this:

    Message: The action you're trying to publish is invalid because it does not specify any reference objects. At least one of the following properties must be specified: article.

    I've followed this article down to the last full stop but no luck.

    Any ideas?

    TIA

    ReplyDelete
  13. Janusz JasinskiDecember 4, 2011 at 11:37 PM

    Ok - I clearly didn't see everything! Brilliant - thanks.

    Someone did mention a good example of something I'm look to do

    1) If app not authenticated
    1.1) Show "Add to Timeline" or "Authenticate this App" button
    2) If app is authenticated
    2.1) Run the function to add the "read an article" to the timeline
    2.2) If they come back to the page, check if the actio has already been submitted
    2.3) If submitted already i.e. already seen article, don't add again

    ReplyDelete
  14. HasnainDecember 6, 2011 at 8:15 PM

    1. You can add the "Add to timeline" plugin, by using this plugin if the user is not authenticated he will be shown "Add to timeline button" and if the user already added the app then "added to timeline" will be shown.
    2. If user is authenticated with publish_actions permission then you can publish "read" actions by allowing user to click on the custom button as we did in the example or you can call javascript function by using this bit of codeonload="read() so that when the user clicks on link to article the action will be posted automatically when the page will be loaded.

    ReplyDelete
  15. AkRyDecember 14, 2011 at 2:23 PM

    HI !
    I've followed your tutorial step by step and it's still not working...
    I've got my app on my application page and i see
    Add to timeline when i click on it nothing happenned to my timeline :(
    I have also a message error which is
    Message(#3502) Object at URl "my URL" has og:type of'website'
    The property 'article' requires an object of og:type 'testserd:article'
    **testserd is my app namespace

    Do you know how to fix this?

    ReplyDelete
  16. AkRyDecember 14, 2011 at 3:48 PM

    It Works now ive solved out :) Thanks Nice Tuto and excellent job <3 it

    ReplyDelete
  17. karimDecember 17, 2011 at 11:20 PM

    How did you solve this issue? I have run into the same problem.

    ReplyDelete
  18. acheter des kamasDecember 20, 2011 at 8:42 AM

    really timeline is more crapy i really like the old facebook profile ...

    ReplyDelete
  19. LukeJanuary 17, 2012 at 8:15 AM

    Yeah, I have the same problem. What did you do to fix?

    ReplyDelete
  20. FernandoJanuary 29, 2012 at 12:05 AM

    your app is not working anymore. do you know why?

    ReplyDelete
  21. HasnainJanuary 29, 2012 at 6:39 PM

    Which type of error you have faced?

    ReplyDelete
  22. blackFebruary 3, 2012 at 4:14 AM

    Thanks, great articles and helped heaps.

    ReplyDelete
  23. loseMarch 5, 2012 at 2:57 PM

    this tutorial save my time a lot . thanks...

    ReplyDelete
  24. Avinash AgrawalMarch 26, 2012 at 3:47 PM

    Its not working and on click button nothing happens.
    Please Help

    ReplyDelete
  25. Avinash AgrawalMarch 26, 2012 at 4:35 PM

    Its not working here too.
    Please Guide

    ReplyDelete
  26. HasnainMarch 26, 2012 at 6:26 PM

    Does it shows any error message?

    ReplyDelete
  27. Avinash AgrawalMarch 27, 2012 at 2:18 AM

    No... Its not showing any error on "Post to your timeline" button click.

    ReplyDelete
  28. Avinash AgrawalMarch 27, 2012 at 2:29 AM

    Yes... Now it is showing error....

    The action you’re trying to publish is invalid because it does not specify any reference objects. At least one of the following properties must be specified: article.

    ReplyDelete
  29. Avinash AgrawalMarch 27, 2012 at 2:42 AM

    I am getting this in Action type

    FB.api('me/news.reads' .......

    Instead of

    FB.api(‘/me/Your_Namespace:action....

    Semicolon is missing ???

    ReplyDelete
  30. Avinash AgrawalMarch 27, 2012 at 1:07 PM

    Erro code(#100) Can only call this method on valid test users for your app"

    but after sometime
    error: session has expired at unix time......

    What is this?? plz help me out

    ReplyDelete
  31. HasnainMarch 27, 2012 at 7:42 PM

    “Session expired” means the access token has expired the token usually expires within two hours, now you have to copy the the token again as mentioned in step 3.

    ReplyDelete
  32. JCApril 2, 2012 at 10:08 PM

    i tried everything but nope, nothing happens when i click "post to my timeline". why do you think i am even not getting an error message? thanks in advance

    ReplyDelete
  33. HasnainApril 4, 2012 at 1:25 PM

    First make sure that all the code is in plain text, if you have copied the code from here then chances are that you have copied the formatted text and you have to convert it into plain text, if the code you have copied is already in plain text then check if you have correctly loaded the SDK and additionally you can check the source code of my app.

    ReplyDelete
  34. mrblindpigApril 17, 2012 at 5:25 PM

    I've toiled at this too, and have finally got it to show the 'Post To Timeline' button ( albeit amongst strange symbols) but alas nothing happens ..... http://www.itsousideinside.com/test.html

    Any thoughts?

    ReplyDelete
  35. HasnainApril 18, 2012 at 1:33 PM

    I am out of thoughts because the link you have posted is not working anyways i guess it is itsoutsideinside.com, i have checked your pages source code its showing strange characters.

    ReplyDelete
  36. catenoApril 24, 2012 at 2:39 AM

    I followed the example above but i keep receiving tha same erron when i click in "publish" button:

    Message: (#15) This method must be called with an app access token.

    any ideia?

    ReplyDelete
  37. Julie CarterMay 2, 2012 at 1:20 AM

    Unknown Object Type: Object at URL 'http://samples.ogp.me/431410613536548' is invalid because the configured 'og:type' of '430460170298259:group' is invalid.

    No Matter what I do, I keep getting this error message when I debug sample data. Any ideas?

    Thanks
    Julie

    ReplyDelete
  38. KpoulianosMay 9, 2012 at 4:27 PM

    I have the same problem others mentioned. Message (#3502) Object at url...has og:type of 'website'. The property 'article' requires an object of og:type 'article'.

    Here is the link to the article http://fb.idebate.eu/article2.php.

    Thanks for writing this tutorial, it's been great help.

    ReplyDelete
  39. HasnainMay 10, 2012 at 12:06 AM

    You should check your URL in debugger and if it shows no error and og tags are same as of your app then may be its a bug.

    ReplyDelete
  40. KpoulianosMay 16, 2012 at 4:40 PM

    The debugger indeed showed no errors, but in fact there was an error in the API call wich I fixed, everything is working now. The only problem I still have is that the access token copied and pasted in "step 4" expires after 2 hours and I need to request a fresh read code, and paste the new token. Any way to do this automatically, or to make tokens not expire?

    ReplyDelete
  41. KpoulianosMay 16, 2012 at 4:42 PM

    Nevermind, I just found your article here http://onlytipsandtricks.com/facebook/how-to-get-access-token-for-publishing-action-on-timeline/ thanks for all the help and sorry for the spam.

    ReplyDelete
  42. Agus E SetiyonoJuly 5, 2012 at 4:48 AM

    Thanks for share this tutorial.
    all is work!
    great tutorial...thx

    ReplyDelete
  43. JanoAugust 13, 2012 at 8:36 PM

    Hello Hasnain:

    I want exactly what Akansh described.

    I am already using a plugin for OGP meta tags that is doing its job very well. But I can not find an "Add to timeline plugin". Would you point me in the right direction? Thanks a lot.

    ReplyDelete
  44. SanaAugust 30, 2012 at 8:10 PM

    Boss I'm getting a Window saying,

    Error occurred

    Type: OAuthException

    Message: An active token must be used to query information about the current user.

    ==>>> Breaking head since noon, Would be helpful if u reply within tomorrow noon, Pleaseee

    ReplyDelete
  45. Deb BhattraiAugust 31, 2012 at 4:38 PM

    hi hassin,
    i've read the article carefully. there is no underscore in the code which i got from step 3. so i did not put in the code. i still get error like:

    Error occured

    Type: Exception

    Message: The action you're trying to publish is invalid because it does not specify any reference objects. At least one of the following properties must be specified: cusine.

    ReplyDelete
  46. DevrimSeptember 5, 2012 at 12:04 AM

    I got the post to your timeline button but nothing happens as a lot of people have already said.

    http://www.idpturkey.net/test.html

    ReplyDelete
  47. ThySeptember 9, 2012 at 9:43 AM

    There seems to be some error with documentation and the fb.api. After playing around with the code I got it to work. Please view my same code here: nopenonlytext.tnguyen.com/test.html

    note that my fb.api call has been modified to:
    FB.api(
    '/me/Publish',
    'post',
    { article: 'http://nopenonlytext.tnguyen.com/test.html' },

    Publish is the Action Type
    article is the object.

    ReplyDelete
  48. Facebook plug-in for Wordpress « No Pen Only TeXtSeptember 9, 2012 at 10:38 AM

    [...] There are additional instructions here that helped me. http://onlytipsandtricks.com/facebook/how-to-publish-actions-on-timeline/ [...]

    ReplyDelete
  49. rameshOctober 18, 2012 at 5:17 PM

    same here!

    ReplyDelete
  50. MarowNovember 20, 2012 at 6:27 PM

    You must change the ´ to '.
    And Its run ;)

    ReplyDelete
  51. MehranFebruary 1, 2013 at 5:06 PM

    nice tutorial :)

    ReplyDelete
  52. TheBlogIsMineJune 21, 2013 at 1:56 PM

    Many thanks for this article. It's a pity that you can't create the working app that show the working code.

    ReplyDelete