facebook like button website description

Question

I've added a Facebook like button to my website , by following these instructions . Basically, I added this HTML:

<div class="fb-like" data-href="http://www.festivals.ie" 
    data-send="false" data-width="100"data-show-faces="false" data-font="verdana"     
    data-layout="button_count">
</div>

And this JavaScript:

(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_GB/all.js#xfbml=1&appId=29208799875673";
    fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));

When the button is pressed, the following popout appears:

The popout contains some text that describes the website (circled in red). This text seems to be copied from the first non-empty <p> element that appears on the page (starting from the top).

Is there a way that I can change this to something that better describes the site? I tried adding a

<meta name="description" content="my website description"/>

But it didn't make any difference.

Answer 1

Use the opengraph description meta tag. You might also want to add the title unless your page title is always what you want to appear on Facebook.

<meta property="og:title" content="..." />
<meta property="og:description" content="..." />

See https://developers.facebook.com/docs/opengraph/objects/ for further information.