Twitterのツイートを自分のサイトやブログに埋め込む(埋め込みツイートの利用)方法

【この記事を読むのに必要な時間は約 3 分です。】

自分のブログに、画像を貼り付けてモーダルエフェクトを追加してみたり、YouTube動画を埋め込んでみたりと、外部と連携して少し動きをつけたりするのはとても楽しい。
今回は、Twitterのツイートを埋め込むという知ってそうで案外知らない小技を紹介する。
知ってみると案外簡単なことなんだが・・・

埋め込みツイートの概要

埋め込みツイートを使うと、自分のサイトやブログにツイートを埋め込むことができる。
埋め込みツイートは、「写真、動画、ツイートの概要などの追加メディアと一緒に埋め込まれる。リツイートやお気に入り登録の件数などもリアルタイムで表示される。
埋め込みツイートはインタラクティブに操作でき、埋め込みツイートを読んだ訪問者は、ページ上で直接、埋め込みツイートユーザーのフォロー、返信、リツイート、お気に入り登録などを行うことができる。

下が、実際に埋め込みツイートを利用したもの。
これは、画像付きで上のツイートに返信したツイートを埋め込んだもの。
返信のツイートを埋め込むとデフォルトでは、元ツイートも一緒に表示される。

埋め込みツイートにする方法

まず最初に埋め込みたいツイートの下部右端にある「・・・その他」をクリックする。

1

プルダウンメニューが現れるので、「ツイートをサイトに埋め込む」をクリックする。

2

すると新たなウィンドウが開く。

3

上の枠で囲んだ中のハイライトされた部分を自分のサイトやブログにコピー&ペーストして完了。

2013年11月現在、赤枠で囲んだ部分のチェックボタンが機能していないので、次で、チェックを外したのと同じ状態にする方法を説明する。

「メディアを含める」のチェックをはずした状態にする方法

data-cards=”hidden”を以下のように追加する。


<blockquote class="twitter-tweet" data-cards="hidden">

「元のツイートを含める」のチェックをはずした状態にする方法

data-conversation=”none”を以下のように追加する。


<blockquote class="twitter-tweet" data-conversation="none">

両方のチェックをはずした状態にする方法

いうまでもないが、二つとも追加すればよい。


<blockquote align="center" class="twitter-tweet" data-cards="hidden" data-conversation="none">

以上とても簡単にできる。デザインなどはCSSをカスタマイズしてやれば比較的簡単にできる。また機会があれば説明する。

Related Posts Plugin for WordPress, Blogger...

もし良ければお願いします。

  • このエントリーをはてなブックマークに追加

良かったらフォローお願いします。

コメント