自分のブログにTwitterのタイムラインを埋め込みたい時ってありますよね。
このブログにも、右下に自分のタイムラインを表示させてみました。
結構めんどくさそうだなあと思っていたのですが、やってみたら意外と簡単だったので、方法についてシェアします。
本当に5分でできました。
Contents
スポンサーリンク
Twitterのタイムラインのソースコードを手に入れる
まず、以下のサイトにアクセスします。
https://publish.twitter.com/#
表示された画面のURLに、自分のTwitterのプロフィールアドレスを入力します。
どこかというと、プロフィール画面を表示させた時に出てくるURLです。
すると、『Here are your display options』と聞かれます。
ここで、タイムラインかTwitterボタンのどちらかを選択することができます。
今回はタイムラインを埋め込みたいので、『Embedded Timeline』を選びます。
これで『Copy』を押せばタイムラインの埋め込みコードが取得できるのですが、このままだとサイズなどの問題があるので、少しいじります。
埋め込みコードをカスタマイズする
『set customization options.』を選ぶと、このタイムライン表示をカスタマイズすることができます。
カスタマイズ内容は、こんなかんじ。
- Height：高さです。ピクセルで指定します。
- Width：幅です。ピクセルで指定します。
- Look：外観です。Light / Darkで指定して、デフォルトはLightになっています。
- Language：表示言語です。『Automatic』でいいと思います。
試しに、400 × 300のサイズに変更して、タイムラインを作ってみました。こんな感じになりますよ。
これでソースコードの取得は終わりです。
取得したソースコードをWordPressに設定する
さて、ソースコードを取得したら、WordPressのウィジェット部分に貼り付けていきます。
これもやばいくらい簡単で、『外観』→『カスタマイズ』でまず、埋め込みたい部分に移動します。
私の場合はフッターの右側に設置したかったので、『ウィジェット』→『フッター右用ウィジェット（3列目）』にしました。
これはテーマによってカスタマイズ方法が異なるので、ご自身のテーマの設置したい項目へ、まず移動してください。
目的の場所まで移動できたら、『ウィジェット追加』→『カスタムHTML』を選びます。
そして、出てきたテキストボックスに先程のソースコードをぺたり。
これで、Twitterのタイムラインがお使いのブログに表示されるようになります。
手探りで始めましたが、やってみたらほんとに5分で終わってしまって、若干拍子抜けでした。
後からでもタイムラインの表示サイズは変えられる
これ、あんまり出しているサイトがなかったので書くのですが。
わりと、ウィジェットに実際表示させてみたら画面サイズが大きかった or 小さかった、という事があると思うんですよね。
実際私のブログでも、実際貼り付けてみたら、サイズが大きすぎたので調整しました。
そんな時、わざわざもう一度、https://publish.twitter.com/#に移動する必要はないんです。
先程コピーしたソースコードをもう一度、見てみましょう。
<a class="twitter-timeline" data-width="300" data-height="400" href="https://twitter.com/jelly_fish1023?ref_src=twsrc%5Etfw">Tweets by jelly_fish1023</a>
<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
HTMLに触れた事がなければちょっと難しい話かもしれませんが、これ、以下のように分解できるんですよね。
ぱっと見て分からなければ、以下のポイントは読み飛ばしちゃってOKです。
ポイント
『<a』：リンクタグ
『class="twitter-timeline"』：TwitterタイムラインのCSSクラス
『data-width』：横幅
『data-height』：縦幅
『href="https://twitter.com/jelly_fish1023?ref_src=twsrc%5Etfw"』：Twitterの参照先リンク
『>』：リンクタグの終わり
『Tweets by jelly_fish1023』：ただの文字列
『</a>』：閉じタグ
『<script async～』：Twitterタイムラインを表示させるためのJavascript
どうすれば良いかというと、以下2つの要素に注目します。
data-width="300"
data-height="400"
この数値を操作してあげれば、後からでも大きさを変える事ができるんです。
ただ、ダブルクォーテーション（"）を誤って消さないように注意しましょう。
WordPressにTwitterのタイムラインを表示するのは5分でできる
ということで、WordPressにTwitterのタイムラインを仕込む方法について解説しました。
本当にすごく簡単にできるので、興味のある方はぜひ導入してみてください。
たったこれだけで、ブログの見た目が良くなってTwitterと繋がるのなら、楽なもんですよね。
これからも、何か簡単にできるWordPress関係のトピックがあれば、こちらに書いていこうと思います。
それでは。