Twitterの新しいコレクション埋め込みツールの使い方! いろいろ使いどころがありそうだ

おおー、これは使い方しだいでいろいろできそうです。
Twitterのコレクション機能で作成したコレクションを使って、ツイートの写真をグリッドスタイルにして埋め込むことのできる公式ツールが登場しました。
通常のウィジェットを使うよりも、写真付きツイートをより目立たせて埋め込むことができるようになったんですよ。

ちょっとわかりにくいと思うので、早速試しに作って埋め込んでみたのが以下のものになります。

我が家の愛すべきニャンコたちの写真ツイートをコレクションしたものです。
グリッド表示された写真それぞれに、投稿した時のテキストも小さく表示されていますが、写真にカーソルを合わせると、写真右上にLikeアイコンも表示されます。

どうやって埋め込みコードを作るのか?

ということで、早速どのように埋め込みコードを発行するのかを解説していきたいと思います。

1. コレクションを作成する

まずはツイートのコレクションを作成する必要があります。
そもそもですが、このコレクション機能って意外と知られてないんですよね。

それもそのはずで、公式機能ではあるものの、そもそも作成方法が非常に特殊というかなんというか。。だってWeb版Twitterにしてもアプリ版にしても作成メニューがないんですよ。

「じゃあどうやって作るのさ?」ってことなんですが、作成方法は2通りあって、ひとつはAPIを利用するという難易度高めな方法。そしてもうひとつがTweetDeckを利用する方法。圧倒的に後者がラクなので、解説はTweetDeckを使うやり方で進めていきます。APIに興味があるという人は、以下のページを読むと良いでしょう。

TweetDeckは以前Twitterが買収したサービス。アプリケーションでも利用できるので、常用している人も多いのではないでしょうか。

Tweetdeck add collection

今回はWebクライアントで解説を進めていきますが、TweetDeckを開いたら、左側にあるメニューバーの[+]をクリックしましょう。
するとモーダルで[Choose column types]が表示されるので、右下にある[Collections]をクリックして、画面上にコレクションのカラムを追加します。

New collections column

こんな感じで一番右側に新しいコレクションのカラムが作られるので、あとはコレクションの名前や概要を入れて、コレクションしたいツイートをドラッグ&ドロップしていくだけです。

自分自身のツイートはもちろんですが、自分以外のユーザーのツイートも追加できるので、キーワードやハッシュタグで検索して写真付きツイートだけ選んで放り込むことも可能ですよ。

これでひとまず準備は完了です。

2. コレクションの埋め込みコードを取得する

続いて作成したコレクションの埋め込みコードを取得します。
これもTweetDeckでさくりと取得が可能なのですが、上のような新しいグリッドスタイルのコレクションを貼り付けるツールが「Twitter Publish」というやつです。

ここにコレクションにユニークに振られるIDか、URLを入力することで埋め込みコードが発行されます。
とはいえ、いちいちIDとかURLを調べるのはめんどくさいですよね。ということでTweetDeckを使ってサクッとURLを送り埋め込みコードを取得しちゃいます。

Embed collection

作成したコレクションのカラム右上にあるアイコンをクリックすると、カラム設定が表示されます。ここに[Share]ってのがあるので、それをクリックすると3つの共有メニューが出てきます。

この中の[Embed collection]というのがそれ。
これをクリックすると、先ほどの「Twitter Publish」がコレクションのURL付きで開きます。

Twitter publish add url

あとは、ここに表示されている埋め込みコードをコピーし、ウェブサイトやブログにコードを貼り付ければOK。
javascriptのコードも一緒になってるので、すでに公式ツイートボタンを導入している場合は、貼付け後にそこは消しておくといいかも。scriptタグが重複しちゃいますしね。

写真付きツイートや動画付きツイートをごそっとまとめて表示するのに◎

ということで、上記の方法を使えば、自分のウェブサイトやブログの中で、いろいろな人によって撮られた写真や動画のツイートをまとめて見せることができるようになります。

以下はいしたにさん(masakiishitani)の「ひらくPCバッグ」の写真をまとめてみたコレクション。
いしたにさん、これなかなかいいまとめ方法じゃないですか? 何かの折にまとめるときはぜひ使ってみてくださいw

正直、TweetDeckはさほど利用してないんですが、この機能のためだけに常用してもいいかもしれないですね。

そんなわけで、新しく登場した「Twitter Publish」での埋め込み。みなさんもぜひ楽しんでみてくださいな。

「Twitter」新着記事

Twitter、投げ銭機能「Tip Jar」を実装

ホシナ カズキ

Twitter、縦長の画像をタイムラインでそのまま表示するように

ホシナ カズキ

Twitter、音声チャット機能「Spaces」を一般ユーザーも利用可能に

ホシナ カズキ

Twitterがフォロワーからのダイレクトメッセージ受信機能を復活

ホシナ カズキ

Twitterが動画投稿に対応してサイト・ブログへ動画単独で埋め込むことが可能に

ホシナ カズキ

もっと見る

モバデビはモバイルやウェブのネタ、ニュースMaciPhoneなどのApple関連、WordPressのことなど、いろいろ書く雑食系ブログメディア。
ためになるかもしれないし、ならないかもしれない。そこそこ更新してますそこそこ。

このブログについてもっと詳しく