ブログ

【5分でできる】WordPressにTwitterのタイムラインを埋め込む方法

自分のブログにTwitterのタイムラインを埋め込みたい時ってありますよね。

このブログにも、右下に自分のタイムラインを表示させてみました。

結構めんどくさそうだなあと思っていたのですが、やってみたら意外と簡単だったので、方法についてシェアします。

本当に5分でできました。



スポンサーリンク


Twitterのタイムラインのソースコードを手に入れる

まず、以下のサイトにアクセスします。

https://publish.twitter.com/#

表示された画面のURLに、自分のTwitterのプロフィールアドレスを入力します。

どこかというと、プロフィール画面を表示させた時に出てくるURLです。

この画面を表示させて、アドレスバーのURLをコピーします。


すると、『Here are your display options』と聞かれます。

左はタイムライン、右はTwitterボタンを作ることができます。


ここで、タイムラインかTwitterボタンのどちらかを選択することができます。

今回はタイムラインを埋め込みたいので、『Embedded Timeline』を選びます。

これで『Copy』を押せばタイムラインの埋め込みコードが取得できるのですが、このままだとサイズなどの問題があるので、少しいじります。

埋め込みコードをカスタマイズする

『set customization options.』を選ぶと、このタイムライン表示をカスタマイズすることができます。

カスタマイズ内容は、こんなかんじ。

  • Height:高さです。ピクセルで指定します。
  • Width:幅です。ピクセルで指定します。
  • Look:外観です。Light / Darkで指定して、デフォルトはLightになっています。
  • Language:表示言語です。『Automatic』でいいと思います。


試しに、400 × 300のサイズに変更して、タイムラインを作ってみました。こんな感じになりますよ。


これでソースコードの取得は終わりです。

取得したソースコードをWordPressに設定する

さて、ソースコードを取得したら、WordPressのウィジェット部分に貼り付けていきます。

これもやばいくらい簡単で、『外観』→『カスタマイズ』でまず、埋め込みたい部分に移動します。

私の場合はフッターの右側に設置したかったので、『ウィジェット』→『フッター右用ウィジェット(3列目)』にしました。

これはテーマによってカスタマイズ方法が異なるので、ご自身のテーマの設置したい項目へ、まず移動してください。


目的の場所まで移動できたら、『ウィジェット追加』→『カスタムHTML』を選びます。

ウィジェット追加ボタンを押して『カスタム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関係のトピックがあれば、こちらに書いていこうと思います。

それでは。

スポンサーリンク

-ブログ

© 2021 日々勉強。