從哪兒開始：添加Facebook的喜歡按鈕的每一頁

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> 

退房Facebook文檔爲不同的og:type個選項。

希望有幫助嗎？

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]是你報價的URL。

這是iframe版本。還有一個JS。

你可以在這裏閱讀更多：https://developers.facebook.com/docs/reference/plugins/like/。在那裏你會找到一個代碼生成器。

Answer 3

使用此工具http://developers.facebook.com/docs/reference/plugins/like/創建代碼，然後只設置你的輸出頁面上的URL。

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> 

上面的設置可以編輯，以適應您的需求，但應該讓你開始。