Question

I have a site where a user submit a quote, each quote is added in a list and has its own page once created. The URL for each quote looks like: http://example.com/quote-231

My Client wants each quote to have its own like button that is displayed on the main page and the quote page itself. Each quote has it’s own id.

I’ve tried to read developer.facebook.com and I can’t really understand how I would implement the like button for each page, can someone explain what I need to do/find out/read to get this working for me?

Answer 1

I’ve coded this in ColdFusion, but it should be very easy for you to adapt for PHP. This allows you to customise the thumbnail and description for the “like” button’s data and display.

Inside the head tag:

<meta property="og:title" content="Make Model"/>
<meta property="og:type" content="product"/>
<meta property="og:url" content="somedetailpage.php/id/#youruniqueid#"/>
<meta property="og:image" content="#thumbnailimageurl#"/>
<meta property="og:site_name" content="#sitename#"/>
<meta property="fb:admins" content="#facebookadminuserid#"/>
<meta property="og:description" content="#somedetailpageshortdescription#"/>

Inside the body tag:

<fb:like href="somedetailpage.php/id/#youruniqueid#" layout="button_count" show-faces="false" width="90" height="20" />

Inside the body tag (at the end in the footer):

<div id="fb-root"></div>
<script>
  window.fbAsyncInit = function() {
FB.init({appId: 'your app id', status: true, cookie: true,
         xfbml: true});
  };
  (function() {
var e = document.createElement('script'); e.async = true;
e.src = document.location.protocol +
  '//connect.facebook.net/en_US/all.js';
document.getElementById('fb-root').appendChild(e);
 }());
</script>

Check out the Facebook docs for the different og:type options.

Hope that helps?