東京monoブログ

写真、カメラ、グッズ、街歩き、グルメ、釣り、トレンド情報など好きなもの気まぐれに

ブログ運営

WordPressのサイドバーにtwitterのフォローボタンを設置する方法

Pocket

継続的にブログに訪れてくれるユーザーさんを増やすために、twitterのタイムラインとフォローボタンをサイドバーに設置しました。

ブログを運営するにあたって、twitterなどのSNS拡散はバカにできないので、是非この記事を参考にしてtwitterウィジェットを設置してみてください。

こんな風にサイドバー以外にも使用できるので、使いどころ次第では結構便利ですよ!

よろしかったらついでにフォローもお願いします。

 

 

こんな感じのウィジェットになります。

twitterタイムラインフォローボタン

作成したフォローボタンとタイムライン

 

スポンサーリンク

twitterのフォローボタン作成手順

まず、自分のtwitterのページにログインします。

その後、「設定」→「ウィジェット」→「新規作成」→「コレクション」

でtwitterのウィジェット作成ページに飛びます。

twitter設定

twitterの設定画面

 

下のような画面に飛びます。

twitterのウィジェット作成ページ

twitterのウィジェット作成ページ

 

上のページの「Enter a Twitter URL」のスペースに、自分のツイッターページのURLを入力します。

URLのここの部分です。

twitterページURL

自分のtwitterページのここの部分を入力します。

 

すると、タイムラインを作成するか、フォローボタンを作成するかを選ぶ画面が出てくるので、

フォローボタンの場合は、「Twitter Buttons」を選びます。

twitterウィジェット作成ページ

作成ウィジェット選択画面

 

これだけで、基本のボタン作成用のコードは出来てしまいます。

ボタンをカスタマイズしたい場合は「set customization options」をクリックします。

twitterフォローボタンコード

twitterフォローボタンのコード。カスタマイズもできます。

 

フォローボタンのカスタマイズ画面です。

「Hide Username」でボタンにユーザー名を表示するか、

「Large Button」でボタンを拡大するか、

ボタンの言語 が選択できます。

twitterボタンカスタマイズ画面

twitterボタンカスタマイズ画面

 

「Update」をクリックすると、上記で選択した設定が反映されたtwitterボタンのコードが取得できます。

あとは、このコードをコピーして、Twitterボタンを表示したい場所に貼りつけれるだけでオーケーです。

 

スポンサーリンク

twitterのタイムラインの作成方法

タイムラインもほとんどフォローボタンと同じ手順で作成できます。

上記の作成ウィジェット選択画面でタイムラインを選択します。

twitterウィジェット作成ページ

twitterウィジェット選択ページ

 

タイムラインの作成ページに飛んだら、フォローボタンの場合と同様に、「set customization options」でカスタマイズ画面に飛びます。

「Height」でタイムラインの全長が選択できますが、あまり長すぎるとスマートフォンで表示した際にタイムラインが邪魔になり操作性が悪化するため、400px程度がおすすめです。

タイムラインカスタマイズ作成画面

twitterタイムラインウィジェットカスタマイズ画面

 

「Update」をクリックすると、上記で選択した設定が反映されたtwitterタイムラインのコードが取得できます。

 

フォローボタン・タイムラインをサイドバーに設置

上記手順で取得したコードをサイドバーウィジェットのスペースに貼りつけていきます。

WordPressの「外観」→「ウィジェット」で、テキストをサイドバーウィジェットのスペースにドラッグし、テキスト欄に先ほどのコードを貼りつけます。

 

WordPressのウィジェット画面

WordPressのウィジェット画面。テキストをサイドバースペースにドラッグしてコードを貼りつけます。

 

これで、サイドバーにtwitterのフォローボタンとタイムラインを設置できます。

 

まとめ

WordPressのサイドバーにtwitterのフォローボタンとタイムラインを設置する手順を紹介しました。

結構な労力をかけて記事を作成しているので、SNSをうまく使って多くの人の目に触れるようにしていきたいものです。

スポンサーリンク

この記事が少しでも役に立ちましたら、シェアやはてなブをお願いします。励みになります。

Pocket

-ブログ運営
-