Rails / Turbolinks を使いつつもフェイスブックの Page Plugin を設置する

Shunsuke Sawada

なにやら Facebook のライクボックスが
Page Plugin なるものに変わるそうで(変わった?)。

今のところ Like box も動いてるけど、対応してみました。

  
Screen Shot 2015-07-01 at 10.27.40 PM

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_IDYOUR_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
↑フェイスブックのプラグインいろいろ

54
Shunsuke Sawada