Question

I am using open graph for the first time. In any url like this you you can see a like button for the site’s facebook page at top and another like button after the heading and summary of the article. The second like button is not working as required. If I like from that link then instead of the article the website’s facebook page gets liked and the information which I want to show to other facebook users who see that like post is the summary of the article but instead it show that the person like the page alazydude. And the image is also not displaying which I have specified in the open graph tag. The website is still incomplete. I have tried many times now.

Have a look at this page. The second like button in the middle is not working properly.

Answer 1

Make sure you use the correct data-href in your code to like an article. (You should refer to the URL for that single article, even if it’s on a page with multiple articles.)

For example:

<div class="fb-like"
     data-href="http://www.yoursite.net/articles/unique-article-id-goes-here-or-something-like-that"
     data-send="false"
     data-layout="button_count"
     data-width="140"
     data-show-faces="false"
     data-font="segoe ui"></div>

Facebook has developed a handy little tool to create that code for you!
Make sure you check out the Facebook Developers page on like buttons.

When this is done correctly, it should get the opengraph-data from that link and that would be fixed simultaneously.

You do have to make sure that the og-data is set correctly. (This is on the http://www.yoursite.net/articles/unique-article-id-goes-here-or-something-like-that page.)

<meta property="og:title" content="Title of the article" />
<meta property="og:type" content="article" />
<meta property="og:url" content="same-url-as-the-data-href-from-like-button" />
<meta property="og:image" content="url-to-image-you-would-like" />
<meta property="og:site_name" content="Name of your site" /

Good luck!