Twitterタイムラインのウィジェット表示方法 サイトに動きを持たせる場合におすすめ

Blog
Hitoshi
Hitoshi

こんにちは、hitoshiです。

今日はブログと親和性の高いtwitterですが、WordPress上にタイムラインを埋め込む方法について解説していこうと思います。

ブログの記事を拡散するのを目的としてtwitterに流すということがありますが、逆に、twitterのタイムラインとブログを連動させることで、動きのあるブログの印象を与える効果があります。ぜひ、ブログのアップデートとして試してみてください。

執筆者
hitoshi

神奈川在住 自動車関連の仕事をしている新しいもの好きのサラリーマン
・Web職TVを参考にサイト運営しています。
・2020年7月 G検定合格しました。
・英会話を勉強中です。
cluster ID : @Hitoshi77 ←フレンドになりましょう

管理サイト
得情報発信 | OToKuGET.net
G検定完全攻略サイト
特化ブログの作り方まとめ

hitoshiをフォローする

twitterのタイムラインログのコード取得

まず、以下のサイト:Twitter Publishからタイムラインログを表示させるためのHTMLコードを簡単に作成することができます。

Twitter Publish

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

<a class="twitter-timeline" 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のタイムライン表示のカスタマイズは以下の参考例を見ながらコードをいろいろといじってみて試してみてください。

Parameter reference

和訳すると以下の通りです。
<a>アンカー要素に追加、または、オプションオブジェクトのJavaScriptファクトリ関数に渡された、data- *属性を使用して埋め込みタイムラインをカスタマイズします。

[table “” not found /]



参考例として、hrefの下に、付けたいオプションをコーディングしていきます。

<a class="twitter-timeline"
  href="https://twitter.com/TwitterDev"
  data-height="400"
  data-chrome="nofooter"
  data-border-color="#a80000">
Tweets by @TwitterDev
</a>

サイトの任意の箇所に貼り付け

サイトに表示させるタイムラインのコードを作った後は、そのコードを任意の位置に埋め込んで表示させる事ができます。埋め込み位置は、サイドバーが良いと思います。

ブログアフィリエイトの始め方に、PVを増加させるためのサイトの制作方法を紹介していますので、この記事もみてみてください。

ブログアフィリエイトの始め方 特化型ブログ制作方法を解説

 

タイトルとURLをコピーしました