Search code examples
phpjavascriptfacebookfbmlfbjs

How do you create the "share" popup in an iframe Facebook app


I currently have the following method which creates a "share url" essentially the code to insert into an onclick="" within the app.

The problem is that now we can no longer have Facebook FBML applications, only iframe - is there a library I now need to include to make this work? Or should I be changing the code, I have Googled but answers are widely inconclusive or backhacks to force it to work.

public function getShareUrl($title, $url, $caption, $description, $imageSrc, $shareButtonText = 'Share your thoughts!')
{
    $url .= "var attachment = {
                    'name':'$title',
                    'href':'$url',
                    'caption':'$caption',
                    'description':'".$description."',
                    'media':[{
                        'type':'image',
                        'src':'$imageSrc',
                        'href':'$url'
                    }]
                };
                var actionLinks = [{
                    'text':'Join the app now',
                    'href':'$url'
                }];
                Facebook.streamPublish('', attachment, actionLinks, null, '$shareButtonText');
                return false;";
    return $url;
}

Thanks all! :)


Solution

  • To make a share popup appear from within your facebook app, you have to use the Javascript SDK

    you can do this:

    <html xmlns="http://www.w3.org/1999/xhtml" xmlns:fb="http://www.facebook.com/2008/fbml">
      <head>
    <title></title>
    </head>
      <body>
      <div id="fb-root"></div>
    <script type="text/javascript" src="http://connect.facebook.net/en_US/all.js"></script>
    <script type="text/javascript">
      FB.init({
       appId  : 'yourappid',
       status : true,
       cookie : true,
       xfbml  : true 
      });
    </script>
    <script type="text/javascript">
      function streamPublish(name, description, hrefTitle, hrefLink, userPrompt, imageSrc, imageUrl) {
          FB.ui({
              method: 'stream.publish',
              message: '',
              attachment: {
                  media: [{
                      type: 'image',
                      src: imageSrc,
                      href: imageUrl
                  }],
                  name: name,
                  caption: '',
                  description: (description),
                  href: hrefLink
              },
              action_links: [{
                  text: hrefTitle,
                  href: hrefLink
              }],
              user_prompt_message: userPrompt
          }, function (response) {
              // do something when you have posted
          });
      }
    
      function publishStream() {
          streamPublish("Stream Publish", 'sample publish', 'do something cool', 'http://example.com', "My fb app", 'http://bit.ly/AJTnf', 'http://bit.ly/hifZk');
      }
     </script>
    <p>Stream Publish Test</p>
    <a href="#" onclick="publishStream(); return false;">Post a story</a>
      </body>
    </html>