こんな方に読んで欲しい！
- ブログの中にTwitterボタンを設置する方法が知りたい！
- ブログにTwitterのタイムラインを載せたい！
- ブログ読者をTwitterにうまく誘導したい！
ブログとTwitterを両方がんばっている方は、ブログを読んでくれた方にできればTwitterもフォローしてほしいですよね。
そこで今回は、ブログとTwitterを連携させる方法として、「Twitterのタイムライン」「Twitterフォローボタン」「Twitterシェアボタン」の3つの連携方法を解説します。
今回は、WordPressテーマ「AFFINGER」と「SWELL」を使って解説していますので、どちらかを使っている方は、そのまま真似すればできますよ。
それでは、本編をどうぞ！
ブログとTwitterを連携する方法
ブログとTwitterを連携するといっても、3つのパターンがあります。
3つのパターンで役割が異なるので、全て設置することをおすすめします。
| パターン | 役割 |
|---|---|
| Twitterのタイムラインをブログに連携する | Twitterのフォロワー・いいね増加 |
| Twitterフォローボタンをブログに連携する | Twitterのフォロワー増加 |
| Twitterシェアボタンをブログに連携する | 読者からのTwitterシェア拡大 |
詳しい連携方法について、順に解説していきます。
Twitterのタイムラインをブログに連携する方法
インターネットビジネスラボでは、Twitterのタイムラインを追尾サイドバーに埋め込んでおりますが、追尾サイドバーやフッターウィジェットに埋め込むのがおすすめです。
Twitterのタイムラインを埋め込む方法は、WordPressテーマに依存しません。どのテーマでの同じように編集できますので、やり方を解説します。
まず、「パブリッシュTwitter」を開きます。次の画面が開くので、画面中央に自分のプロフィールページのURLを貼り付けます。
画面が切り替わるので、左の「Embedded Timeline」を選択します。
次の画面が出てくるので「set customization options」をクリックします。こちらをクリックすると、タイムライン領域の幅・高さ・デザインを編集することができます。
特に高さは、サイドバーに設置してタイムライン全体が見えるように調整したほうがいいでしょう。
参考までに、インターネットビジネスラボが設置しているTwitterタイムラインは次の通りです。
- 高さ：600px
- 幅：300px
- デザイン：Light
- 言語：Automatic
URLが発行されるので、「Copy Code」をクリックしURLをコピーします。
今回は、追尾サイドバーに貼り付けるので、WordPressの「外観 > ウィジェット」を開き、「追尾サイドバー」を開きます（WordPressテーマによっては名称が違います。）
「カスタムHTML」ブロックに、さきほどコピーしたURLをペーストすればタイムラインが表示できます。カスタマイズでデザインを見ながら、高さや幅を調整してみてください。
他のウィジェット領域にもタイムラインを貼ることができます。ウィジェットの使い方がいまいちわからない方は「【2022年版】ウィジェットとは？設定手順とおすすめの用途を解説！」の記事を参考にしてみてください。
Twitterフォローボタンをブログに連携する方法
SNSボタンを埋め込むと、ボタン一つでTwitterアカウントに連携できるようになります。
ブログの読者をTwitterに誘導するのが目的のため、フォローやいいねを増やしたい方におすすめです。
やり方として、WordPressテーマに依存しない方法と、WordPressテーマに依存する方法があるので、「WordPressテーマに依存しない方法」「AFFINGERの方法」「SWELLの方法」を3つ紹介します。
WordPressテーマに依存せずSNSフォローボタンを設置する方法
前述のTwitterタイムラインを埋め込む方法と同じような方法で、Twitterフォローボタンを埋め込むことができます。
さきほどと同じように、「パブリッシュTwitter」を開きます。次の画面が開くので、画面中央に自分のプロフィールページのURLを貼り付けます。
画面が切り替わるので、右の「Twitter Buttons」を選択します。
同じように、「set customization options」で編集ができるので、完了したら「Copy Code」をクリックして、URLをコピーします。コピーしたらWordPressのサイドバー等の「カスタムHTML」に貼り付けます。
AFFINGERにSNSフォローボタンを設置する方法
AFFINGERの場合は、プロフィールカードにTwitterボタンを設置することができます。
手順としては、「外観 > カスタマイズ > ウィジェット」で特定のウィジェットを選択し、「STINGERプロフィールカード」を挿入します。
続いて「ユーザー > プロフィール」で表示されるプロフィールのTwitter欄にTwitterプロフィールのURLを貼れば、プロフィールカードにTwitterボタンが表示されます。
SWELLにSNSフォローボタンを設置する方法
SWELLの場合は、「外観 > カスタマイズ」の「SNS情報」にTwitterプロフィールのURLを貼り付けます。
Twitterのプロフィールは、ブラウザ版で自分のプロフィールページに行きURLをコピぺします。
SNSアイコンリストは、フッターに設置するのがおすすめです。フッターに設置する方法は、「外観 > カスタマイズ」の「フッター」にある「フッターにあるSNSアイコンリストを表示する」にチェックをいれてください。
また、「外観 > カスタマイズ > ウィジェット」に「[SWELL]プロフィール」を設置します。ブロックを開くと「SNSアイコンリストを表示する」にチェックをいれれば完了です。
AFFINGERの場合は、「AFFINGER管理 > SNS/OGP」から設定できます。
Twitterシェアボタンをブログに連携する方法
SNSシェアボタンは、ブログ記事やトップページの主にフッターに埋め込まれるボタンです。
ほとんどのテーマでは、最初からSNSシェアボタンは埋め込まれているのでお好みの位置やデザインにして設置しましょう。
SNSボタンのデザインは、WordPressテーマによって、丸ボタンや四角ボタン、白黒のシンプルなボタンなどが選択できます。
AFFINGERにSNSシェアボタンを設置する方法
AFFINGERの場合は、「AFFINGER管理 > SNS/OGP」の「SNS設定」から設置位置やデザイン変更ができます。
SWELLにSNSシェアボタンを設置する方法
SWELLの場合は、「外観 > カスタマイズ >投稿・固定ページ > SNSシェアボタン」から設置位置やデザイン変更ができます。
Twitterタイムライン・フォローボタン・シェアボタンのおすすめの設置場所
Twitterタイムラインは追尾サイドバー
Twitterタイムラインは、追尾サイドバーに設置するのがおすすめです。
追尾サイドバーは、記事をスクロールしてもついてくるので、記事を読み終わって満足した読者がTwitterに訪れてくれやすくなります。
Twitterフォローボタンはプロフィールとフッター
Twitterフォローボタンは、プロフィールとフッターに設置するのがおすすめです。
またプロフィールは、サイドバーもしくはフッターウィジェットに設置すると、自然な流れでフォローを促すことができます。
Twitterシェアボタンは記事の最後
Twitterシェアボタンは、記事の最後に設置するのがおすすめです。
たまに、記事の冒頭（アイキャッチ画像の下）に設置している方もいますが、記事を読み始めてすぐにシェアすることはないので不要です。
また、シェアボタンの上に「╲ シェアしてください ╱」のような文言を入れると、シェア率があがります。
まとめ
今回は、ブログとTwitterの連携方法について解説しました。
AFFINGERとSWELLを題材に上げましたが、他のテーマでも似たように設置できるので試してみてください。
本記事の要点
- ブログとTwitterの連携は3種類ある
- 連携パターンは、「タイムライン」「フォローボタン」「シェアボタン」の連携がある
それぞれ役割が違うので、全て設置してみてください。