ワードプレス(WordPress) Twitterのタイムライン表示方法

「ワードプレスで作ったブログにTwitterのタイムラインを載せたいけど、どうやればよいの?!」

「簡単にタイムラインログを表示させるHTMLコードを入手したい!」

「ブログのサイドバーにタイムラインを載せる方法を教えて!」

ブログ記事の拡散と親和性が高いと言われているTwitterですが、実はWordPress上にTwitterのタイムラインを埋め込むことができます。

ブログの記事を拡散するのを目的としてTwitterに流すということがありますが、逆にTwitterのタイムラインをブログに掲載することでTwitterのフォロワー数増加につながります。また、動きのあるブログの印象を与える効果があり結果的にサイト滞在時間を延ばすのに有効です。

ぜひ、ブログの集客対策として試してみてください。

この記事を読んでわかること
  • Twitterのタイムラインログを表示させるHTMLコードの自動作成方法
  • HTMLコードの編集方法
  • ブログへのタイムラインログを掲載する方法
目次

Twitterのタイムラインをサイドバーへ表示させる方法

タイムラインログのコード作成

以下のサイト<Twitter Publish>でタイムラインログを表示させるためのHTMLコードを作成します。

https://publish.twitter.com/#

手順に沿って進めると、以下の様なHTMPコードを作成することができます。参考に下のコードはこのサイトで使っているコードになります。

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

タイムラインログのコードのカスタマイズ方法

下のTwitter公式ページに記載のオプションコードを追加すると、タイムライン表示をカスタマイズすることができます。

具体的なコード変更は、<a>アンカー要素の内側に、オプションコードを追加するだけです。Twitterのタイムライン表示のカスタマイズは以下の参考例を見ながらコードをいろいろといじってみてください。

https://developer.twitter.com/en/docs/twitter-for-websites/timelines/guides/parameter-reference

サイドバーにタイムラインログを表示させる

ワードプレスの編集画面から、カスタマイズ→ガジェットからサイドバーに準備したHTMLコードを貼り付けます。

まとめ

本記事では、Twitterのタイムラインをワードプレスで製作したサイトに表示させる方法について解説しました。この手順に沿って設定すれば表示に成功すると思います。ぜひ試してみてください。

 

よかったらシェアしてね!

この記事を書いた人

・在宅勤務の会社員
・趣味・得意分野
⇨VPNヘビーユーザー
⇨テック分野が好物(人工知能関連、スマホ、通信)

【管理サイト】
お得情報発信 | OToKuGET.net
人工知能ノオト|AI NOTE
特化ブログの作り方まとめ
スポーツVOD.com

目次
閉じる