Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Facebook Like button to like individual content items on an index/list page

Tags:

facebook

We wish to implement a page with a list of content items, showing a title and excerpt for each one. We want to have a Like button next to each content item, which, when clicked, "likes" the individual item, rather than the index page.

We've seen this implemented elsewhere (formerly Mashable.com, on their homepage), but using a standard implementation we can't get it to work. Does anybody have any tips?

We are using PHP/Symfony.

NB: I'm not a programmer so this question isn't framed in technical language - however any answers will be passed to programmers who will be able to understand them.

like image 803
MichaelJ Avatar asked Oct 26 '10 10:10

MichaelJ


1 Answers

You just need to set the href attribute on each like button on your page. For example,

<script src="http://connect.facebook.net/en_US/all.js#xfbml=1"></script>
<fb:like href="http://www.example.com/item1"></fb:like>
<fb:like href="http://www.example.com/item2"></fb:like>
<fb:like href="http://www.example.com/item3"></fb:like>

If each button has its own href then each button will behave independently. If you don't include the href then the like button assumes you are liking the current page you are viewing.

Additionally, you should implement the open graph protocol on each url you have a like for. By this I mean the url in your like button's href, not the necessarily page the like button is on. You can read about this here: http://developers.facebook.com/docs/opengraph

It is pretty simple to do. You just add meta tags to your pages header like this:

<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:og="http://opengraphprotocol.org/schema/"
      xmlns:fb="http://www.facebook.com/2008/fbml">
  <head>
    <title>The Rock (1996)</title>
    <meta property="og:title" content="The Rock"/>
    <meta property="og:type" content="movie"/>
    <meta property="og:url" content="http://www.imdb.com/title/tt0117500/"/>
    <meta property="og:image" content="http://ia.media-imdb.com/rock.jpg"/>
    <meta property="og:site_name" content="IMDb"/>
    <meta property="fb:admins" content="USER_ID"/>
    <meta property="og:description"
          content="A group of U.S. Marines, under command of
                   a renegade general, take over Alcatraz and
                   threaten San Francisco Bay with biological
                   weapons."/>
    ...
  </head>
  ...
</html>
like image 94
Nathan Totten Avatar answered Nov 15 '22 09:11

Nathan Totten