当前位置：文江博客话题详情

Facebook 点赞按钮，用于点赞索引/列表页面上的各个内容项

发布于 2024-09-29 12:00:24 字数 251 浏览 3 评论 0原文

我们希望实现一个包含内容项列表的页面，显示每个内容项的标题和摘录。我们希望每个内容项旁边都有一个“喜欢”按钮，单击该按钮时，“喜欢”单个项目，而不是索引页。

我们已经在其他地方看到了这个实现（以前是 Mashable.com，在他们的主页上），但是使用标准实现我们无法让它工作。有人有什么建议吗？

我们正在使用 PHP/Symfony。

注意：我不是程序员，所以这个问题不是用技术语言来表达的——但是任何答案都将传递给能够理解它们的程序员。

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

￡烟消云散 2024-10-06 12:00:24

您只需在页面上的每个“like”按钮上设置 href 属性即可。例如，

<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>

如果每个按钮都有自己的 href，那么每个按钮将独立运行。如果您不包含 href，则“赞”按钮会假定您喜欢正在查看的当前页面。

此外，您应该在您喜欢的每个网址上实施开放图形协议。我指的是“赞”按钮的 href 中的 url，而不是“赞”按钮所在的页面。您可以在这里阅读相关内容：http://developers.facebook.com/docs/opengraph

做起来很简单。您只需将元标记添加到页面标题中，如下所示：

<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>

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>

回复收藏 0 原文

走过海棠暮 2024-10-06 12:00:24

将其放在每个内容之后：

  <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>

将“unique_url_here_for_the_content”替换为内容的实际 url

要修改 data-* atrribute，请转到 fb like 插件页面这里

当然你需要在 body 标签之后使用它

 <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>

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>

回复收藏 0 原文

~没有更多了~