2014年4月 6日 14:49

Twitterのカスタムタイムラインをブログに貼り付ける方法。簡単Twitterまとめ

未確認で進行形 コミックアンソロジー VOL.2 (IDコミックス DNAメディアコミックス)

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もありますが、重いし見た目悪いしでブログに貼るのは向かないです。

英語ページですが、カスタマイズ方法の詳しいページもあります。

便利&役立カテゴリの他の記事はこちら。

スポンサードリンク

news