How to Share Webpages with Facebook

Facebook is a beast. That’s the the only sentence I think of when thinking about all of it’s features and developing with it. The Facebook Platform lives by the mantra: “Move fast, and break things.” This saying arguably is the reason for Facebook’s wild success and expansion. Facebook has immense depth and integration on the web, and it’s imperative that you keep up with the services and sharing options the social platform offers, or you’ll find yourself left in the dust playing catch-up. Their move fast mentality makes it real easy for you to unknowingly use legacy technology and APIs that are soon-to-be deprecated technology without knowing it.

This walk-through tutorial will explain the most basic sharing options Facebook provides for webpages to some slightly more complex ones even using “hackish” and non-traditional techniques.

Like Button Social Plugin Facebook Provided

This is the easiest and probably the most common technique used. It’s Facebook provided and is extremely simple and straight-foward to use. Just visit the social plugins URL located at “https://developers.facebook.com/docs/plugins/like-button/ and use the URL builder to create your Like Button. They provide code for HTML5, XFBML, IFRAME, and URL. If you’re unsure which one to use, using the IFRAME snippet will be a sure use case, but I recommend using the HTML5 or XFBML method as they are slightly more customizable. Ultimately though, they all do the exact same thing.

The Like Button builder lets you optionally choose if you features such as having Like, Send, Showing Friends Faces, and different layouts.

Examples:

These plugins face the same problem as the Twitter Plugins from the previous article on social sharing. To recap, the problem was that although they look familiar to users, they do have the chance of coming across as spammy and can easily pollute your webpage’s design. Thankfully, there are other options available for this to consider.

Share Dialog

The Share Dialog is awesome and essentially has very similar (almost identical) functionality as a user sharing directly from the user’s timeline.

Using the Share Dialog will count as a “like” essentially to the overall count of URL.

To access the current Share Dialog, visit these links:


<a href="http://www.facebook.com/sharer/sharer.php">http://www.facebook.com/sharer/sharer.php</a>
<a href="https://www.facebook.com/sharer/sharer.php">https://www.facebook.com/sharer/sharer.php</a>

You can style these links however you want with CSS. Here’s some really awesome examples: http://codepen.io/search?q=facebook+share+button&limit=all&order=popularity&depth=everything. You’ll also notice that I listed both the SSL Secure URL and the normal URL. The reason for this is Facebook’s caching is aggressive, really, really, aggressive. Sometime’s you’ll run into issues with this. With my experience I provide this heads up:

Use either the HTTP or HTTPS URL throughout the site consistency to ensure you don’t come across any strange caching issues such as different OG information being shared.

The Facebook Sharer only accepts one GET parameter, and that’s u for the URL.


<a href="http://www.facebook.com/sharer/sharer.php?u=https://scotch.io">http://www.facebook.com/sharer/sharer.php?u=https://scotch.io</a>
<a href="https://www.facebook.com/sharer/sharer.php?u=https://scotch.io">https://www.facebook.com/sharer/sharer.php?u=https://scotch.io</a>

It’s important to note that the old URL Facebook Sharer URL looks very similar to the new Sharer URL and should not be used and confused with. These deprecated URLs are:


<a href="http://www.facebook.com/sharer.php">http://www.facebook.com/sharer.php</a>
<a href="https://www.facebook.com/sharer.php">https://www.facebook.com/sharer.php</a>

These URLs used to accept Parameters such as title and description, but they are no longer supported and should not be used.

If you would like to make the Facebook Sharer a JavaScript Popup, you can use this snippet of code:


<a href="#" 
  onclick="
  window.open(
    'https://www.facebook.com/sharer/sharer.php?u='+encodeURIComponent(location.href), 
    'facebook-share-dialog', 
    'width=626,height=436'); 
    return false;">
  Share on Facebook
</a>

Here’s it in action:


<a href="#" onclick="window.open('https://www.facebook.com/sharer/sharer.php?u='+encodeURIComponent(location.href),'facebook-share-dialog','width=626,height=436');return false;">Share on Facebook</a>

Lastly, everything that the Sharer uses is pulled in via Open Graph (OG) Meta Tags. You can view an infinite list of the metadata here (http://ogp.me/). As a bare minmium, I would use these tags in your head:


<meta property="og:site_name" content="Scotch">
<meta property="og:url" content="https://scotch.io">  
<meta property="og:type" content="website"> 
/* or this depending content type */ 
<meta property="og:type" content="article">
<meta property="og:title" content="Scotch Web Development">
<meta property="og:description" content="Scotch is a web development blog discussing all things programming, development, web, and life.">
<meta property="og:image" content="https://scotch.io/wp-content/themes/scotch/img/scotch-home.jpg">
<meta property="fb:app_id" content="1389892087910588">
<meta property="fb:admins" content="579622216,709634581">

Facebook og:image uses two sizes “small” and “large”. In most use cases this isn’t even a question, use the larger image as it is proven to have higher click-through rates.

You can debug this easily using the Facebook Debugger (URL). The debugger also clears cache and will tell you about missing tags that you might have.

Feed Dialog

The Feed Dialog is a little more tricky than the other sharing options, but it gives you a lot more robust control on what to share. To put in perspective:

  • Share Dialog: Dependent on Open Graph (OG) Meta tags
  • Feed Dialog: Dependent on GET Parameters

It’s not as black and white as this, however. I like to think to think of the Share Dialog as the equivalent of a Like Button URL endpoint. It pulls in all the data in can about a webpage (which can be explicitaly set with Meta Tags), while the Feed Dialog is intended to be used more directly within a Facebook App environment. However, if needed, who really cares, you can use it as an advanced sharing functionality for your webpages.

The Facebook Feed Dialog endpoint is here:

https://www.facebook.com/dialog/feed

You’ll notice that it throws an error immediately. That’s because the URL requires an Application ID and Redirect URI (specificed in the Facebook Application settings). Here’s a full example:

https://www.facebook.com/dialog/feed?app_id=1389892087910588&redirect_uri=https://scotch.io

You’ll notice from the link above that you’re sharing “via Scotch Web Development”, hence the whole App thing. This sharing option makes a lot of sense within a web app or app setting, but it’s clear that there could be a use case on your websites for this. Below are the different parameters that the Feed Dialog. (Note only web-based, basic page and relevant parameters are mentioned. For a full-list see the Facebok Docs). Notice how the URL slowly progresses as you add the different parameters:

Link

The link attached to this post

https://www.facebook.com/dialog/feed?
app_id=1389892087910588
&redirect_uri=https://scotch.io
&link=https://scotch.io

Picture

The URL of a picture attached to this post. The picture must be at least 200px by 200px. See our documentation on maximizing distribution for media content for more information on sizes.

https://www.facebook.com/dialog/feed?app_id=1389892087910588
&redirect_uri=https://scotch.io
&link=https://scotch.io
&picture=http://placekitten.com/500/500

Caption

The caption of the link (appears beneath the link name). If not specified, this field is automatically populated with the URL of the link.

https://www.facebook.com/dialog/feed?app_id=1389892087910588
&redirect_uri=https://scotch.io
&link=https://scotch.io
&picture=http://placekitten.com/500/500
&caption=This%20is%20the%20caption

Description

The description of the link (appears beneath the link caption). If not specified, this field is automatically populated by information scraped from the link, typically the title of the page.

https://www.facebook.com/dialog/feed?app_id=1389892087910588
&redirect_uri=https://scotch.io
&link=https://scotch.io
&picture=http://placekitten.com/500/500
&caption=This%20is%20the%20caption
&description=This%20is%20the%20description

Properties

A JSON object of key/value pairs which will appear in the stream attachment beneath the description, with each property on its own line. Keys must be strings, and values can be either strings or JSON objects with the keys text and href.

https://www.facebook.com/dialog/feed?app_id=1389892087910588
&redirect_uri=https://scotch.io
&link=https://scotch.io
&picture=http://placekitten.com/500/500
&caption=This%20is%20the%20caption
&description=This%20is%20the%20description
&properties={text:’value1′,key2:’value2′}

Actions

A JSON array containing a single object describing the action link which will appear next to the ‘Comment’ and ‘Like’ link under posts. The contained object must have the keys name and link.

https://www.facebook.com/dialog/feed?app_id=1389892087910588
&redirect_uri=https://scotch.io
&link=https://scotch.io
&picture=http://placekitten.com/500/500
&caption=This%20is%20the%20caption
&description=This%20is%20the%20description
&properties={text:’value1′,key2:’value2′}
&actions={name:’I LOVE SCOTCH’,link:’https://scotch.io’}

To see this example, share this privately on your wall and look at what’s next to the comment button.

These examples really spell out the robustness of the Feed Dialog. It’s important to note that this is makes more sense to use within a Facebook App after a user has Logged in with Facebook, but you can hack/abuse the functionality for some cool share functionality as shown above. I’m unsure if this counts toward like count like Facebook Shares and Facebook Likes.

Wrap-Up

So what should you use? It all really depends. I choose to completely avoid the default Facebook Like Button at all costs for purely design purposes, but it can definitely be used gracefully. The Facebook Sharer URL is Godsend, and understanding OG tags entirely can give you a huge web development advantage. The Feed Dialog is awesome, but should be used correctly. Use whatever fits you best! Feel free to post in the comments creative sites or ways that you’ve used sharing with Facebook.