例えば、Yahoo!ニュースのTwitterシェアボタンから、こんな感じでツイートボタンを押したとします。
すると、こんな感じで表示されます。
このように、おすすめユーザーが表示され、フォローを促す画面が表示されます。
この機能、フォロワー増加を目論むには結構いい機能だと思います。
とりあえず、ツイートする人の目に触れる機会が多くなり、ツイートした人の中の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,…"
上記のように設定を行うと、以下のように表示されます。
複数ユーザー+説明文を表示させる
複数のアカウントを表示させ、それぞれに説明文をつけると以下のようになります。
<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タグを利用して、以下のような独自リンクでツイートボタンを実装しています。
通常のリンク
通常リンクで、ツイートリンクを作成するには以下のように作成します。
ソースコードは以下のようになります。
<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&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&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&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&url=http%3A%2F%2Fnelog.jp%2Ftwitter-related-follow&related=MrYhira,YahooNewsTopics" rel="nofollow">ツイート</a>
追加したパラメーター部分は以下になります。
&related=MrYhira,YahooNewsTopics
以下のようにユーザーIDを,(カンマ)で区切って複数並べればOKです。
&related=ユーザーID1,ユーザーID2,…
ツイート後は、以下のように表示されます。
複数ユーザー+説明文を表示させる
複数ユーザーと、説明文を同時に表示させると以下のようになります。
<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&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!とか、その他の大手サイトは採用していないと思うので。