Facebook Share Dialog with custom metas

I recently had to implement Facebook's Share Dialog for a client and I was blown away by sheer lack of concrete implementation examples.

So I decided to put together my own, in the hopes that it might help someone.

First, create a new Facebook application in the Facebook Developers dashboard here.

Once you've done so, click on Settings and you should see something similar to this:

(I experienced an issue here when trying to add a domain, turns out you have to execute Add Platform first).

Now that you have your Facebook App ID, let's start on the actual web page:

window.fbAsyncInit = function () {  
        FB.init({
            appId: '963518143693151',
            xfbml: true,
            version: 'v2.3'
        });
    };

 function openFacebookShare() {
       FB.ui({
        method: 'share_open_graph',
        action_type: 'og.likes',
        action_properties: JSON.stringify({
         object: window.location.href
        })
        }, function(response){}); 
    }
 <meta property="fb:app_id" content="963518143693151"/>
    <meta property="og:type" content="article"/>
    <meta property="og:title" content="Fresh Black Mussels"/>  
    <meta property="og:url" content="http://oldbiscuit.t1.shopahead.co.za/a9d5893b415cb62e014177d01adc6f84/viewProdDetail/11c041a2cf984f3fb4e3beda34180eb8?setStore=true"/>
    <meta property="og:description" content="Hotel North Beach, 935 Kearny St"/>
    <meta property="og:image" content="http://oldbiscuit.t1.shopahead.co.za/a9d5893b415cb62e014177d01adc6f84/storeDetailProductImageLarge/11c041a2cf984f3fb4e3beda34180eb8"/>

A few notes:

I've created a simple function called openFacebookShare to make the share dialog addressable. In this example, I've hardcoded the URL that will be called for demonstrative purposes. The FB.ui method fires an async call to Facebook which basically scrapes the current web page you are on (and is typically the one you wish to share) for meta tags. In a real-world example, you should probably substitute the object property with a window.location.href.

A key tool to use for debugging the Share Dialog (and to make sure your metas are parseable by Facebook, is to use Facebook's URL Debugger.