Facebook share button with custom title and message etc
I have integrated a Facebook Share button in my website. The one that you can generate here:
https://developers.facebook.com/docs/plugins/share-button/
But how can I tell it what title, message to show and what url to redirect to? It now all "tries" to automatically resolve this from the web page.
It uses the right title from the <title> tag. But the meta description tag is not working. And I also have no clue how to set a custom URL and image.
All I have now is:
This right below the opening of the body tag:
<div id="fb-root"></div>
<script>(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/nl_NL/sdk.js#xfbml=1&appId=19158xxxxxxxxx&version=v2.0";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
And this on a product detail page:
<div class="fb-share-button" data-type="button_count"></div>
How can I customize everything here?
Answer
You need to specify the og:title and og:description meta tags as per http://ogp.me.
Those are the tags that Facebook will initially scrape for the share info.
Alternatively you can use the javascript sdk and specify the title, URL, description, etc manually as described in the documentation