Twitterのウィジェットを自分のブログに埋め込む方法


公開日:  最終更新日:2017/03/17

ブログや自分のサイトを持っていると、そのブログに自分のTwitterのタイムラインを表示し、ブログ経由でフォロワーを増やすことができます。

そこで自分のブログに自分のTwitterのタイムラインを表示する方法を紹介したいと思います。

 

Twitterのタイムラインをブログに埋め込む方法

Twitterのウィジェットには自分がツイートしたタイムラインの他、特定のワードでツイートされたツイートも表示することが可能です。例えばこのブログは「さる吉のIT日記」というタイトルのため「さる吉」や「さる吉IT日記」というワードでツイートされた場合のタイムラインを表示することができます。

 

特定のユーザーのツイートを表示する方法

Twitterの設定(https://twitter.com/settings/widgets)へアクセスします。ウィジットのページを開き、新規作成→検索

 

検索クエリの入力欄に自分のTwitterアカウントを入力します。右側にプレビューが表示されますが、ここにアカウントを入力してもプレビューが表示されない場合は「トップツイートのみを表示する」にチェックを入れてみて下さい。

 

ウィジットを作成をクリックすると、右側にコードが表示されるのでこのコードを自分のブログの好きな位置に貼り付けるだけです。

 

 

また、テーマは「明るい・暗い」から選択でき、リンクの色もコードを入力することで好きな色にすることができます。

 

 

このようになります。


 

特定のワードやハッシュタグを含むツイートを表示する方法

検索クエリの欄に表示したいワードやハッシュタグを入力することでそのワードに言及されたツイートを表示することができます。

これでTwitterでのエゴサーチを表示するということも可能です。

 

 

作成したタイムラインを編集すると自動的に埋め込まれたウィジットも変わる

こちらが作成されたウィジェットの一覧ですが、このウィジットを編集すると埋め込んだブログのコードの貼替えをしなくても自動的に埋め込まれたウィジェットが変更されるため、ウィジットを変更してもわざわざコードの貼替えをする必要はありません。

いくつかのバージョンを作ろうと思って、1つのウィジェットだけを編集して貼り付けというのを繰り返しても最後に作ったウィジットが全ての場所に表示されるようになるため、ウィジェットごとに作らなければいけません。

 

 

 

個別のツイートを表示する場合

タイムラインではなく、このツイートのみをブログに貼り付けたい場合の方法を紹介します。

貼り付けたいツイートの「v」をクリックし→ツイートをサイトに埋め込む

 

表示されたコードをブログのhtml編集画面に貼り付けます。

 

また、WordPressやはてなブログに関しては「ツイートへのリンクをコピー」で表示されたリンクをコピーし、ブログを書いている画面にそのままそのリンクを貼り付けても表示されます。

ただしWordPressのバージョンによって反映しない場合もあります。

 

このような形になります。

 

 

【旧情報】Twitterのタイムラインのウィジェットを日本語にする方法

この情報は2013年時の情報になりますが、もしタイムラインが英語表記になる場合はこの方法を試してみて下さい。

tweet

 

取得したコードに『lang=”jp”』を追加するだけで日本語表示になるとのこと。

赤文字のところが追加したコードとなります。

 

<a  href=”https://twitter.com/saruyoshinanoda”  data-widget-id=”123456789123456″ lang=”ja”>@saruyoshinanoda からのツイート</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>

 

追加したのがこちら。

ちゃんと日本語になりました。

tweet2

 

関連記事

Twitterのツイート数が正式に表示されなくなりました

Twitterの「お気に入り」が「いいね」に変更

TwitterとFacebookのアイコンを使いたいときは公式サイトからダウンロードできる

 

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

最後まで読んでいただいてありがとうございました!
もし気にいってもらえたらこのブログのRSS登録やフォローをお願いします。

follow us in feedly

コメント一覧

  1. 匿名 より:

    land jpになってますよ

コメントはこちらからお願いします

メールアドレスが公開されることはありません。

PAGE TOP ↑