Twitterで映画の感想をいくつかツイートしたので一つにまとめてブログに載せたい、などといった場合に便利なWebサービスを試してみました。本日は「比較:Twitterコレクション/タイムライン機能で複数ツイートを1つにまとめてブログに埋め込み」についてです。
こんにちは。猫ITソリューションズ広報の齊藤メイ(♀)です。本日は、「比較:Twitterコレクション/タイムライン機能で複数ツイートを1つにまとめてブログに埋め込み」についてです。
まとめ?どういうこと?という方はまずこちらをご覧ください。
Twitter、複数のツイートを1つのストーリーにまとめて簡単にウェブサイトに埋め込めるAPI/ツール -INTERNET Watch
なるほどわからんですね。
上記ページ下部にはサンプルもあるのですが、いまいち分からないかと思います。まとめ作業にかかる時間を大幅に短縮できる素敵なサービスなんですけどねー。
という訳で、代表齊藤のツイートをサンプルにしたまとめを作ってみました。作成を可能とするWebサービスは世の中にたくさん在りますが、代表的かと思われるWebサービスを使ったサンプルと作成方法を3つほどご紹介します。
※本記事ではAPIは利用しません。Webサービスのみでの作成になります。
例01:collection(Webサービス)を利用
作成方法:
- TweetDeckにて、add column > Collections > Enter Tweet URL で対象とするツイートURLを入力
- 各カラムメニューより、Share > Embed Collection
- ↑から開かれたTwitter Publishより、Copy Code
- コピーしたコードをブログに貼り付け
1 2 |
<a class="twitter-grid" href="https://twitter.com/_/timelines/663162768132931584">A Collection on Twitter</a> <script async src="https://platform.twitter.com/widgets.js"></script> |
例02: Twitterタイムラインを利用
作成方法:
- TweetDeckにて、add column > Collections > Enter Tweet URL で対象とするツイートURLを入力
- 各カラムメニューより、Share > View on twitter.com
- ↑から開かれた「Twitterコレクションのプレビュー」より、リンク「このコレクションをサイトに埋め込む」押下
- ↑から開かれた「コレクションウィジェットを作成」よりカスタマイズ後に、ボタン「ウィジェットを作成」押下。
- 表示されたコードをコピーして、ブログに貼り付け
1 2 3 4 |
<a class="twitter-timeline" href="https://twitter.com/xaitoh/timelines/663162768132931584" data-widget-id="663173718764470273"> 映画「ドラゴンボールZ 復活の「F」」 </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> |
例03: Twitterタイムラインを利用(カスタマイズ)
作成方法:
- TweetDeckにて、add column > Collections > Enter Tweet URL で対象とするツイートURLを入力
- 各カラムメニューより、Share > Embed Collection
- ↑から開かれた「Twitterコレクションのプレビュー」より、リンク「このコレクションをサイトに埋め込む」押下
- ↑から開かれた「コレクションウィジェットを作成」よりカスタマイズ後に、ボタン「ウィジェットを作成」押下。
- 表示されたコードをコピーして、ブログに貼り付け
- 貼り付けたコードのaタグに属性として、
1data-chrome="noscrollbar transparent" data-tweet-limit="9999"
参考:
https://dev.twitter.com/web/embedded-timelines#customization
1 2 3 4 |
<a class="twitter-timeline" href="https://twitter.com/xaitoh/timelines/663162768132931584" data-widget-id="663167245573472256" data-chrome="noscrollbar transparent" data-tweet-limit="9999"> 映画「ドラゴンボールZ 復活の「F」」 </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> |
まとめ
代表齊藤談:いや、ドラゴンボールも東映まんが祭りもジャスティス・リーグ・アンリミテッドもディスク・ウォーズ:アベンジャーズも大好きですから、、、