WordPerss ノウハウ情報

【WordPress】10分で完了!Twitterタイムラインを埋め込み表示する方法

alt=WordPress Twitterタイムライン 埋め込み 表示方法

SNS(ソーシャル・メディア・サービス)のひとつ「Twitter」のタイムラインを、サイドバーやフッターエリアに埋め込んで表示する方法を解説していきます。

こんにちは。WordPressテーマ研究家SHINです。

 

Twitterをアクティブで利用している方は、自身のウェブサイトやブログで露出した方がもちろんアピールとしての効果はありますし、気に入ってもらえればフォロワーを増やすメリットにも繋がるので、ぜひ活用してみてください。

当ブログでは、フッター右エリアに埋め込み表示していますのでご参考までに。

ではさっそくやっていきましょう。

 

Twitterタイムラインを表示させるHTMLコードを取得

まずTwitterの「パブリッシュサイト」にアクセスしましょう。

Twitter Publish

 

step
1
Twitterパブリッシュにアクセスしたら、ご自身のTwitterアカウントURLを入力します。僕の場合なら「https://twitter.com/WPThemeNavi(Twitterアカウント名@以降の名前)」になります。

alt=publish.twitter

 

step
2
次に「Twitterタイムライン(左側)」と「Twitterボタン(右側)」の選択では、Twitterタイムラインを表示するので左側を選択します。

alt=publish.twitter2

 

step
3
Twitterタイムラインを埋め込む「HTMLコード」が表示されますので、Copy Codeをクリックしてコピーします。

alt=twitterタイムライン 埋め込む3

 

step
4
次にWordPressダッシュボードから「外観」>「ウィジェット」へ進みます。

alt=twitterタイムライン 埋め込む4

 

step
5
Twitterタイムラインを埋め込むエリアのウィジェットを確認しましょう。今回は「サイドバー」「フッター」のエリアなので、こちらに選定します。

alt=twitterタイムライン 埋め込む5

WordPressテーマによってウィジェット名は変わることがあるので注意してください

step
6
表示するエリアを決めたら、左側にズラリと並んだ利用できるウィジェットの中にある「テキスト」をクリックし、選んだエリアを選択して「ウィジェットを追加」をクリックすると「テキスト」が移動します。

alt=twitterタイムライン 埋め込む6

 

step
7
移動したテキストを開いて、Step3でコピーしたHTMLコードをテキストタブに切り替えて貼ります。

alt=twitterタイムライン 埋め込む7

 

step
8
フッター3列目にTwitterタイムラインが表示されましたね。

alt=twitterタイムライン 埋め込む8

SHIN
表示されたは良いけど・・「長い!」「デザインがシンプル!」「カラーを変えたい」などなど・・かゆいところをカスタマイズしたい!って方多いですよね。

 

Twitterタイムライン表示をカスタマイズ

Twitterタイムラインを埋め込む解説ステップ3で、「set customization options」というテキストリンクがありましたね。

alt=Twitterタイムライン カスタマイズ

このテキストリンク先で、いろいろと表示をカスタマイズできます。

カスタマイズの注意点

Twitterタイムラインを「サイドバー」「フッター」のエリアに表示させる場合のカスタマイズは、高さ調整・フォローボタン追加の2点だけをおすすめします。

というのは、横幅はサイドバーとフッターは違うものの「レスポンシブ表示」なのでカスタマイズする必要なし。また背景は白or黒にカスタマイズできますけど、読みやすい観点なら「白」がおすすめなので、ここもカスタマイズしないことをおすすめします。

 

ですので解説するカスタマイズは・・・

  1. Twitterタイムラインの「長さ表示」をカスタマイズする ※見やすく整える
  2. フォローボタンを追加する ※フォロワーを増やす

この2点のカスタマイズを解説していきます。

 

Twitterタイムラインの「長さ」を調整する

alt=Twitterタイムライン カスタマイズ2

画像にある通り「height(px)」のみ変更します。

ちなみに僕のTwitterタイムラインの長さは480px。ウェイブサイトやブログに合わせて見やすい長さに調整しましょう。

以外の項目はデフォルトをおすすめします。最後に「Update」をクリックして、変更表示されたHTMLコードを貼りつけて完了です。

 

フォローボタンを追加する

Twitterタイムラインの最上部へalt=Twitterフォローボタンを表示するように設定していきます。

 

step
1
Twitterタイムラインを埋め込みするステップ2の選択で、「右側」>「左側」の順でクリックして進みます。

alt=Twitterタイムライン カスタマイズ3

 

step
2
Twitterフォローボタンのみ表示するHTMLコードが出来ますので、このコードをウィジェット内にあるTwitterタイムラインを埋め込んだ「テキスト」の最上部に貼るだけです。

alt=Twitterタイムライン カスタマイズ4
alt=Twitterフォローボタン2

 

すると表示は・・・ドン!

alt=Twitterタイムライン カスタマイズ5

これで晴れてフォロワーが爆増・・・しませんけど(笑)

Twitterフォローボタンは、フォロワーが欲しい方なら表示すべきかなと。今の僕は「無いよりあった方がイイ!」レベルでしか施策していないので・・フォロワーGetも急務中でございます(笑)

 

 

まとめ

Twitterタイムラインの埋め込み方、タイムライン表示の簡単なカスタマイズでした。

ps.ツイート回数は1日3回程度、内容は「ノウハウ情報」なのか「私生活情報」なのか、はたまた「写真掲載」なのか。ツイートする回数と目的を明確にしておくことは非常に大切かなと。

僕も今日を境に「変わります」から!

  • この記事を書いた人
  • 最新記事
SHIN

SHIN

WordPressテーマ研究家のSHINです。WPテーマとコーヒーをこよなく愛し、日々マウスをカチカチ!キーボードをパチパチ!しながら研究をしている人。

-WordPerss, ノウハウ情報
-

Copyright© WordPress theme NAVI , 2020 All Rights Reserved.