Twitterのカスタムタイムラインをブログに貼り付ける方法。簡単Twitterまとめ
Twitter公式のツイートまとめ支援ツール
Togetterなどが有名ですが、Twitterの特定ツイートをまとめて公開する為のツールです。公式版がそこそこ軽いみたいで、個別にツイートを貼るよりも良さげです。
幅や高さの指定、カラーイメージなどちょっとしたカスタマイズも可能です。今回は例として、アニメ『未確認で進行形』の公式TwitterがRTしてたイラストをまとめておきました。
貼り付けイメージはこんな感じになります。
スポンサードリンク
カスタムタイムラインを作ろう。
作り方はGoogle ChromeのTwitterクライアントアプリ「TweetDeck by Twitter」を利用しています。
新しいカラムの追加をする「+」マークから「Custom timeline」を選びます。
新規に作る場合は「New custom timeline」が太字になっているか確認しましょう。ベースができると、タイトルを入力する部分が現れ、ツイートをドロップできるスペースも表示されます。
Tweet Deck内の各ツイートに十字矢印キーが出てくるので、この部分をクリックしながらドラッグ&ドロップでカスタムタイムラインに足していきます。
カスタムタイムラインをブログに貼る
カスタムタイムラインが出来上がったら、「Shear」から「Embed timeline」を選択します。
「カスタマイズされたタイムラインからのツイート」というページに飛ぶので、タイムラインの名前やテーマカラー(白ベースか黒ベースか)を編集し、「変更を保存」しておきます。
この時高さは気にしなくても良いです。後でいじります。
次に右下のHTMLコードをコピーして、ブログやWebサイトに貼り付けましょう。
<a class="twitter-timeline" class="twitter-timeline" href="https://twitter.com/akamiru_/timelines/441598440321982464" data-widget-id="452668240204820480">New Custom Timeline</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>
こんなコードになっています。幅と高さを変更したい場合はaタグの中にwidthとheightを足して下さい。
<a class="twitter-timeline" class="twitter-timeline" width="480" height="680" href="https://twitter.com/akamiru_/timelines/441598440321982464" data-widget-id="452668240204820480">New Custom Timeline</a>
これで幅480ピクセル、高さ680ピクセルで表示されます。
絶版後記
Twitterのスクリプトはいくつも貼ると重いので、まとめを作る時はこれが便利ですね。Togetterもありますが、重いし見た目悪いしでブログに貼るのは向かないです。
英語ページですが、カスタマイズ方法の詳しいページもあります。
スポンサードリンク