【问题标题】:Facebook Multiple Like Buttons On A Single PageFacebook 单个页面上的多个赞按钮
【发布时间】:2012-10-14 03:36:13
【问题描述】:

我有一个页面需要大约 3 个 Facebook Like 按钮。

他们都喜欢不同的网址。

如何为每个赞按钮选择不同的个人资料图片(将在 Facebook 上显示的图片)。

有什么帮助吗?

【问题讨论】:

  • 那些不同的like按钮是否都指向同一个URL?那么不可能,OG 元信息与 URL 相关联。
  • 不是所有的like按钮都指向不同的URL。
  • 那么问题出在哪里?在每个 URL 上设置不同的 OG 元标记。
  • 但是所有类似的按钮都在同一个页面上?
  • 那又怎样?喜欢按钮嵌入的位置并不重要,重要的是它指向的位置。

标签: php javascript facebook facebook-like thumbnails


【解决方案1】:

其他页面的like按钮的缩略图由其他url上的og.image设置。

所以,如果您喜欢 example.com/puppies,FB 会使用该网址中的 OG 数据,无论您身在何处。


来自http://ogp.me/

要将您的网页变成图形对象,您需要将基本元数据添加到您的网页。我们基于 RDFa 协议的初始版本,这意味着您将在您的网页中放置额外的标签。每个页面的四个必需属性是:

og:title - 应出现在图表中的对象的标题,例如“The Rock”。

og:type - 对象的类型,例如“video.movi​​e”。根据您指定的类型,可能还需要其他属性。

og:image - 应在图表中代表您的对象的图像 URL。

og:url - 对象的规范 URL,将在图中用作其永久 ID,例如“http://www.imdb.com/title/tt0117500/”。

【讨论】:

  • 我对此有些困惑。实际上,我在单个网页上为不同的网址提供了多个类似按钮。你能告诉我如何做到这一点的例子吗?
  • 在您网站上每个单独页面的标题中,您有一个生命按钮,您需要添加打开的图表数据。 developers.facebook.com/docs/opengraph/objects/#publish
  • 但是我在每个单独的页面上都有两个点赞按钮??
  • 没关系。他们将使用您喜欢的实际 URL 中的数据。
【解决方案2】:

最后我以自己的方式解决了这个问题。

我做的是……

  1. 传递一个额外的参数以及要被喜欢的 url。参数 包含该链接的唯一标识符。

  2. 检查该页面的每个请求的参数。如果找到,则相应地设置元标记。

【讨论】:

  • 你没有,@CBroe 上面有
【解决方案3】:

示例代码:

<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&appId=xxxxxxxxx";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>

<div class="fb-like" data-href="http://www.example1.com" data-send="false" data-width="450" data-show-faces="true"></div>

<div class="fb-like" data-href="http://www.example2.com" data-send="false" data-width="450" data-show-faces="true"></div>

<div class="fb-like" data-href="http://www.example3.com" data-send="false" data-width="450" data-show-faces="true"></div>

【讨论】:

  • 如何为类似按钮选择图片?
猜你喜欢
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
相关资源
最近更新 更多