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

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

何かありましたらコメントをどうぞ

comments powered by Disqus

人気の記事

950 Points チリ出身のギタリストが弾くドラゴンボールZがむちゃくちゃかっこいい…
774 Points Wordpress + Heroku + PostgreSQL + Amazon S3 = ¥0 / 無料でサイト運営
700 Points Rubyのチートシート 変数 / クラス / モジュール
524 Points Rubyのチートシート / アクティブサポート
451 Points 紙のデザイナーがウェブ開発できるようになるまでに必要なこと
435 Points Rails / Google Analyticsのデータを使って分析や管理画面のためのグラフをつくる
323 Points RailsとHerokuでノーティフィケーションをプッシュする / PusherとTurbolinksの兼ね合い
222 Points Rails / RSpec テスト書いたことない メンドクサイ(n´Д`)という時のチートシート
193 Points Rails / Ajaxを使って画面遷移しない一時保存機能をつける
193 Points Protractorでスクレイピングしてみた