By LocalPCGuy on Web Development

Facebook Feed Dialog vs. Share Link Dialog

Facebook has 2 relatively simple ways to let you add share links to your website that you can style to match your website. I don’t count the Like Button, which although easy to setup, doesn’t allow any customization of the button itself.

After the Like Button was introduced, the Share Link was originally deprecated by Facebook in an attempt to encourage people to use the Like Button or the Feed Dialog. But, imagine my surprise earlier today, despite often telling people the Share Link using sharer.php was deprecated, to find a full documentation page explaining how to use it. My best guess is that too many people continued to use it, so Facebook fixed some of the early inconsistent behavior and put up some official documentation for it.

The Feed Dialog was introduced around the same time as the Like Button, and remains a good way to control the specifics of a share post. It is highly customizable and doesn’t rely on Open Graph tags on a page for it’s information.

Share Link Dialog

The Share Link is the simpler of the two options to use. You just direct the user to open a link with the URL to share as a parameter.

<a href="https://www.facebook.com/sharer/sharer.php?u=example.org" target="_blank">
  Share on Facebook
</a>

And that is pretty much all there is too it. You can pop it up in a JavaScript popup using window.open, which lets you control the experience a little more, but you can’t specify any options except for the URL in the link itself. For other options, like the share image, title of the share post and so on, you would need to edit the Open Graph meta tags on the page being shared.

window.open('https://www.facebook.com/sharer/sharer.php?u=' + location.href, 'sharer', 'width=626,height=436');

<!-- In the Head of the Page being shared -->
<!-- For Facebook -->          
<meta property="og:title" content="" />
<meta property="og:type" content="article" />
<meta property="og:image" content="" />
<meta property="og:url" content="" />
<meta property="og:description" content="" />

You can also just let the Share Dialog pick up the title and description from the standard title and description meta tags on the page, but Facebook recommends using the Open Graph methods and that allows you to customize the message for Facebook.

Feed Dialog

On the other hand, the Feed Dialog lets you get very specific about how you want your share to appear. You can specify the title (name), caption and description along with the image, in the URL. You simply need to create a URL with the following format, and then open it (I like to pop it open in a new window).

https://www.facebook.com/dialog/feed?
  app_id=458358780877780&
  link=https://developers.facebook.com/docs/reference/dialogs/&
  picture=http://fbrell.com/f8.jpg&
  name=Facebook%20Dialogs&
  caption=Reference%20Documentation&
  description=Using%20Dialogs%20to%20interact%20with%20users.&
  redirect_uri=https://mighty-lowlands-6381.herokuapp.com/&
  display=popup

As you can see looking at the URL above, you just need to specify the link to share, and add the picture link, title (name), caption and description to the URL.

You can also call the Feed Dialog using the FB API. I rarely find it worth pulling in the FB API just to setup the Dialog using that method, although the resulting Feed Dialog does feel more like it is a Facebook dialog using that method.

It’s also worth mentioning that the name, caption and description parameters should be URL encoded. I use something similar to the following function to generate my Feed Dialog url.

function createFBShareLink(FBVars) {

  var url = 'http://www.facebook.com/dialog/feed?app_id=' + FBVars.fbAppId +
    '&link=' + FBVars.fbShareUrl +
    '&picture=' + FBVars.fbShareImg +
    '&name=' + encodeURIComponent(FBVars.fbShareName) + 
    '&caption=' + encodeURIComponent(FBVars.fbShareCaption) + 
    '&description=' + encodeURIComponent(FBVars.fbShareDesc) + 
    '&redirect_uri=' + FBVars.baseURL + 'PopupClose.html' + 
    '&display=popup'; 

  return url; 
}

function openWindow(createFBShareLink(FBVars)) { 
    window.open(url, 
                'feedDialog', 
                'toolbar=0,status=0,width=626,height=436'
    ); 
}

There are two complications to the Feed Dialog that you have to address if you plan to use it as a popup share. One, you need to create an app to use, and the app must match the URL being shared. Second, the redirect_url has to redirect to a page on your website (or to the Facebook home page).

Personally, for the redirect_url, I like to create a simple page called popupClose.html, and use that page as the redirect url. This page just shuts the popup window using window.close().

<html>
  <head>
    <title></title>
  </head>
  <body>
    <p>If this window does not close automatically, 
        use the Close button to close it.</p>
    <script>
      window.close();
    </script>
  </body>
</html>

Which to use?

I’d say it depends on your needs. If you just want to setup a quick share link, the Share Link Dialog will probably suit your needs just fine. It is easy to setup, doesn’t require a Facebook app and is a very simple URL to construct. You still have the ability to customize the resulting share, although you have to do that on the page being shared.

On the other hand, the Feed Dialog gives you much more control over the specifics of the share, right in the URL you build for the dialog. This makes the Feed Dialog ideal for times when you need to programmatically adjust the values, say if you are sharing the results of a quiz or customizing the share based on user input. But there are additional complications to keep in mind with the Feed Dialog, making it a bit more complex to setup.

In the end, use whichever works best for your situation. And as I learned earlier when I read the docs for the Share Link Dialog, Facebook does change their API frequently, so if it has been a little while since the last time you used either method, sometimes it’s worth checking to see what has changed in the meantime.