Twitter ツイートボタン設置

3分で終わる!Twitterのツイートボタンとフォローボタンをブログに設置する~4ステップ~


現在ブログを運営している方、Twitterとの連携はお済みでしょうか?

もし、まだ連携していない場合は、当記事を参考に連携することをオススメします。

作業ボリュームも3分あれば終わる内容で、初心者でも簡単にできる作業です。

ブログにTwitterを連携させるメリットとしては、大きく2点あります。

  • 記事をみたユーザーが「ツイートボタン」を利用して、記事(URL)を共有する事で、そのユーザーのフォロワーに拡散され、Twitterから該当記事へのアクセスが期待できる
  • ブログに「フォローボタン」を設置しておくことで、ブログから(開設している)Twitterアカウントへの流入が期待でき、サイト閲覧者とTwitter上でも繋がることができます。

    Twitter上でつながる事で、あなたのツイートをリツイートしたり、あなたのウェブサイトを繰り返し訪れる。といった事が期待できます

以上です。

今回の記事では、Twitter連携をおこなうために必要な、「ツイートボタン」と「フォローボタン」を、ブログに設置する手順について、4ステップに分けて解説していきます。

以下、目次。

  • Twitterの公式サイトから「ツイートボタン」と「フォローボタン」のソースコードを取得する
  • ブログに、取得したソースコードを設定する
  • 「ツイートボタン」と「フォローボタン」がブログに設定されている事を確認する
  • 「ツイートボタン」と「フォローボタン」の最適な配置場所を確認する

Twitterの公式サイトから、「ツイートボタン」と「フォローボタン」のソースコードを取得する

まずは、Twitter公式サイトの「ツイートボタン(ソースコード)」取得ページにアクセスしてください→→→コチラ

ページにアクセスしたら、下図のようにボタンの種類を選択してください。

Twtiier ツイートボタンの設定手順1

今回対象としているのは「リンクを共有するボタン」と「フォローボタン」です。

※当記事では「リンクを共有するボタン」と「ツイートボタン」は、以下同義とします。

  • 【リンクを共有するボタン】:ボタンを設置しているページの「タイトル」と「URL」をツイートするボタンです。こちらのボタンで、拡散効果を期待できます。
  • 【フォローボタン】:サイト(ブログ)側で、事前に設定してあるツイッターアカウントを、フォローするためのボタンです。ブログとツイッター両方を運営している場合は、必ず設置しておきましょう。ブログからツイッターへの入り口となるボタンです。

まずは【リンクを共有するボタン】のソースコードを取得する

「リンクを共有する」ボタンを選択したら、次は 下図のように「ボタンのオプション」を設定していきましょう。

Twitter ツイートボタンの設定手順2

上図の各番号の説明です。

  • 【1】:基本は「ページのURLを使う」で良いです。ですが、URLを固定化させたい場合は、下にチェックをつけてURLを入力してください(URLを固定化させると、全ページで同じURLが(ツイート内容のURLに)設定されることになります)
  • 【2】:基本は「ページのタイトルを使う」で良いです。ですが、こちらも(URL設定と同様に)タイトルを固定化させたい場合は、下にチェックをつけてタイトル文章を入力してください
  • 【3】:「数を表示」をONにすると、ツイートされた数が表示されます。OFFにすると表示されません
  • 【4】:「ユーザー」項目に、TwitterアカウントのユーザーIDを設定すると、ツイート内容に「メンション先」が設定されます
  • 【5】:「ハッシュタグ」項目は、ツイート内容にハッシュタグを入れたい場合に設定します。ハッシュタグに設定したい文章を入力してください
  • 【6】:「ボタン(大)」をONにすると、ボタンの大きさが大きくなります。OFFにすると普通の大きさになります。【7】のプレビューで確認して設定すると良いでしょう
  • 【7】:ツイートボタンのプレビュー画面です。こちらを確認しながら各オプションを設定すると良いでしょう
  • 【8】:ツイートボタンのソースコードです。オプションの設定が終わったら、こちらの文字列をコピーしておいてください

以上で終わりです。

上記設定で、実際にツイートボタンを押すと、ツイート編集画面が開き、下図みたくなります(参考にしてください)

Twitter ツイートボタンの設定手順3

では次は、「フォローボタン」のソースコードを取得する手順になります。

次に【フォローボタン】のソースコードを取得する

まず、選択しているボタン(の種類)を、「フォローボタン」に変更してください。

Twitter ツイートボタンの設定手順4

「フォローボタン」を選択したら、”ボタンのオプション”を設定していきます(下図を参考にしてください)

Twitter ツイートボタンの設定手順5

上図の各番号の説明です。

  • 【1】:「ユーザー」項目に、フォローをしてほしいユーザーIDを設定してください
  • 【2】:「ユーザー名を表示」にチェックをつけると、ボタンにユーザー名が表示されます。チェックつけておきましょう
  • 【3】:「ボタン(大)」にチェックをつけると、ボタンの大きさが大きくなります
  • 【4】:フォローボタンのプレビュー画面です。こちらを確認しながら各オプションを設定していくと良いでしょう
  • 【5】:こちらがソースコードになります。各オプションの設定が終わったあとにこちらをコピーしておきましょう

以上で、ソースコード取得作業は完了です。

ブログに、取得したソースコードを設定する

次は、先ほど取得したソースコードを、ブログに設定します。

今回は、例として、Wordpressブログへ設定する手順を解説します(ボタンを設置する場所はサイドバーになります)

まず、Wordpressの管理画面から「外観」→「ウィジェット」画面を開いてください。

Twitter ツイートボタンの設定手順6

ウィジェット画面が開いたら、「利用できるウィジェット」の中から「テキスト」を、【メインサイドバー】にドラッグ&ドロップしてください。

Twitter ツイートボタンの設定手順7

「メインサイドバー」に設置したら、「テキスト」の設定をします(下図を参考にしてください)
タイトル枠には、任意の値を入力してください。
その下には、先ほど取得したソースコードを設定します。

Twitter ツイートボタンの設定手順8

設定が終わったら、保存ボタンを押します。

これで、ブログに設定ができました。
次は、実際にブログを表示させてみて、ちゃんと設定されているか確認してみます。

「ツイートボタン」と「フォローボタン」がブログに設定されている事を確認する

上述でボタンを設定したブログを表示させてみましょう。

下図のように、「フォローボタン」又は「ツイートボタン」が表示されていれば「OK」です。

Twitter ツイートボタンの設定手順9

実際に、「フォローボタン」を押してフォローできるか、、「ツイートボタン」を押してツイートできるかを確認してみても良いでしょう。

「ツイートボタン」と「フォローボタン」の最適な配置場所を確認する

「ツイートボタン」と「フォローボタン」を配置する場所も、”こだわり” が必要です。
なぜなら、配置場所によって「訪問者がボタンをクリックする確率」は全く違います。

ですので、訪問者が「アクション(ボタンを押す)を起こしやすい場所」にボタンを設置する必要があります。

では、「ツイートボタン」と「フォローボタン」の最適な場所を順に解説します。

【ツイートボタン】の最適な場所

「ツイートボタン」の最適な場所は、タイトルの上部又は下部 と、記事末の二箇所です。

訪問者目線で考えると、タイトルに惹かれてツイートする場合と、記事を読んで、満足してツイートする場合の、2パターンを考慮した場所になります。

Twitter ツイートボタンの設定手順10

また、Wordpressでブログを構築されている方は、プラグインの【WP Social Bookmarking Light】と【Sharebar(シェアバー)】をオススメします(当ブログでも設定しています)

  • 【WP Social Bookmarking Light】とは・・・Twitterの「ツイートボタン」やFacebookの「イイね!ボタン」、はてなの「はてブボタン」等、様々なソーシャルメディアの共有ボタンを一括管理してくれるプラグインです。

    下図のように、記事下部やタイトル下に表示してくれます。

    WP Social Bookmarking Light

    設定も非常に簡単に行えるので、オススメしています。

    設定手順については→【WP Social Bookmarking Light の設定手順】

  • 【Sharebar(シェアバー)】とは・・・例えば、訪問者は記事を上から下へスクロールして読んでいくと思いますが、その動きに、ツイートボタンやイイね!ボタン(Facebook)がついてきてくれます。

    下図が【Sharebar(シェアバー)】です。実際に当記事を上から下へ読み進めていくと、付いてきてくれます。

    Twitter ツイートボタンの設定手順11

    【Sharebar(シェアバー)】を設定したい方は(一から解説されています) → NETAONE:Sharebar – スクロール追尾するソーシャルメディアのシェアボタンWordPressプラグイン

【フォローボタン】の最適な場所

フォローボタンの最適な設置場所は、ページの右上です。

ページを開いたら、一目で分かる場所が良いでしょう。

Twitter ツイートボタンの設定手順12

まとめ

今回の記事では「Twitter連携」をおこなうために必要な「ツイートボタン」と「フォローボタン」をブログに設置する手順を、4ステップに分けて解説してきました。

最初にも述べましたが、以下2点が【Twitter連携をすることによるメリット】になります。

  • 記事をみたユーザーが「ツイートボタン」を利用して、記事(URL)を共有する事で、そのユーザーのフォロワーに拡散され、Twitterから該当記事へのアクセスが期待できる
  • ブログに「フォローボタン」を設置しておくことで、ブログから(開設している)Twitterアカウントへの流入が期待できる

上記メリットにもあるように、ブログとTwitterを連携させる重要なポイントの1つに ”拡散”があります。
ですので、”ブログのアクセス数を伸ばしたい方”は、まずは『記事を見てくれたユーザーがつぶやきたくなるような良質な記事の作成』を心がけたブログ運営をしていく事をオススメします。

記事自体が魅力的でなければ、どれだけ拡散チャンスを作っても無駄に終わってしまいますからね。

また、Twitterは今回解説してきた「ツイートボタン」「フォローボタン」の他にも、【ユーザーのTweetタイムライン】を表示させるウィジェットも提供しています(下図、参考)

Twitter タイムラインウィジェットの設定手順9

このタイムラインウィジェットも、非常に簡単にブログに設置することができます(3分もあれば設置できます)

タイムラインウィジェットをブログに設置する手順についてはこちらにまとめています→→Twitterのタイムラインウィジェットをブログに設定する手順~3ステップ~

Related Posts Plugin for WordPress, Blogger...
コメントを残す

メールアドレスが公開されることはありません。