Facebook Share Dialog Example: Using Javascript to define custom sharing parameters

facebook-share-dialog-example.html

<script>
// Include the Facebook Javascript SDK
window.fbAsyncInit = function() {
	FB.init({
		appId      : 'your-app-id',
		xfbml      : true,
		version    : 'v2.8' // Update version as necessary
	});
	FB.AppEvents.logPageView();
};

(function(d, s, id){
	var js, fjs = d.getElementsByTagName(s)[0];
	if (d.getElementById(id)) {return;}
	js = d.createElement(s); js.id = id;
	js.src = "//connect.facebook.net/en_US/sdk.js";
	fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));

// this page will need to have the correct Open Graph meta tags in the header
// use the query string parameters to dynamically assign the values to the OG tags using PHP
var shareHREF = 'http://example.com/share-page.php?query=values';

// Open the share dialog
FB.ui({
	method: 'share',
	href: shareHREF,
}, function(response){});

// Javascript event handler: opens the share dialog
// But it doesn't work anymore; you get a 500 error
// instead use the above method even though it's less elegant
// Facebook is a jerk
/*$('#my_button').click(function(event){
	FB.ui({
		method: 'share_open_graph',
		action_type: 'og.shares',
		action_properties: JSON.stringify({
			object: {
				'og:url': window.location.href,
				'og:title': 'Custom Title',
				'og:description': "Custom description.",
				'og:image:width': '1200', // recommended width; predefine so FB will cache it right away
				'og:image:height': '630', // recommended height; predefine so FB will cache it right away
				'og:image': 'http://example.com/images/fb-page-share.png?v=120920161041' // if you change the image again, update this extra value so Facebook caches the new version
			}
		})
	}, function(response){});
});*/

/*
Reference:
https://developers.facebook.com/docs/javascript/quickstart
https://developers.facebook.com/docs/sharing/reference/share-dialog
*/
</script>