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

      2016/03/17


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

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


Twitter公式の埋め込み機能


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


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

Sample


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

Sample


埋め込む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です。

Sort of like an iOS panic now. Sort of. Committing to NVRAM will be fun, and so will platform halt/restart. http://t.co/T2YppNoyi02013年10月11日 12:02 via Tweetbot for iOS


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

そうそう、Firefoxの場合だと安全でないコンテンツブロックって出るから、「about:config」→「security.mixed_content.block_active_content」をfalseにする必要があります。2013年11月1日 3:31 via TweetDeck


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

 

この記事が気に入ったら
いいね!しよう

最新情報をお届けします

Twitter でWillFeelTipsをフォローしよう!


  関連記事

Facebook「フィード購読」ボタンの設置方法

2011/12/09、Facebookの「フィード購読」ボタンが外部サイトに設置 ...

WordPressなどのブログで自分のサイトがはてブされた時に通知される設定方法

はてなブックマークは、自分のためにブックマークしておくだけではなく、コメント(ブ ...

LINEで気に入ったページを教えたい!Bloggerで簡単に共有できるボタンを設置する方法とブックマークレット

通話やメッセージを無料で利用できることから、利用者数が急速に拡大しているLINE ...

Blogに彩りを持たせるレコメンドリンクの設置 - zenback , LinkWithin , Outbrain

ブログを書くものとしては、一つ一つのエントリーが自分の創作物であり、愛情を持って ...

Bloggerでモバイル閲覧時のスワイプによるページ切り替えを無効にする

Google Bloggerでモバイルテンプレートを有効にすると、閲覧しやすいよ ...

 - Blogger