Facebook Like button to like individual content items on an index/list page_问答_开发者

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

开发者 https://www.devze.com 2023-01-22 04:53 出处：网络

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 individu

相关专题：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?

开发者_Python百科

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.

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>

Put this after each content:

  <div class="fb-like" data-href="unique_url_here_for_the_content" data-send="true" data-layout="button_count" data-width="100" data-show-faces="true"></div>

replace "unique_url_here_for_the_content" with the actual url of the content

To modify data-* atrribute please go to fb like plugin page here

and of couse you need to use this after 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/en_US/all.js#xfbml=1";
 fjs.parentNode.insertBefore(js, fjs);
 }(document, 'script', 'facebook-jssdk'));</script>