Twitterのタイムラインを埋め込みする!ブログやホームページに表示するには?

あなたがTwitterだけでなくブログやホームページを運用していればTwitter上のタイムラインを連動させたくなるはず。そのためにはブログやホームページにタイムラインを見てもらうためのウィジェットを埋め込みましょう。今回はウィジェットび埋め込み方法をご紹介。

Twitterのタイムラインを埋め込みする!ブログやホームページに表示するには?のイメージ

目次

  1. 1Twitterの埋め込みウィジェットコードの作成方法は?
  2. 自分のTwitterユーザー名をサイトに貼り付ける
  3. 埋め込み用のコードが表示され、作成完了
  4. 2ホームページやブログに埋め込みする方法
  5. ワードプレスで埋め込む方法を紹介
  6. 3Twitterのタイムラインウィジェットをカスタマイズ
  7. ウィジェットの幅と高さを調節して表示サイズを変更
  8. ウィジェットの境界線の色を変更する
  9. その他のウィジェットパーツを変更する場合
  10. 4Twitterのタイムラインを埋め込んで上手く活用しよう!

Twitterの埋め込みウィジェットコードの作成方法は?

悩む女

ブログやホームページにあなたのタイムラインを見てもらうためには、ウィジェットというパーツを埋め込みます。ウィジェットとは、Androidスマホを利用している人ならご存じのように、単機能のちょっとしたプログラムのことです。

Twitterのウィジェットパーツを埋め込むことで、あなたのブログやホームページで、ほかの記事と一緒にあなたのタイムラインを見てもらえます

一方、ウィジェットパーツを埋め込んでない場合はタイムラインは表示されないので、あなたのTwitterアカウントをクリックしてわざわざTwitterのサイトに飛んでもらうことになります。自分の行動を考えれば、そんな手間をかけて見てもらえないことは当然のことでしょう。

去る人

ところがTwitterのウィジェットパーツを埋め込めば、記事を見たついでにあなたのタイムラインに目を通してもらう可能性がぐんと高まります。ブログやホームページを持っていてTwitterをやっているのであれば、ウィジェットパーツを埋め込まない理由がないのです。

ウィジェットを埋め込むためには、まず埋め込み用のHTMLコードを獲得しなければなりません。と言っても難しいことはまったくありません。「@」で始まるあなたのTwitterのユーザー名さえわかっていれば大丈夫なのです。

自分のTwitterユーザー名をサイトに貼り付ける

発行する

まずはTwitterのウィジェットコードを発行する「https://publish.twitter.com/#」にアクセスします。ウィジェットコードを「発行する」のでtwitter.comのサブドメインが「pubulsh」となっていま

https://publish.twitter.com/#
publish.twitter.com

このページの記入欄に、「@」で始まるあなたのTwitterユーザー名を​​​入力してエンターキーを押すか、右端の矢印をクリックします。入力時に「@」を付け忘れると、次の画面でタイムラインの埋め込みオプションが表示されないので間違えないようにしましょう。

この時、
 

  • 「@あなたのユーザー名」を入力すれば、あなたのタイムライン
  • 「@ほかの人のユーザー名」を入力すれば、そのユーザーのタイムライン
  • 「https://tiwtter.com/あなたのユーザー名/like」を入力すれば、あなたのお気に入りが並んだタイムライン
  • 「https://あるツイートのアドレス」を入力すれば、そのツイート

の埋め込み用のHTMLコードが入手できます。

ユーザー名の入力

すると画面がスクロールしてオプション選択画面となります。左側の「Embedded Timeline(タイムラインの埋め込み)」をクリックします。間違えて右の「Twitter Buttons(ツイッターボタン)」をクリックするとタイムラインは表示されないので注意してください。

タイムラインの埋め込みを選択

埋め込み用のコードが表示され、作成完了

オプションを選択すると、再び画面がスクロールしてブログやサイトに埋め込むためのウィジェットコードが発行されます。

埋め込み用コードの取得

埋め込み用のHTMLコードをクリックすると、コードが自動的にコピーされます。ショートカットキーや右クリックの要らない親切設計で、コードを入手できました。

ホームページやブログに埋め込みする方法

クリップボードにコピーされたTwitterの埋め込み用HTMLコードですが、今度はブログやホームページ側にこれを埋め込まければ、表示されないままになってしまいます。クリップボードのコードを失わないようにしながら、自分のサイトへと移動しましょう。

ワードプレスで埋め込む方法を紹介

ワードプレス

Twitterのウィジェットの埋め込み方法は利用しているブログやホームページによって異なります。ほとんどのブログやホームページサービスでウィジェットに対応されないことはないはずです。

ここではブログサービスで数多く利用されるワードプレスを使っての埋め込み方法を説明します。ほかのサービスでも似た手順で進むはずですから、そういう方も以下を参考にしてください。

管理画面の【外観】から【ウィジェット】を選ぶ

ワードプレスの管理画面のメニューから「外観」を選択し、サブメニューの「ウィジェット」をクリックします。

バージョンの違いなどで「ウィジェット」が表示されない場合には「カスタマイズ」を選び、カスタマイズのメニューから「ウィジェット」を選択しましょう。

ウィジェットの選択

さらにTwitterのウィジェットの表示場所を選択します。選べる表示場所は、利用しているワードプレスのテーマによってサイドバーやフッターなどと変わってきますし、テーマによっては設置場所が表示されないこともあります。そんななかから、あなたのブログにふさわしい場所にウィジェットパーツを配置してください。と言っても、多くの場合は素直にサイドバーに配置しているようです。

サイドバーの選択

【カスタムHTML】を選択し埋め込む

追加するウィジェットのタイプを選択します。Twitterの埋め込み用コードはHTMLで記述されていますから、「カスタムHTML」を選んでください

ウィジェットの候補は大量にありますので、「カスタムHTML」が表示されない場合はスクロールして見つけてください。

カスタムHTMLの選択

Twitterの埋め込みコードをカスタムHTMLの中に挿入

サイドバーに納まった「カスタムHTML」の「内容」欄に、先にコピーしてきたTwitterの埋め込み用HTMLコードを貼り付けます。これでひとまずはあなたのブログにあなたのタイムラインを表示できるようになりました。(今回は例としてカウネットさんのタイムラインを利用させていただきました)

埋め込み用コードの貼り付け

Twitterのタイムラインウィジェットをカスタマイズ

カスタムHTMLにTwitterの埋め込み用コードを貼り付けたところで、あなたのブログやホームページを確かめてください。そのホームページのシステムにもよりますが、タイムラインがとんでもなく長く伸びているはずです。

無指定のウィジェット

早速表示サイズをカスタマイズしましょう。また、それ以外にもカスタマイズが可能なので、そのことについてもお伝えします。

ウィジェットの幅と高さを調節して表示サイズを変更

ウィジェットパーツをカスタマイズして小さくするにはTwitterの埋め込み用コードのタイムラインにオプションを追加します

今回利用させていただくカウネットさんの埋め込み用コードは、

<a class="twitter-timeline" href="https://twitter.com/kaunet?ref_src=twsrc%5Etfw">Tweets by kaunet</a> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

でした。このうち、「class="twitter-timeline"」の後ろにオプションをつけることで、ウィジェットパーツのサイズを変更できます。オプションは、
 

  • 幅は「width="xxx"」
  • 高さは「height="xxx"」

とピクセルサイズで指定します

​​​​​​

たとえば幅320ピクセル、高さ400ピクセルにカスタマイズしたい場合は、

<a class="twitter-timeline" width=”320” height=”400” href="https://twitter.com/kaunet?ref_src=twsrc%5Etfw">Tweets by kaunet</a> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

というふうにオプションを追加すればカスタマイズ完了です。

​​​​​こうすれば、あの長過ぎたタイムラインもこぢんまりしたウィジェットパーツサイズに早変りです。

サイズ指定後のウィジェット

ウィジェットの境界線の色を変更する

サイズこそ手頃になったTwitterのウィジェットパーツですが、場合によってはあなたのブログやホームページの配色とは合わないかもしれません。しかし、Twitterのウィジェットパーツは一部の色を変えることが可能です。

まずはタイムライン上のツイートを区切る境界線の色をカスタマイズしてみましょう。

境界線の色を変える際に使うオプションは、「data-border-color="#xxxxxx"」です。「#xxxxxx」の部分にはRGBで色を指定してください
​​​​​​
たとえば#ff0000の赤い境界線を使いたければ、

<a class="twitter-timeline" data-border-color="#ff0000" href="https://twitter.com/kaunet?ref_src=twsrc%5Etfw">Tweets by kaunet</a> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

というふうにオプションを追加すればカスタマイズはできあがりです。

境界線変更後のウィジェット

なお、Twitterのウィジェットパーツをカスタマイズするオプションは組み合わせることが可能です。大きさをかえて、なおかつ境界線の色を変えるということもできますし、この後紹介するほかのオプションを組み合わせることもできます。

その他のウィジェットパーツを変更する場合

Twitterのウィジェットパーツをカスタマイズするオプションはあとふたつあります。

リンクの色を変更する時は?

リンクの色を変える際に使うオプションは、「data-link-color="#xxxxxx"」です。境界線の色を指定したときと同様に、「#xxxxxx」の部分にはRGBで色を指定してください
​​​​​​
たとえば#ff0000の赤いリンクに変えたければ、

<a class="twitter-timeline" data-link-color="#ff0000" href="https://twitter.com/kaunet?ref_src=twsrc%5Etfw">Tweets by kaunet</a> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

というふうにオプションを追加すればカスタマイズできます。

リンク色変更後のウィジェット

テーマの色を変更する時は?

こうして埋め込まれたTwitterのウィジェットパーツは、白を基調とした明るい色調です。多くのブログやホームページではこの配色で問題ないのですが、人によっては黒や暗色を基調としたシックなサイトを運営している場合もあるでしょう。

 

暗い色調

そういうサイトを運営している場合には、テーマの色を変更するのがおすすめです。

ただし、テーマの色は境界線やリンクのようのRGBで細かい色の指定はできません。カスタマイズできるのは、オプションなしで表示される明るい「light」と暗い「dark」の2種類だけです。

テーマの色を「暗い」に変える際に使うオプションは、「data-theme=”dark”」です。したがって先のウィジェットパーツをカスタマイズする場合は、
​​​​​​
<a class="twitter-timeline" data-theme=”dark” href="https://twitter.com/kaunet?ref_src=twsrc%5Etfw">Tweets by kaunet</a> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

というふうにオプションを追加すれば大丈夫です。

Twitterのタイムラインを埋め込んで上手く活用しよう!

あなたのブログやホームページにTwitterのウィジェットを埋め込むことで、読者に対して記事化していない最新の情報や近況などをタイムリーに伝えられます。それは間違いなく読者に、あなたのブログやホームページに対する好感度や信頼度を高めてくれますし、同時にブログやホームページからのフォロワーも期待できます。

​​​​​​もちろんそのためには、タイムライン上でも有意義な情報や親近感を持ってもらえる情報を流すようにすべきです。ブログやホームページの記事と正反対の内容のタイムラインを埋め込んでいては記事の内容が信頼されないという事態にもなりかねません。

あなたが埋め込んだタイムラインを上手く活用して、ブログやホームページの価値を高めていってください。

がんばるカタツムリ
ThumbTwitterで片思い・相互フォローを確認する方法!調べてリムーブのやり方も!
Twitterで片思いや相互フォローを確認するための方法や、Twitterでの片思いを自動で...
ThumbTwitterでアカウント追加して複数管理する方法は?別アカウントを新規で作る
Twitterでアカウント追加して複数管理する方法をご存知でしょうか?この記事ではTwitt...
ThumbTwitterのアンケート機能は投票者がばれる?アンケート作成や投票のやり方を解説!
Twitterアンケート機能の使い方を、画像を使ってわかりやすく解説。投票者はばれない?また...

関連するまとめ

Original
この記事のライター
julyten
PDAの頃から携帯機器やPC関係を扱ってきた旧きプロレス愛好家。