OneDay

40歳からプログラマとして生活しています。

Rails APPにTwitter ウィジェットを埋め込む -Turbolinks-

Rails AppにTwitterのタイムラインを埋め込んでいます。
その埋め込んだページを表示すると"@nograve_netさんのツイート"といったリンクしか表示されない現象が出ました。


RailsのTurbolinks機能に乗っかるためのcoffeescript設定が漏れていたのです。


ベースとなるのはタイムライン埋め込みのコードです。
ログイン後、このurlから生成します。https://twitter.com/settings/widgets/new

<a class="twitter-timeline" 
href="https://twitter.com/nograve_net" data-widget-id="固有の番号">
@nograve_netさんのツイート
</a>
<script>
!function(d,s,id){
    var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';
    if(!d.getElementById(id)){
        js=d.createElement(s);
        js.id=id;js.src=p+"://platform.twitter.com/widgets.js";
        fjs.parentNode.insertBefore(js,fjs);
    }
}(document,"script","twitter-wjs");
</script>


この埋め込みコードを利用して、Rails APPに実装します。

viewの例

<%#app/views/hoge.html.erb%>
<div class="twitter-timeline-container"
  data-widget-id="固有の番号"
  data-widget-options="<%= { borderColor: '#abcdef' }.to_json %>">
  @nograve_netさんのツイート
</div>


CoffeeScriptの例

#app/assets/javascript/twitter.js.coffee
$ ->
  loadTwitterSDK()
  $(document).on 'page:change', renderTimelines

loadTwitterSDK = ->
  $.getScript "//platform.twitter.com/widgets.js", ->
    renderTimelines()

renderTimelines = ->
  $('.twitter-timeline-container').each ->
    $container = $(this) 
    widgetId = $container.data 'widget-id'
    widgetOptions = $container.data 'widget-options'
    $container.empty()
    twttr.widgets.createTimeline widgetId, $container[0], widgetOptions 

最後の行の公式は、Scripting: Factory Functions | Twitter Developersを参考にしました。
loadTwitterSDKという関数にあるurlですが、javascriptを使用する際はwidgets.jsをloadする必要があります。Web Intents | Twitter Developers


widgets.jsの取り込みはview側に書いても動作します。

<%#app/views/hoge.html.erb%>
<div class="twitter-timeline-container"
  data-widget-id="固有の番号"
  data-widget-options="<%= { borderColor: '#abcdef' }.to_json %>">
  @nograve_netさんのツイート
</div>
<script src="//platform.twitter.com/widgets.js"></script>
#app/assets/javascript/twitter.js.coffee
$ ->
  $(document).on 'page:change', renderTimelines

renderTimelines = ->
  $('.twitter-timeline-container').each ->
    $container = $(this) 
    widgetId = $container.data 'widget-id'
    widgetOptions = $container.data 'widget-options'
    $container.empty()
    twttr.widgets.createTimeline widgetId, $container[0], widgetOptions 


参考にさせていただいたurldev.twitter.com
github.com