初心者向け

【初心者向け】ブログとTwitterを連携する方法!画像解説付き

2022年4月16日

こんな方に読んで欲しい!

  • ブログの中にTwitterボタンを設置する方法が知りたい!
  • ブログにTwitterのタイムラインを載せたい!
  • ブログ読者をTwitterにうまく誘導したい!

ブログとTwitterを両方がんばっている方は、ブログを読んでくれた方にできればTwitterもフォローしてほしいですよね。

そこで今回は、ブログとTwitterを連携させる方法として、「Twitterのタイムライン」「Twitterフォローボタン」「Twitterシェアボタン」の3つの連携方法を解説します。

今回は、WordPressテーマ「AFFINGER」と「SWELL」を使って解説していますので、どちらかを使っている方は、そのまま真似すればできますよ。

筆者は、WordPress歴7年で、過去30近いサイトを作っています。その経験も踏まえておすすめの設定手順も紹介するので必見ですよ!

それでは、本編をどうぞ!

ブログとTwitterを連携する方法

ブログとTwitterを連携するといっても、3つのパターンがあります。

3つのパターンで役割が異なるので、全て設置することをおすすめします。

パターン役割
Twitterのタイムラインをブログに連携するTwitterのフォロワー・いいね増加
Twitterフォローボタンをブログに連携するTwitterのフォロワー増加
Twitterシェアボタンをブログに連携する読者からのTwitterシェア拡大

詳しい連携方法について、順に解説していきます。

Twitterのタイムラインをブログに連携する方法

インターネットビジネスラボでは、Twitterのタイムラインを追尾サイドバーに埋め込んでおりますが、追尾サイドバーやフッターウィジェットに埋め込むのがおすすめです。

Twitter タイムライン

Twitterのタイムラインを埋め込む方法は、WordPressテーマに依存しません。どのテーマでの同じように編集できますので、やり方を解説します。

まず、「パブリッシュTwitter」を開きます。次の画面が開くので、画面中央に自分のプロフィールページのURLを貼り付けます。

Twitter パブリック

画面が切り替わるので、左の「Embedded Timeline」を選択します。

Twitter パブリック2

次の画面が出てくるので「set customization options」をクリックします。こちらをクリックすると、タイムライン領域の幅・高さ・デザインを編集することができます。

特に高さは、サイドバーに設置してタイムライン全体が見えるように調整したほうがいいでしょう。

Twitter パブリック3

参考までに、インターネットビジネスラボが設置しているTwitterタイムラインは次の通りです。

  • 高さ:600px
  • 幅:300px
  • デザイン:Light
  • 言語:Automatic
Twitter パブリック4

URLが発行されるので、「Copy Code」をクリックしURLをコピーします。

Twitter パブリック5

今回は、追尾サイドバーに貼り付けるので、WordPressの「外観 > ウィジェット」を開き、「追尾サイドバー」を開きます(WordPressテーマによっては名称が違います。)

カスタムHTML」ブロックに、さきほどコピーしたURLをペーストすればタイムラインが表示できます。カスタマイズでデザインを見ながら、高さや幅を調整してみてください。

Twitter 追尾サイドバー

他のウィジェット領域にもタイムラインを貼ることができます。ウィジェットの使い方がいまいちわからない方は「【2022年版】ウィジェットとは?設定手順とおすすめの用途を解説!」の記事を参考にしてみてください。

Twitterフォローボタンをブログに連携する方法

SNSボタンを埋め込むと、ボタン一つでTwitterアカウントに連携できるようになります。

ブログの読者をTwitterに誘導するのが目的のため、フォローやいいねを増やしたい方におすすめです。

やり方として、WordPressテーマに依存しない方法と、WordPressテーマに依存する方法があるので、「WordPressテーマに依存しない方法」「AFFINGERの方法」「SWELLの方法」を3つ紹介します。

WordPressテーマに依存せずSNSフォローボタンを設置する方法

前述のTwitterタイムラインを埋め込む方法と同じような方法で、Twitterフォローボタンを埋め込むことができます。

Twitter カスタムHTML

さきほどと同じように、「パブリッシュTwitter」を開きます。次の画面が開くので、画面中央に自分のプロフィールページのURLを貼り付けます。

Twitter パブリック

画面が切り替わるので、右の「Twitter Buttons」を選択します。

Twitter パブリック7

同じように、「set customization options」で編集ができるので、完了したら「Copy Code」をクリックして、URLをコピーします。コピーしたらWordPressのサイドバー等の「カスタムHTML」に貼り付けます。

Twitter パブリック8

AFFINGERにSNSフォローボタンを設置する方法

AFFINGERの場合は、プロフィールカードにTwitterボタンを設置することができます。

手順としては、「外観 > カスタマイズ > ウィジェット」で特定のウィジェットを選択し、「STINGERプロフィールカード」を挿入します。

Twitter AFFINGER

続いて「ユーザー > プロフィール」で表示されるプロフィールのTwitter欄にTwitterプロフィールのURLを貼れば、プロフィールカードにTwitterボタンが表示されます。

Twitter AFFINGER プロフィール

SWELLにSNSフォローボタンを設置する方法

SWELLの場合は、「外観 > カスタマイズ」の「SNS情報」にTwitterプロフィールのURLを貼り付けます。

Twitter SWELL

Twitterのプロフィールは、ブラウザ版で自分のプロフィールページに行きURLをコピぺします。

Twitter SWELL2

SNSアイコンリストは、フッターに設置するのがおすすめです。フッターに設置する方法は、「外観 > カスタマイズ」の「フッター」にある「フッターにあるSNSアイコンリストを表示する」にチェックをいれてください。

Twitter SWELL3

また、「外観 > カスタマイズ > ウィジェット」に「[SWELL]プロフィール」を設置します。ブロックを開くと「SNSアイコンリストを表示する」にチェックをいれれば完了です。

Twitter SWELL4

AFFINGERの場合は、「AFFINGER管理 > SNS/OGP」から設定できます。

Twitter SWELL5

Twitterシェアボタンをブログに連携する方法

SNSシェアボタンは、ブログ記事やトップページの主にフッターに埋め込まれるボタンです。

ほとんどのテーマでは、最初からSNSシェアボタンは埋め込まれているのでお好みの位置やデザインにして設置しましょう。

Twitter シェアボタン

SNSボタンのデザインは、WordPressテーマによって、丸ボタンや四角ボタン、白黒のシンプルなボタンなどが選択できます。

Twitter シェアボタン2

AFFINGERにSNSシェアボタンを設置する方法

AFFINGERの場合は、「AFFINGER管理 > SNS/OGP」の「SNS設定」から設置位置やデザイン変更ができます。

Twitter シェアボタン3

SWELLにSNSシェアボタンを設置する方法

SWELLの場合は、「外観 > カスタマイズ >投稿・固定ページ > SNSシェアボタン」から設置位置やデザイン変更ができます。

Twitter シェアボタン4

Twitterタイムライン・フォローボタン・シェアボタンのおすすめの設置場所

Twitterタイムラインは追尾サイドバー

Twitterタイムラインは、追尾サイドバーに設置するのがおすすめです。

追尾サイドバーは、記事をスクロールしてもついてくるので、記事を読み終わって満足した読者がTwitterに訪れてくれやすくなります。

Twitterフォローボタンはプロフィールとフッター

Twitterフォローボタンは、プロフィールフッターに設置するのがおすすめです。

またプロフィールは、サイドバーもしくはフッターウィジェットに設置すると、自然な流れでフォローを促すことができます。

Twitterシェアボタンは記事の最後

Twitterシェアボタンは、記事の最後に設置するのがおすすめです。

たまに、記事の冒頭(アイキャッチ画像の下)に設置している方もいますが、記事を読み始めてすぐにシェアすることはないので不要です。

また、シェアボタンの上に「╲ シェアしてください ╱」のような文言を入れると、シェア率があがります。

まとめ

今回は、ブログとTwitterの連携方法について解説しました。

AFFINGERとSWELLを題材に上げましたが、他のテーマでも似たように設置できるので試してみてください。

本記事の要点

  • ブログとTwitterの連携は3種類ある
  • 連携パターンは、「タイムライン」「フォローボタン」「シェアボタン」の連携がある

それぞれ役割が違うので、全て設置してみてください。

-初心者向け