Question

我有一个用户提交报价的网站，每个报价都会添加到列表中，并且一旦创建就会有自己的页面。每个引用的URL如下所示：http://example.com/quote-231

我的客户希望每个报价都有自己喜欢的按钮，该按钮显示在主页面和报价页面上。每个引用都有它自己的id。

我试过阅读developer.facebook.com并且我无法理解我将如何为每个页面实现类似按钮，有人可以解释我需要做什么/找出/读取以使其工作我吗？

Answer 1

我在ColdFusion中对此进行了编码，但是您应该很容易适应PHP。这允许您自定义“喜欢”按钮的数据和显示的缩略图和描述。

在head标记内：

<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#"/>

在body标记内：

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

在body标记内（页脚末尾）：

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

查看不同og:type选项的Facebook文档。

希望有帮助吗？

Answer 2

您需要在引用页面模板上输入类似的内容：

<iframe src="http://www.facebook.com/plugins/like.php?href=[URL]&send=false&layout=button_count" style="border: medium none; overflow: hidden; width: 115px; height: 21px;" allowtransparency="true" frameborder="0" scrolling="no"></iframe>

其中[URL]是引用的网址。

这是iframe版本。还有一个js。

您可以在此处阅读更多内容：https://developers.facebook.com/docs/reference/plugins/like/。在那里你会找到一个代码生成器。

Answer 3

使用此工具http://developers.facebook.com/docs/reference/plugins/like/创建代码，然后在输出页面上设置当前网址。

Answer 4

你读过docs了吗？我更喜欢FB功能的JS实现，因此以下代码片段基于XFBML。

注册FB开发者帐户后，您可以注册您的网站，然后您可以在报价页面上拨打电话，类似于：

 // The script serving your quote content should have a method of retrieving 
 //  quote data.  It looks like you have some http rewrite rules in place for 
 //  pretty url, but you should still have access to the quote id
 //  something like
 $canonicalUrl = 'http://example.com/quote.php?id=' . $row['id']);

 <div class="yui3-u-1-2 facebookWrap">
     <div class="fb-like" data-href="<?php echo $canonicalUrl ?>" data-send="true" data-layout="box_count" data-width="450" data-show-faces="true"></div>
 </div>

并包含必要的JS以使您的按钮工作（这应该在您的页面的底部）：

<script type="text/javascript">
 window.fbAsyncInit = function() {
     FB.init({
         appId      : 'your_app_id', // App ID
         channelURL : '//yourhost.com/channel.html', // Channel File
         status     : true, // check login status
         cookie     : true, // enable cookies to allow the server to access the session
         oauth      : true, // enable OAuth 2.0
         xfbml      : true  // parse XFBML
     });

 // Additional initialization code here
 };

 // Load the SDK Asynchronously
 (function(d){
     var js, id = 'facebook-jssdk'; if (d.getElementById(id)) {return;}
     js = d.createElement('script'); js.id = id; js.async = true;
     js.src = "//connect.facebook.net/en_US/all.js";
     d.getElementsByTagName('head')[0].appendChild(js);
 }(document));</script>

上面的设置可以根据您的需要进行编辑，但应该让您入门。

从哪里开始：为每个页面添加类似Facebook的按钮

4 个答案: