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> |
まとめ
猫ITソリューションズは、集英社と東映アニメーションとDCコミックスとマーベル・コミックから仕事が受注できなくなった気がします。許してニャン♥
代表齊藤談：いや、ドラゴンボールも東映まんが祭りもジャスティス・リーグ・アンリミテッドもディスク・ウォーズ:アベンジャーズも大好きですから、、、
