С чего начать: добавление кнопки на Facebook для каждой страницы

Question

У меня есть сайт, на котором пользователь отправляет цитату, каждая цитата добавляется в список и имеет свою собственную страницу после создания. URL-адрес для каждой цитаты выглядит следующим образом: http://example.com/quote-231

Мой клиент хочет, чтобы каждая цитата имела свою собственную кнопку, которая отображается на главной странице и самой странице цитаты. Каждая цитата имеет свой собственный идентификатор.

Я пробовал читать 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] это адрес вашей цитаты.

Это версия iframe. Существует также js один.

Вы можете прочитать больше здесь: https://developers.facebook.com/docs/reference/plugins/like/. Там вы найдете генератор кода.

Answer 3

Создайте код с помощью этого инструмента http://developers.facebook.com/docs/reference/plugins/like/, а затем просто установите текущий URL-адрес на странице вывода.

Answer 4

Вы прочитали docs? Я предпочитаю реализацию JS функциональных возможностей FB, поэтому следующие фрагменты кода основаны на 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> 

Вышеуказанные параметры могут быть изменены в соответствии с вашими потребностями, но вы должны получить работу.