WordPressなどのブログやWebサイトにTwitterのTweetを埋め込む方法

TwitterのツイートをブログやWebサイトに埋め込む方法を紹介します。

方法は3つ、Twitter公式のものを使う、WordPress用のプラグインを使う、ブックマークレットを使う。いずれも一長一短あるので、お好きなものを選択してみて下さい。

Twitter公式の埋め込み機能

方法は簡単です。埋め込みたいツイートの詳細を選択し、「その他」→「ツイートをサイトに埋め込む」をクリック

プレビューが表示され、自動的にHTMLタグが選択された状態になるので、そのまま貼り付ければOKです。なお、「メディアを含める」にチェックが入っている場合は、画像や動画やTwitter Cardsが展開された状態で埋め込まれます。

Sample

とりあえず作った SemiAuto-tethered Jailbreak tool for iOS 7.0.4/7.1beta1 only iPhone 4 (for Mac) http://t.co/WHVtVz9nUx pic.twitter.com/D5eNoMml4K

— ichitaso@Ifrit (@ichitaso) 2013, 12月 9

@から始まるReplyのツイートに、返信したツイートをブログに埋め込みたい場合、「元のツイートを含める」にチェックすればOKです。

Sample

@winocm the same reason everyone's on iOS 6.1.3-6.1.4

— Thientam Bach (@Surenix) October 9, 2013

埋め込むTweetの幅を変える

以下のように「width="変えたい幅"」としてあげればOK

<blockquote class="twitter-tweet" width="350">
<p>[ツイートの本文]</p>
&mdash; [名前] ([ユーザー名]) <a href="[該当ツイートへのURL]">[日付]</a>
</blockquote>
<script async src="//platform.twitter.com/widgets.js" charset="utf-8"></script>

その他、「aling="left"」「align="center"」「align="right"」のいずれかでツイートの表示させる位置を選択できます。

<blockquote class="twitter-tweet" align="leftt">

Linkを含むツイート

<blockquote class="twitter-tweet" data-link-color="色コード">

背景の色を変更

また、ブログが黒背景の場合は、テーマの色を黒にすることができます。

<blockquote class="twitter-tweet" data-theme="dark">
<p>[ツイートの本文]</p>
&mdash; [名前] ([ユーザー名]) <a href="[該当ツイートへのURL]">[日付]</a>
</blockquote>
<script async src="//platform.twitter.com/widgets.js" charset="utf-8"></script>

公式の場合、Javascriptで展開してHTMLを整形している分、いろいろと応用が利きますが呼び出すための負荷は掛かってしまいます。

WordPress用プラグイン Twitter Blackbird Pie

こちらは、WordPress専用になりますが、古くから利用されているサービスです。ダッシュボードから「プラグイン」→「新規追加」→「Twitter Blackbird Pie」と検索すれば出てきます。

利用方法は、簡単です。記事を作成するときに、ツイートを埋め込みたい場所へ「ツイートの個別URL」をペーストしてあげればOKです。

https: //twitter.com/winocm/status/388499914935652352

ただし、そのままでは「There was a problem connecting to Twitter.」となって使えないため、少し修正を加えてあげます。

プラグインの編集をクリック→「twitter-blackbird-pie/blackbird-pie.php」で、「api.twitter.com」の部分を検索して「cdn.api.twitter.com」にしてあげましょう。

$request_url = "http://cdn.api.twitter.com/1/statuses/show.json?id={$id}";

https://twitter.com/winocm/status/388499914935652352

そうすると、このようにHTMLを生成してくれるようになります。

ブックマークレットを使用する方法

こちらは、どんなブログ・サイトでも簡単に貼り付けることができます。

下記Linkをブックマークバーにドラッグ＆ドロップしてください。

使用方法は、個別のTweetページでブックマークレットを実行するとHTMLタグが生成されます。

HTMLが自動生成されるので、そのまま貼り付ければOKです。

追記：Firefoxの場合、以下の様な設定が必要になります。

以上、参考になれば幸いです。