人生を楽しくする「まちゅブログ」はここをクリック

Twitter(ツイッター)のフォローボタンをWordPressブログに設置する方法

スポンサーリンク

みんなの声
いろんな人のサイトにTwitterのフォローボタンあるけど、どうやって作ってるの?

 

今回はこのような疑問を解決します。

 

>>本記事でわかること
  • Twitterのフォローボタンをサイトに貼る方法(超簡単)

 

まちゅ
どうも、まちゅです!

 

まちゅ
この記事では、Twitterのフォローボタンを自分のブログに設置する方法を解説していくよ!

 

ちなみに僕はこんな感じに設置!

 

まちゅのプロフィール

 

このボタンを設置しておけばブログからツイッターに簡単に飛べるように出来ます。

 

自分のツイッターを宣伝したい人は、ぜひともブログのプロフィールなどに設置しておきましょう。

 

まちゅ
ブログを訪れたついでにTwitterも見て欲しいよね!

 

簡単に出来るのでサクッとやっちゃいましょう!

 

 

Twitterボタンの前にプロフィールを作りたい方はコチラ

WordPressサイドバーにプロフィールを作る方法【コピペしてOK】

 

スポンサーリンク

Twitter Publishでフォローボタンのコードを作る

フォローボタンコードを作成

Twitterのフォローボタンは、

 

Twitter Publishで作成する事が出来ます。

 

TwitterアカウントのURLを入力する

 

まずはTwitter Publishにアクセスしてみましょう。

 

twitterpublish

 

そしたら入力欄のところに、

 

自分のTwitterアカウントのURLを入力してください。

 

https://twitter.com/ユーザー名

 

まちゅ
↑このように入力すればOK!

 

僕の場合なら、

 

まちゅのtwitterpublish

 

URLを入力したら、入力欄の右端にある矢印

【→】

をクリックして次へ行きましょう。

 

表示オプションの設定をする

ここで表示オプションの設定をしていくわけですが、

  • 埋め込みタイムライン
  • Twitterボタン

の2つから好きな表示オプションを選択できます。

 

まちゅ
今回はフォローボタンを作りたいので、

 

【Twitterボタン】を選択しましょう。

 

表示オプション設定

 

「Twitterボタン」をクリックすると、

  • フォローボタン
  • メンションボタン

の2つのボタンから作りたいボタンを選択します。

 

まちゅ
今回はフォローボタンを作りたいので、

 

【フォローボタン】を選択しましょう。

 

ボタン選択画面

 

メンションボタンとは、@ユーザーにツイートを作成できるボタンの事です

 

ボタンをカスタマイズする

ここまで進んだら、ボタンを設置するためのコードが作成されます。

 

ボタンのカスタマイズ

 

プレビューを確認して、それで良ければ、あとはコードをコピーすればいいだけです。

 

まちゅ
ですがカスタマイズオプションを設定することも出来るので紹介しておきますね!

 

【カスタマイズオプションを設定する】をクリックすると、このような画面に進みます。

 

カスタマイズオプション

 

  • ユーザー名を表示するか
  • ボタンを大きくするか
  • ボタンの言語をどうするか

 

 

まちゅ
それぞれ好みのカスタマイズオプションを選択しましょう!

 

ユーザー名を非表示にすると、

「フォローする」とだけ書かれたボタンになります。

 

カスタマイズオプション2

 

これに加えて、「大きなボタン」も選択してみます。

 

まちゅ
言語は「自動」のままでOK!

 

カスタマイズオプション最終チェック

 

まちゅ
これでボタンのカスタマイズは終わりです!

 

【更新】をクリックしましょう!

 

新しいコードが作成されているので、

【コードをコピー】して完了です!

 

作成したコードをWordPressに貼ってボタンを作る

コードを貼る

あとはWordPressに先ほどコピーしたコードを貼り付けていくだけです!

 

【外観】→【ウィジェット】の順にクリックしましょう。

 

ウィジェット

 

ウィジェットの画面が開いたら、

【テキスト】のウィジェットを【サイドバー】あるいは【フォローボタンを設置したい場所】に追加します。

 

ウィジェットサイドバー

 

あとはサイドバーに追加したテキストのウィジェットに先ほどコピーしたコードを貼り付けるだけです!

 

まちゅ
これで終わりです!

 

参考までに、

これは僕のプロフィールテキストにフォローボタンコードを加えたものです。

 

フォローボタンコード

(※フォローボタンのコードに、中央寄せされるように書き加えてあります。)

 

まちゅ
完成した僕のフォローボタンはこんな感じに表示されています。

 

プロフィールのボタン

 

少しプロフィールがオシャレになった感じがしますね!

 

これでフォローボタンの設置完了です!

 

まとめ:TwitterのフォローボタンをWordPressブログに設置する方法

まとめ

お疲れさまでした。

 

ブログ運営をしている人は、ブログと同時にTwitterを運用している人も多いことでしょう。

 

今回のようにフォローボタンを設置する事でまた1つブログの可能性が広がったのではないでしょうか。

 

Twitterも上手く活用して、これからもブログを楽しみましょう!

 

 

バイチャ(^^)/

 

 

スポンサーリンク