WordPress(ワードプレス)のサイドバーや記事の本文へ、Twitter（ツイッター）アカウントへの”フォロー”ボタン。そしてあなたのアカウントユーザーへツイートしてもらうための”ツイートする”ボタンを簡単に設置する方法を画像付きで詳しく解説します。
目次
WordPress│サイドバーへ Twitterフォロー/ツイートボタンを簡単に設置を解説
当サイト「好きなことだけ通信」のサイドバーには
-
- ブログアカウントの ツイッタータイムライン
- ツイッターをフォローする（してもらう！）フォローボタン🔘
- アカウントへツイートしてもらうツイートボタン🔘
が設置してあります。
今回ご紹介するのは、ツイッターアカウントへのフォローボタン🔘そして、ツイートしてもらうボタン🔘を簡単に設置する方法を解説します。
Twitterタイムラインの設置は別に記事にしましたのでこちら👇を参考にして下さい。
Twitterフォローボタンの設置
それではさっそくフォローボタンから設置していきましょう。
下記ツイッターのPublishサイトから埋め込みコードを生成することが出来ます。
✅ページの「What would you like to embed?」下の赤枠内へあなたのツイッターのURLをペーストします。
✅ペーストするURLは ホームのURLではありません。
プロフィールをクリックしたページのURLです。
間違えないように注意して下さい。
✅ それでは プロフィールページのURLをコピーして下さい。
✅「What would you like to embed?」下へURLをペーストしたら、その下の「Or browse your options below」から「Twitter Buttons」を選びましょう。
✅すると上記の「Select the button you’d like to use」がポップアップされるので、フォローボタンの設置は左の「Follow Button」です。
画面が切り替わると、設置されるフォローボタンが原寸大で表示されます。
✅上の「Copy Code」から埋め込みコードをコピーすれば大丈夫です。そしてもちろんフォローボタンもカスタマイズが可能です。
✅「Copy Code」上の「set customization options.」をクリックしてカスタイマイズできるページへ移動しましょう。
✅Would you like to simplify the button text?の項目では。
・Hide Username ボタン上にユーザーネームを表示させるか否か。
✅How would you like the button displayed?の項目では。
・Large Button ボタンを大きいサイズへするか否か。
✅What language would you like to display this in?の項目では。
・表示させる言語の設定。
となっています。
それぞれの項目でどう表示されるのか。を一覧表にしました。
好みのカスタマイズで設定して下さい。
✅カスタマイズ内容を決めたら右下の「Update」が決定ボタン🔘です。押して決定しましょう。
✅カスタマイズを決めたら改めて「Copy Code」から埋め込みコードをコピーしましょう。
✅ワードプレスのダッシュボード画面から「外観」➡「ウィジェット」と選択してサイドバーへ「テキスト」ウィジェットを設置。そしてテキストエディタへ切り替えて、さきほどのコードをペーストします。
これでサイドバーへTwitterフォローボタン🔘の設置は完了です。
実際埋め込んだツイッターのフォローボタン🔘です。
ぜひフォローしてくださ～い(笑)
Twitterツイートボタンの設置
それでは今度はツイートボタン🔘を設置していきます
✅「What would you like to embed?」下へURLをペーストしたら、その下の「Or browse your options below」から選ぶのは「Twitter Buttons」を選んで下さい。
✅上記のポップアップされる「Select the button you’d like to use」から選ぶ、ツイートボタンの設置は右の「Mention Button」です。
画面が切り替わると、設置されるツイートボタンが原寸大で表示されます。
✅上の「Copy Code」から埋め込みコードをコピーすれば大丈夫です。もちろんツイートボタンもカスタマイズが可能です。
✅「Copy Code」上の「set customization options.」をクリックしてカスタイマイズできるページへ移動しましょう。
✅Do you want to prefill the Tweet text?
✅Do you want to recommend accounts?
の2項目は「What would you like to embed?」ですでにアカウントのURLをペーストしている項目なので入力は不要です。
✅How would you like the button displayed?の項目では。
・Large Button ボタンを大きいサイズへするか否か。
✅What language would you like to display this in?の項目では。
・表示させる言語の設定。
となっています。
ツイートボタン🔘のカスタマイズ項目でどう表示されるのか。を一覧表にしました。
好みのカスタマイズで設定して下さい。
✅カスタマイズ内容を決めたら右下の「Update」の決定ボタン🔘で決定しましょう。
✅カスタマイズを決めたら改めて「Copy Code」から埋め込みコードをコピーしましょう。
✅ワードプレスのダッシュボード画面から「外観」➡「ウィジェット」と選択してサイドバーへ「テキスト」ウィジェットを設置。そしてテキストエディタへ切り替えて、さきほどのコードをペーストします。
※ビジュアルエディタでの表示。
これでサイドバーへTwitterツイートボタン🔘の設置は完了です。
実際埋め込んだツイッターのツイートボタン🔘です。
お疲れ様でした！
さいごに
せっかくツイッターにアカウントを作っているならブログとSNSを連携させておけば、ツイッターからサイトページへの流入が期待できます。
もちろんその逆でブログからツイッターにフォロワーが増える機会も多くなります。サイトとSNSの相乗効果でPVも上がっていけばこんなに嬉しいことはないですよね。
ごめんよ、まだ僕には帰れる所があるんだ。こんな嬉しいことはない・・・ pic.twitter.com/OPP9EenzPE
— favorite-fashion.com (@rawfashion_jp) May 2, 2020
ぜひ皆様のブログの活用にお役立て下さい。
以上
WordPress│サイドバーへTwitterフォロー/ツイートボタンを簡単に設置を解説
でした。