Twitterのシェアボタンからツイート後フォローを促す画面を表示させる設定方法まとめ

PR WordPressカスタマイズ, Twitter 0

例えば、Yahoo!ニュースのTwitterシェアボタンから、こんな感じでツイートボタンを押したとします。

Yahoo!ニュースからツイート

すると、こんな感じで表示されます。

Yahoo!のツイート後のフォローボタン

このように、おすすめユーザーが表示され、フォローを促す画面が表示されます。

この機能、フォロワー増加を目論むには結構いい機能だと思います。

とりあえず、ツイートする人の目に触れる機会が多くなり、ツイートした人の中の100人に1人くらいは、もしかしたらフォローしてくれる可能性もあるかもしれません。

少なくとも、フォローボタンが全く目に触れない場合よりは、フォロー率は高くなるのではないかと思います。

この「フォローを促す画面」は、前々から気になっていたのですが、昨日ようやく詳しく調べてみたので、いろいろな設定方法を紹介したいと思います。

photo by Nan Palmero

スポンサーリンク
レクタングル（大）広告

Twitter純正のツイートボタンの場合

以下で純正のツイートボタンを使って「フォローを促す画面」を表示させる方法を紹介します。

以下の動作サンプルは、既に@MrYhiraをフォローしている場合は、フォロー画面は表示されません。

通常のボタン

純正の縦型ツイートボタンは通常はこんな感じです。

ソースコードはこんな感じです。

<a href="https://twitter.com/share" class="twitter-share-button" data-lang="ja" data-count="vertical">ツイート</a>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');</script>

フォローを促すボタン

これを、ツイート後にフォロー画面を表示させるようにすると以下のようになります。

 

<a href="https://twitter.com/share" class="twitter-share-button" data-lang="ja" data-count="vertical" data-related="MrYhira:寝ログやWordpressテーマSimplicityの更新情報など">ツイート</a>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');</script>

コードが多くてわかりづらいので、変更した箇所だけのみを書くとaタグの属性に以下のように追加しただけです。

data-related="MrYhira"

以下のように属性を追加します。@は不要です。

data-related="アカウントID"

このように設定することで、以下のように表示されます。

フォローを促す画面が表示される]

フォロー画面に説明文を挿入する

フォローを促す画面にユーザーの説明を入れると以下のようになります。

<a href="https://twitter.com/share" class="twitter-share-button" data-lang="ja" data-count="vertical" data-related="MrYhira:寝ログやWordpressテーマSimplicityの更新情報など">ツイート</a>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');</script>

わかりやすくaタグ属性の追加部分だけを書くと、以下のようになります。

data-count="MrYhira:寝ログやWordpressテーマSimplicityの更新情報など"

以下のように属性を追加します。

data-related="アカウントID:説明文"

アカウントIDと説明文の間は：（コロン）で区切ります。

上記のように設定する事で以下のように表示されます。

フォロー説明文が表示される

複数ユーザーのフォローを促す

冒頭のYahoo!フォロー画面に2つ出ていたように、複数のフォローボタンを表示させると以下のようになります。

<a href="https://twitter.com/share" class="twitter-share-button" data-lang="ja" data-count="vertical" data-related="MrYhira,YahooNewsTopics">ツイート</a>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');</script>

追加部分は以下のようになります。

data-related="MrYhira,YahooNewsTopics"

以下のように、,（カンマ）で区切って複数ユーザーを指定します。

data-related="ユーザーID1,ユーザーID2,…"

上記のように設定を行うと、以下のように表示されます。

複数のTwitter IDを指定した場合

複数ユーザー＋説明文を表示させる

複数のアカウントを表示させ、それぞれに説明文をつけると以下のようになります。

<a href="https://twitter.com/share" class="twitter-share-button" data-lang="ja" data-count="vertical" data-related="MrYhira:寝ログやWordpressテーマSimplicityの更新情報など,YahooNewsTopics:Yahoo!ニュースの更新情報など">ツイート</a>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');</script>

追加部分は以下のようになります。

data-related="MrYhira:寝ログやWordpressテーマSimplicityの更新情報など,YahooNewsTopics:Yahoo!ニュースの更新情報など"

以下のように、:（コロン）で説明文を書き、,（カンマ）でユーザー同士を区切ります。

data-related="ユーザーID1:説明文1,ユーザーID2:説明文2,…"

上記の設定で、以下のように複数ユーザーを設定しながら、説明文も表示できます。複数ユーザーと説明文入りのフォローを促す画面

ユーザーが独自に作成したシェアリンクの場合

当サイトの場合は、Aタグを利用して、以下のような独自リンクでツイートボタンを実装しています。

2015-07-21_12h15_22

通常のリンク

通常リンクで、ツイートリンクを作成するには以下のように作成します。

ツイート

ソースコードは以下のようになります。

<a href="//twitter.com/share?text=Twitter%82%CC%83V%83F%83A%83%7B%83%5E%83%93%82%A9%82%E7%83c%83C%81%5B%83g%8C%E3%83t%83H%83%8D%81%5B%82%F0%91%A3%82%B7%89%E6%96%CA%82%F0%95%5C%8E%A6%82%B3%82%B9%82%E9%90%DD%92%E8%95%FB%96%40%82%DC%82%C6%82%DF&amp;url=http%3A%2F%2Fnelog.jp%2Ftwitter-related-follow&related=MrYhira" rel="nofollow">ツイート</a>

フォローを促すリンク

ツイート後にフォローを促す用にすると以下のようになります。

ツイート

<a href="//twitter.com/share?text=Twitter%82%CC%83V%83F%83A%83%7B%83%5E%83%93%82%A9%82%E7%83c%83C%81%5B%83g%8C%E3%83t%83H%83%8D%81%5B%82%F0%91%A3%82%B7%89%E6%96%CA%82%F0%95%5C%8E%A6%82%B3%82%B9%82%E9%90%DD%92%E8%95%FB%96%40%82%DC%82%C6%82%DF&amp;url=http%3A%2F%2Fnelog.jp%2Ftwitter-related-follow&related=MrYhira" rel="nofollow">ツイート</a>

追加したコードだけを書くと、aのhref属性のURLパラメーターに以下を追加しただけです。

&related=MrYhira

URLに以下のようなパラメータを設定して追加してください。

&related=ユーザーID

すると、Twitter独自ボタンの時と同様に、ツイート後に以下のように表示されます。

フォローを促す画面が表示される]

フォロー画面に説明文を挿入する

説明文を挿入すると以下のようになります。

ツイート

<a href="//twitter.com/share?text=Twitter%82%CC%83V%83F%83A%83%7B%83%5E%83%93%82%A9%82%E7%83c%83C%81%5B%83g%8C%E3%83t%83H%83%8D%81%5B%82%F0%91%A3%82%B7%89%E6%96%CA%82%F0%95%5C%8E%A6%82%B3%82%B9%82%E9%90%DD%92%E8%95%FB%96%40%82%DC%82%C6%82%DF&amp;url=http%3A%2F%2Fnelog.jp%2Ftwitter-related-follow&related=MrYhira:寝ログやWordpressテーマSimplicityの更新情報など" rel="nofollow">ツイート</a>

追加したパラメーター部分は、以下のようになります。

&related=MrYhira:寝ログやWordpressテーマSimplicityの更新情報など"

パラメーターで指定する場合も、:（コロン）のあとに説明文を書きます。

&related=ユーザーID:説明文

ツイート後には、以下のように表示されます。

フォロー説明文が表示される

複数ユーザーのフォローを促す

複数ユーザーのフォローを促す場合は、以下のようになります。

ツイート

<a href="//twitter.com/share?text=Twitter%82%CC%83V%83F%83A%83%7B%83%5E%83%93%82%A9%82%E7%83c%83C%81%5B%83g%8C%E3%83t%83H%83%8D%81%5B%82%F0%91%A3%82%B7%89%E6%96%CA%82%F0%95%5C%8E%A6%82%B3%82%B9%82%E9%90%DD%92%E8%95%FB%96%40%82%DC%82%C6%82%DF&amp;url=http%3A%2F%2Fnelog.jp%2Ftwitter-related-follow&related=MrYhira,YahooNewsTopics" rel="nofollow">ツイート</a>

追加したパラメーター部分は以下になります。

&related=MrYhira,YahooNewsTopics

以下のようにユーザーIDを,（カンマ）で区切って複数並べればOKです。

&related=ユーザーID1,ユーザーID2,…

ツイート後は、以下のように表示されます。

複数のTwitter IDを指定した場合

複数ユーザー＋説明文を表示させる

複数ユーザーと、説明文を同時に表示させると以下のようになります。

ツイート

<a href="//twitter.com/share?text=Twitter%82%CC%83V%83F%83A%83%7B%83%5E%83%93%82%A9%82%E7%83c%83C%81%5B%83g%8C%E3%83t%83H%83%8D%81%5B%82%F0%91%A3%82%B7%89%E6%96%CA%82%F0%95%5C%8E%A6%82%B3%82%B9%82%E9%90%DD%92%E8%95%FB%96%40%82%DC%82%C6%82%DF&amp;url=http%3A%2F%2Fnelog.jp%2Ftwitter-related-follow&related=MrYhira:寝ログやWordpressテーマSimplicityの更新情報など,YahooNewsTopics:Yahoo!ニュースの更新情報など" rel="nofollow">ツイート</a>

パラメーター部分のみにすると、以下のようになります。

&related=MrYhira:寝ログやWordpressテーマSimplicityの更新情報など,YahooNewsTopics:Yahoo!ニュースの更新情報など

以下のように、:（コロン）で説明文を書き、,（カンマ）でユーザー同士を区切ったパラメーターを追加します。

&related=ユーザーID1:説明文1,ユーザーID2:説明文2,…

このように書いてツイートすることで、ツイート後、以下のように表示されます。

複数ユーザーと説明文入りのフォローを促す画面

まとめ

冒頭でも書きましたが、このフォローを促す機能は、フォロワー増加にある程度有効ではないかと思います。

広告でも、なんでもそうなんですが、とにかく人の目に触れないことには、アクションを起こそうとはなかなか思ってくれません。

例え、アクションを起こしてくれなかったとしても、同じサイトページを何度かツイートするうちに、いつの間にかアバターが頭に入っていて、「またこの人か。これだけツイートしているなら、フォローしても良いかも」と思ってもらえる可能性もなきにしもあらずです。

僕も昨日から、当サイトでこれらを試してみたのですが、通常は1日平均、1～2人増加するフォロワーが、今日は昨日の夜から半日で6人増えました。

サンプル期間が、まだ一日だけなので、たまたまなだけかもしれません。けれど、僕としてはそれなりに効果があると思っています。効果がなかったら、Yahoo!とか、その他の大手サイトは採用していないと思うので。