WordPress│サイドバーへTwitterフォロー/ツイートボタンを簡単に設置を解説

シェアする

  • このエントリーをはてなブックマークに追加
  • 3

WordPress(ワードプレス)のサイドバーや記事の本文へ、Twitter(ツイッター)アカウントへの”フォロー”ボタン。そしてあなたのアカウントユーザーへツイートしてもらうための”ツイートする”ボタン簡単に設置する方法を画像付きで詳しく解説します。

WordPress│サイドバーへ icon-twitter Twitterフォロー/ツイートボタンを簡単に設置を解説

当サイト「好きなことだけ通信」サイドバーには

    • ブログアカウントの icon-twitter ツイッタータイムライン
    • ツイッターをフォローする(してもらう!)フォローボタン🔘
    • アカウントへツイートしてもらうツイートボタン🔘

が設置してあります。

今回ご紹介するのは、ツイッターアカウントへのフォローボタン🔘そして、ツイートしてもらうボタン🔘を簡単に設置する方法を解説します。

 icon-twitter Twitterタイムラインの設置は別に記事にしましたのでこちら👇を参考にして下さい。

WordPress(ワードプレス)のサイドバーへ、Twitter(ツイッター)アカウントの”タイムライン”。そして”フォロー”ボタンにあなたのアカウントユーザーへ”ツイートする”ボタンを設置する方法完全版!画像付きで詳しく解説します。WordPress│サイドバーへ icon-twitter Twitterタイムラインとフォローボタン設置を詳しく解説当サイト「好きなことだけ通信」のサイドバーには上記のようにブログアカウントの icon-twitter ツイッタータイムラインが埋め込んであります。そしてツイッターをフォローする(してもらう!)ためのボタン🔘と、「...
 

Twitterフォローボタンの設置

それではさっそくフォローボタンから設置していきましょう。

下記ツイッターのPublishサイトから埋め込みコードを生成することが出来ます。

✅ページの「What would you like to embed?」下の赤枠内あなたのツイッターのURLをペーストします。

✅ペーストするURLは icon-home ホームのURLではありません。

 icon-user プロフィールをクリックしたページのURLです。

間違えないように注意して下さい。

✅ それではicon-user プロフィールページの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も上がっていけばこんなに嬉しいことはないですよね。

ぜひ皆様のブログの活用にお役立て下さい。

以上

WordPress│サイドバーへTwitterフォロー/ツイートボタンを簡単に設置を解説

でした。

スポンサーリンク

スポンサーリンク

シェアする

  • このエントリーをはてなブックマークに追加

フォローする

スポンサーリンク

スポンサーリンク