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

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

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

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

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

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

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

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

この時、
 

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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