FBML wallpost by clicking on image or button

Question

I'm creating one facebook application with FBML. What I want is: I have several images like,

<fb:tag name="img">
<fb:tag-attribute name="src">http://My_Img_Url_1.jpg</fb:tag-attribute>
</fb:tag>
<fb:tag name="img">
<fb:tag-attribute name="src">http://My_Img_Url_2.jpg</fb:tag-attribute>
</fb:tag>

While I click on the image it should open one popup "post to wall" or "Post to your Friend's wall" with the corresponding image My_Img_Url_n.jpg.

I can use FBML share button like:

METHOD-1

<fb:share-button class="meta">
<meta name="title" content="Image_TITLE"/>
<meta name="description" content="Image_Descrip"/>
<link rel="image_src" href="http://My_Img_Url_1.jpg"/>
<link rel="target_url" href="Some_Target_URL"/>
</fb:share-button>

OR,

METHOD-2: I can call fb:ui

    <script>
FB.init({ 

 appId:'111111111111111', cookie:true,

    status:true, xfbml:true 
 });

 FB.ui({ method: 'feed', 
 name: '',
 link: '',
 picture: 'http://My_Img_Url_1.jpg'
 });
</script>

Now the questions are:

1. If I click on any image it will call either METHOD-1 or METHOD-2 and it will popup with that image. How can I do that?
2. If I use <fb:multi-friend-input /> for posting to friend's wall, How can I do?

Answer 1

I would go with option 2 as FBML is going to be deprecated soon (https://developers.facebook.com/docs/reference/fbml/).

To sum up, initialize the JS SDK, make sure that your user is logged in and then wrap the FB.ui call with a new function. Then write out your images to the page in HTML and assign the click event to call your new Javascript function.

<div id="fb-root"></div>
<script src="http://connect.facebook.net/en_US/all.js"></script>
<script>
  // Initialize the Facebook Javascript SDK
  FB.init({
    appid: 'YOUR_APP_ID_HERE',
    status: true,
    cookie:true
  )};

  //Let's grab the userId for the user that is logged in
  //If you user is not logged in, redirect or prompt them to login/install the app.
  var userId = null;
  FB.getLoginStatus(function(response) {
    if (response.session) {
      uid = response.session.uid;
    }
    else {
      //Redirect or prompt to login with FB.login(), etc.
      //https://developers.facebook.com/docs/reference/javascript/FB.login/
    }
  });

  //Create your function to post to the users wall
  function postToWall(userId, imageURI, linkURI, name) {
    FB.ui({ method: 'feed',
      to: userId,
      name: name,
      picture: pictureURI,
      link: linkURI
    }, postToWallCallback);
  }

  //Create your callback function, this will be called when the user sends or closes the
  //Feed Dialog
  var postToWallCallback = function(response) {
     //For testing, let's alert out the contents of the response
     var responseStr = '';
     for(var item in response)
       responseStr += item + "=" + response[item] = "\n";

     alert(responseStr);
  }
</script>

<!-- Now print your image to the page and wrap it in an anchor tag that calls your Javascript function -->
<a href="#" onclick="postToWall(uid, 'my_great_image.jpg', 'my_great_site.jpg', 'My Great Name');">
  <img src="my_great_image.jpg" />
</a>

This example will post to the users wall. If you want to post to another users wall, you'll first need to grab the current users friends IDs with FB.api('me/friends', myGreatCallback) (see https://developers.facebook.com/docs/reference/javascript/FB.api/) and then pass this into postToWall()

I wrote this without trying to run it, let me know if you run into any any errors ;). You can find more information on the Facebook JS SDK at: https://developers.facebook.com/docs/reference/javascript/