簡単!WordPressでTwitterのフォローボタンを設置する方法

TwitterフォローWordPressの使い方

ワードプレスのサイトに、ツイッターの「フォローする」ボタンを設置したい!

という人のために、Twitterのフォローボタンを作成し、WordPressに設置する方法を紹介します。

 

ツイッター フォローボタン

この記事で作るのは↑こんなフォローボタンです。

「こういうウィジェットって、作るのが大変なのかな?」と思うかもしれませんが、

  1. ツイッターのツールで簡単にコードを作る
  2. ワードプレスにコピペする

という手順で、手軽に作れます。早速手順を見ていきましょう!

 

スポンサーリンク

フォローボタンのコードを生成する

まずはフォローボタンの「コード」を作成していきます。

フォローボタンはTwitter Publishという、ツイッターのウィジェット作成ページから作ることができます。

まずTwitter Publishにアクセスします。ちなみに英語表示になっていますが、そんなに難しくないので心配しなくて大丈夫です。

 

Twitter Publishの使い方

この画面が表示されたら、「Enter a Twitter URL」と書いてあるところに、自分のツイッターアカウントのURLを入力します。

自分のアカウントのトップページのURLをコピぺしましょう。または「https://twitter.com/アカウント名」と手打ちしても大丈夫です。

 

Twitter Publishの使い方

アカウントURLを入力したら、右側の「→」をクリックします。

 

Twitter Publish Twitterボタンの作成方法

すると、こんな画面に移ります。ツイッターボタンを作りたいので、右側の「Twitter Buttons」をクリックします。

 

Twitter Publish Twitterボタンの作成方法

この画面になったら、ボタンに表示される文を選びます。

  • 左:「○○さんをフォロー」と書かれたボタン
  • 右:「○○さんへツイートする」と書かれたボタン

どちらか好きな方を選びクリックします。今回は左の「○○さんをフォロー」を選んでみます。

 

Twitter Publish Twitterボタンの作成方法

すると、サイトに埋め込むためのコードが作成されました。下にはプレビューが表示されます。これでよければ、右側の「Copy Code」をクリックし、コードをコピーして下さい。

 

Twitter Publish Twitterボタンの作成方法

少しだけ、カスタマイズ設定することもできます。右上の「set customization options」をクリックすると、カスタマイズ項目が表示されます。

 

Twitter Publish Twitterボタンの作成方法

変えることができる項目が3つあり、内容は以下の通りです。

  1. Hide Username:ユーザー名を非表示にする
  2. Large Button:ボタンを大きくする
  3. 言語(日本語でよければJapaneseのままにしておく)
このブログでは、ユーザー名は非表示・ボタンを大きくしました。上のプレビュー画像のような感じになります。(ちょっとわかりずらいですが、少しだけボタンが大きくなっています。)

プレビューを見ながら、好みの設定をしていきましょう。

設定が完了したら、右下の「Update」をクリックして、新しいコードを生成できます!このコードをコピーしてワードプレスで設定していきます。

 

生成したコードをWordPressに貼り付ける

次は、作ったコードをワードプレスに貼り付けていきます。

サイドバーにTwitterボタンを設置していきます。WordPressでのコードの貼り方がわかる人は、以下の記事はすっ飛ばしてOKです。

 

ワードプレス ウィジェット

WordPressの管理画面から「外観>ウィジェット」をクリックします。

 

ワードプレス ウィジェット

ウィジェットページが開いたら、

  1. 利用できるウィジェットの中から「テキスト」を選択
  2. 「サイドバー」を選択(使用テーマによって少し表示が違うかもしれません)
  3. 「ウィジェットを追加」をクリック

と進みます。

 

Twitterボタンの設置方法

するとテキスト入力画面になります。右上の「テキスト」タブを開いてから、先ほど作ったコードを貼り付けましょう。これでサイドバーにツイッターボタンを設置出来ます。

 

ウィジェットを保存したら、実際のページを確認しましょう。

 

ワードプレス プロフィール

以前作ったプロフィールの下に、ボタンを設置してみました。完成したら、リンク先があっているか、実際にクリックして確認しておきましょう。

 

同じような方法でツイッターのタイムラインを表示することもできます。手順はWordPressにTwitterのタイムラインを埋め込む方法を参考にしてみて下さい。

以上がツイッターのフォローボタンを設置する方法でした。コードをコピペすれば、他のサイトやページにも簡単に設置できるので便利です。

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