WordPress(ワードプレス)のサイドバーへ、Twitter（ツイッター）アカウントの”タイムライン”。そして”フォロー”ボタンにあなたのアカウントユーザーへ”ツイートする”ボタンを設置する方法完全版！画像付きで詳しく解説します。
目次
WordPress│サイドバーへ 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」から「Embedded Timeline」を選んで下さい。タイムラインの埋め込みコードを設定する画面へ切り替わります。
画面が切り替わると、実際埋め込みされるタイムラインが原寸大で表示されます。
✅上の「Copy Code」から埋め込みコードをコピーすれば良いのですが…
サイドバーに表示させるには、あまりにもサイズが大きいですよね。それではサイズなどをカスタマイズしていきましょう。
✅「Copy Code」上の「set customization options.」をクリックすればカスタイマイズできるページへ移動できます。
こちらが「set customization options.」をクリックしたカスタマイズするページです。各項目もいたってシンプルです。
✅What size would you like your timeline to be?の項目では。
・Height（px）：高さ ・Width（px）：横幅 の設定。
✅How would you like this to look?の項目では。
・背景のカラー（トーン）の設定。
✅What language would you like to display this in?の項目では。
・表示させる言語の設定。
となっています。
その下の☐Opt-out of tailoring Twitterは現在機能していないので無視して良いです。
✅How would you like this to look?の項目で選択できるのは2種類だけです。
- Light
- Dark
✅What language would you like to display this in?の設定で選べる言語はAutomatic（自動）を除いて34言語から選べます。
✅カスタイマイズ例①
・Height（px）：600 ・Width（px）：300
・Light
・Automatic
✅カスタイマイズ例②
・Height（px）：500 ・Width（px）：250
・Dark
・Japanese
だいたいこれでカスタマイズ内容は把握してもらえたかと思います。
✅カスタマイズ内容を決めたら右下の「Update」が決定ボタン🔘です。押して決定しましょう。
✅それでは改めて「Copy Code」から埋め込みコードをコピーしましょう。
✅ワードプレスのダッシュボード画面から「外観」➡「ウィジェット」と選択してサイドバーへ「テキスト」ウィジェットを設置。そしてテキストエディタへ切り替えて、さきほどのコードをペーストします。
※ビジュアルエディタへ切り替えると上記のように表示されています。
これでサイドバーへTwitterタイムラインの設置は完了です。
実際埋め込んだツイッターのタイムラインです。
ちなみにコード内の
data-width=”300″ data-height=”600″
の数値を手入力で数値を変更すれば高さと横幅を随時変更できます。
またわざわざ埋め込みコードを生成する必要はありません。
直接サイズを変更しながら貴サイトのサイドバーサイズへ合うように調整して下さい。
Twitterフォローボタンの設置
それでは今度はフォローボタンを設置していきましょう。
✅ プロフィールページの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タイムラインとフォローボタン設置を詳しく解説
でした。
