Rails / Turbolinks を使いつつもフェイスブックの Page Plugin を設置する
なにやら Facebook のライクボックスが
Page Plugin なるものに変わるそうで（変わった？）。
今のところ Like box も動いてるけど、対応してみました。
Railsでサイトを作るとSNSのシェアボタンとかは基本的に動かない。
最初の読み込みでは表示されてるように見えても、
クリック → 遷移後のページでは動いていないはず。
で、よくTurbokinks自体をオフにする方法も見るけど、
SNSボタン設置したいがために Turbolinks を使わないってのは何か違う。
せっかく早いのに。
↓ こういうやつね
ruby
1
<%= link_to "リンク", root_path, data:{ no_turbolink: true } %>
今回はそうじゃないやつです。
Facebook アプリ
Facebook Developers に行って、アプリを作る。
そのアプリを公開しておくことをお忘れなく。
開発モードだと上手くいきません。
Javascript
公式サイトではこんなコードを設置してくれと言われるけども
<script> ... </script> の部分はいらないので削除。
html
1
2
3
4
5
<div id="fb-root"></div>
<script>(function(d, s, id) {
// .... 省略
}(document, 'script', 'facebook-jssdk'));</script>
ということで <div id="fb-root"></div>だけ <body>直後に置くとよいかと。
app/assets/javascripts/social.coffee で下のように。
もちろん application.js でこのファイルを読み込んでください。
coffee
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
$ ->
loadFacebookSDK()
bindFacebookEvents() unless window.fb_events_bound
console.log 'everytime'
bindFacebookEvents = ->
$(document)
.on('page:fetch', saveFacebookRoot)
.on('page:change', restoreFacebookRoot)
.on('page:load', ->
FB.XFBML.parse()
)
window.fb_events_bound = true
saveFacebookRoot = ->
window.fb_root = $('#fb-root').detach()
restoreFacebookRoot = ->
if $('#fb-root').length > 0
$('#fb-root').replaceWith window.fb_root
else
$('body').append window.fb_root
loadFacebookSDK = ->
window.fbAsyncInit = initializeFacebookSDK
$.getScript("//connect.facebook.net/ja_JP/sdk.js#xfbml=1")
initializeFacebookSDK = ->
FB.init
version : 'v2.3'
appId : 'YOUR_APP_ID'
channelUrl: '//YOUR_WEBSITE_ROOT/channel.html'
status : true
cookie : true
xfbml : true
YOUR_APP_ID と YOUR_WEBSITE_ROOT を置き換えてください。
HTML
これは公式サイトでゲットできるHTMLと変わらない。
facebook-box のスタイルがなぜかCSSでコントロールできなかった。
なので、インラインで書いちゃいました。
ちなみに、500px幅が最大らしいです。
前みたいにサイト横幅いっぱいに配置するレイアウトはできなさそう。
レスポンシブなので、500px以下の環境では勝手にリサイズしてくれます。
html
1
2
3
4
5
6
7
8
9
<div class="facebook-box" style="margin: 0 auto;">
<div class="fb-page" data-href="https://www.facebook.com/footprints.note" data-width="500" data-height="320" data-small-header="false" data-adapt-container-width="true" data-hide-cover="false" data-show-facepile="true" data-show-posts="false">
<div class="fb-xfbml-parse-ignore">
<blockquote cite="YOUR_FACEBOOK_PAGE_URL">
<a href="YOUR_FACEBOOK_PAGE_URL">あなたのサイト名</a>
</blockquote>
</div>
</div>
</div>
こんな感じで、Page Plugin が設置できると思います。
それではー
参考
Turbolinks Compatibility with Facebook
↑基本的にはこれなんだけど、まんまだと動かない。
Social Plugins
↑フェイスブックのプラグインいろいろ