Turbolinksとソーシャルボタンでハマった（未解決）

作ってるサイトにTwitterのツイートボタンとFacebookのいいねボタンを設定してみた。公式ページのコード片をコピーするだけで、初回のページ描画ではうまく動作するようになったが、ページ遷移すると動作しない。

例のごとくTurbolinksが原因のようす。

Turbolinksはもうほんますぐハマる。やれやれ。

経緯

Twitter/Facebookともに、貼り付けるコードはHTMLとJSを含む。 JS部分ではどちらも、scriptタグをheadに追加しているだけのようだった。なので要はそれをページ遷移のたびに呼び出せばいいのだろうと思った。

ということで$(document).on('page:change', init)として、init関数内で上記の動作をさせてみた。公式からコピペしたコード（ミニファイされてる）を読みやすく整形した感じ。

これでTwitterは動いた。Facebookは動かない。

以下個別に書く。

Twitter

書いたコードはこんな感じ。reload_social関数を上で書いたinit関数で呼び出している。

var reload_social = function () {
    reload_script_tag('twitter-wjs', 'http://platform.twitter.com/widgets.js')
    reload_script_tag('facebook-jssdk',
        '//connect.facebook.net/ja_JP/sdk.js#xfbml=1&version=v2.3')
}

var reload_script_tag = function (id, src) {
    var old = document.getElementById(id)
    if (old && old.parentNode) { old.parentNode.removeChild(old) }
    var js = document.createElement('script')
    js.id = id
    js.src = src
    var fjs = document.getElementsByTagName('script')[0]
    fjs.parentNode.insertBefore(js, fjs)
}

これで一応動いているように見えるものの、本当にこれでいいのかイマイチ確信がない。

Turbolinks Compatibility with Twitterに記載されているように、ちゃんとした対策みたいなものも存在するようだけど、上のコードで済むならこれでいいような気もする。

要は、上のコードでいいならそれが一番楽だけど、イマイチ確信が持てない。じゃあちゃんとした対策をコピペすればいいじゃないかと思うけど、内容を理解せずにコピペするのは嫌。でもツイートボタンだけのために色々と細々としたことを調べるのは面倒だ、という葛藤。

Facebook

いくつか記事を読んだ。

どれも基本的に同じような感じで、APP_IDとか出てきちゃってる。いいねボタンを設置するためだけにアプリのIDを取得して設定しないといけないのか。。不便。

そもそもTwitterではいけた上の方法で動作しない理由がよくわからない。初回の描画はうまくいく。初回と二回目以降の違いはなんだろう。

まとめ

選択肢はいくつかある。

Turbolinksをオフにする
対策をあほになって調べないままコピペする
対策をちゃんと調べながらコピペする
ソーシャルボタン設置をやめる

Turbolinksオフは今のところ考えてない。ボタンの設置中止は正直アリなんじゃないかという気はする。設置したところでなんなの？って感じだし。Facebookはもうほぼ中止かなー。でもちょっと悔しい。

まあ寝て明日どうするか考えよう。

追記

続き書いた。

<a href="http://yamacent.hatenablog.com/entry/2015/06/10/175433">Turbolinksとソーシャルボタンについての続き - light log</a>yamacent.hatenablog.com