Publish your site content to Facebook wall – Publish Wall Post/ Stream JS API Tutorial

Posted By: KP On June 26, 2010 Under Internet, Other, Programming, Web Master Categories

If you own a website/blog, publishing your site content on facebook is easy now. The setup for Stream API hardly takes 5 minutes. This is graph API Javascript based tutorial.

By the end of the tutorial you will be able to post something like below image for your site.

fb-post

Step 1: Register a new application for your website. Visit http://developers.facebook.com/setup/

Use name = Whatever name you want to display instead of ”World War” at bottom in above image.

Step 2: After registering the application, set below url by editing the application.

Canvas Callback URL

http://www.yoursitename.com/
Connect URL
http://www.yoursitename.com/Note that it should point to the folder where you are going to use the code. The tutorial is about pressing a button on your website and posting things to user’s facebook wall.

Step 3: Take Application ID from http://www.facebook.com/developers/apps.php

Step 4: Insert below code wherever you want to display button for posting on wall. Edit related texts.

<div id="fb-root"></div>             <script> 

       window.fbAsyncInit = function() { 

       FB.init({appId: "YOUR APP ID FROM STEP 3", status: true, cookie: true, 

             xfbml: true}); 

        }; 

     (function() { 

      var e = document.createElement("script"); e.async = true; 

     e.src = document.location.protocol + 

       "//connect.facebook.net/en_US/all.js"; 

     document.getElementById("fb-root").appendChild(e); 

   }());

      function streamPublish(){       

FB.ui(   {     method: 'stream.publish',display:'popup';
message: 'getting educated about Facebook Connect', attachment: { name: 'Connect', caption: 'The Facebook Connect JavaScript SDK', description: ( 'A small JavaScript library that allows you to harness ' + 'the power of Facebook, bringing the user\'s identity, ' + 'social graph and distribution power to your site.' ),

‘media’: [{ 'type': 'image',

'src': 'http://www.yoursite.com/images/facebook_icon.png',

'href': fb_root()}] ,

href: 'http://github.com/facebook/connect-js' }, action_links: [ { text: 'Code', href: 'http://github.com/facebook/connect-js' } ], user_message_prompt: 'Share your thoughts about Connect' }, function(response) { if (response && response.post_id) { alert('Post was published.'); } else { alert('Post was not published.'); } } );            } </script>  
 

Step 5: Call streamPublish function by a link. You can use CSS for changing look of the link/button.

<a onclick=”streamPublish();” >Click to Publish on Facebook wall</a>

If no publish window is popping up, try setting display: value to ‘dialog’.

You are done ! Now just spread the post and get infinite traffic from facebook. Tell your users to post on wall. You can have data from game or any quiz and publish results on facebook wall same as facebook application does.



Share with Friends ( Sharing is Caring! )


Subscribe For E-mail Notification Of Article Updates

Enter your email address:

NOTICE:
DO NOT FORGET TO CLICK ON THE VERIFICATION LINK AFTER SUBSCRIBING,THE VERIFICATION MAIL WILL BE SENT TO YOU FROM "FeedBurner Email Subscriptions".
( What is this? Why I need to do this?)

Related Posts

14 responses. Wanna say something?

  1. naqi
    Jul 10, 2010 at 09:36:12
    #1

    Hi
    followed everything to the Tee. Still no pop window for publish . Its like nothing happens when you click on button.

    [Reply]

  2. Lubelskie firmy
    Jul 20, 2010 at 13:52:20
    #2

    Cool WEB ;)

    [Reply]

  3. varun jnain
    Sep 6, 2010 at 20:40:49
    #3

    Exactly
    no pop up appeared

    [Reply]

  4. zette
    Sep 7, 2010 at 19:06:24
    #4

    change it to:
    media not `media’
    ‘src”:’some.real.path’
    ‘href’:'other.real.path’
    it works fine for me

    // display:’popup’

    [Reply]

    contentmakers Reply:

    How does you done that. Can You send me the code please. Need help. Not working for me. :(

    [Reply]

  5. bob
    Oct 29, 2010 at 05:48:14
    #5

    Can you use this to post content to A FRIEND’S wall? For example, if someone came to my sight, and really loved a story they read, could they post that story to their friend’s wall easily??

    [Reply]

    KP Reply:

    you need to modify the code.

    [Reply]

  6. Alex Todorov
    Apr 20, 2011 at 02:48:02
    #6

    There is a JS error in the code

    [Reply]

    KP Reply:

    What error are you getting?

    [Reply]

  7. justin
    Jun 3, 2011 at 13:09:44
    #7

    i have a similar problem, i can get the share button to work great but my problem is that i have several videos on my site that would like a share button, now i have a similar code to this and i placed this code with each link but when each button is clicked on they all get the same info from the bottom link, i.e i have 10 videos 1-10 each have there own share button but when i click a share button they display info from video 10 the boittom one. my question is if anyone can help how to have 10 share buttons displaying there own info?

    thanks in advance.

    [Reply]

    KP Reply:

    Use unique link for each button. Echo it in a loop. If you will print same code all time, the share button will be same.

    [Reply]

  8. Rakib
    Aug 27, 2011 at 14:43:47
    #8

    not working

    [Reply]

  9. tamil
    Sep 15, 2011 at 14:35:30
    #9

    Click to Publish on Facebook wall if i click the link nothing happened

    [Reply]

  10. jaiganesh
    Jan 6, 2014 at 11:37:52
    #10

    works fine but need to change some codes…thankz.

    [Reply]

Post a Comment

OR