[Я]Twitterシェアボタン、追加&変更でいろいろ便利なオプションまとめ

スポンサーリンク
Twitter Expert
Twitter Expert / mkhmarketing

シェアしてもらうには必須のSNSボタン

エントリーを書いて公開するとき、自分自身でツールを使ってTwitterに更新情報を流してもいますが、読んで頂いた方々にシェアして頂くと大変嬉しいし、そのおかげでブログのアクセスも伸びます。

シェアして頂くのに必須なのがシェア用のTwitterボタン。ブログ運営されてる方々の大半は設置してるはず。

Twitter / Twitterボタン

基本的なボタンは上のページで簡単に作れます。

screenshot_201310_005

↑解説は日本語。指示された通り入力して、生成されたコードをブログの設置したい場所にコピペすれば表示され、使えます。

↑指定する内容によって若干コードは変わりますが、基本的に上のような感じのコードが生成されるはずです。

※<script>から始まるJavaScriptの部分は共通なので、このページでは以降省略し、ボタンのパラメータのみ紹介します。

パラメータというのは、上のサンプルコードでいう「data-via」や「data-lang」と書かれてる部分。いろんな種類のパラメータが用意されていて、組み合わせることでいろんな機能を持つボタンを設置することができます。今回はその一部をご紹介。

ボタンの形を変えてツイート数を表示する「data-count」

Twitterボタンの横や上に「そのページがシェアされたカウント」を表示したり、逆に表示させなかったりするのに使うパラメータが「data-count」です。

サンプルで3つのパターンを作ってみます。(前述の通り、JavaScript部分は省略しています)

↑このコードで以下3つのボタンができます。

screenshot_201310_017

「data-count」の指定が
1. none → シェアされたカウントは表示されない
2. horizontal → シェアされたカウントが横に表示される(横長)
3. vertical → シェアされたカウントが上に表示される(縦長)
※デフォルト値(=data-countを指定しなかった時)は「2.horizontal」。

ボタンに表示する文字の言語を変える「data-lang」

screenshot_201310_018

「data-lang」の指定が
1. ja → ボタン表示は「ツイート」(日本語)
2. en → ボタン表示は「Tweet」(英語)
※デフォルト値は「2.en」。

「data-lang」指定で、ボタンに表示する言語を変えられます。

2つのボタンとも「ツイート」という日本語カタカナの文字をaタグで囲んでいますが、これはボタンが表示されない場合の代替テキストのようですね。ボタンに表示される文字とは関係ないみたいです。実際2番は英語表記になってます。

2つのボタンをよ~く見て頂けると、右側(2番)の「Tweet」ボタンの方が、ほんの少しだけ幅が狭いことがお分かり頂けるでしょうか。

うちのブログではSNSボックスの横幅を小さくしたいので英語表記「en」を使用してます。

シェアされたことを確実に知る方法

Twitterボタンでシェアしてもらったことを確実に知りたい場合は、シェアの際にリプライ(=返信)を送信するようボタンに設定しておくのが分かりやすいですね。

「data-text」にはシェアしてもらうページのタイトルを入れます。WordPressの場合は「the_title()」という関数をセットすることでタイトルが入ります。

「data-via」にリプライを送信したいTwitterアカウント(=私の場合はRikuma_)をセットすることで、シェアしてもらうと指定アカウントに対してツイートが飛びます。

screenshot_201310_019

↑Twitterボタンを押すと、上のように表示されます。「○○さんから」とアカウントが指定されてますのでリプライが飛んできます。

ただ私は、個人的にこの「○○さんから」ってのが好きじゃなかったんですよ。「笑っていいとも」のテレフォンゲストに贈る花輪みたいじゃないですか。別に花輪が嫌いな訳じゃないけど。

なので、ちょいとばかし改造して、少し前まで以下のTwitterボタンを設置してました。

data-viaを削除して、代わりとしてdata-textの先頭に「RT あっとまーくアカウント名」を入れます。こうすると、

screenshot_201310_020

↑シェア内容の先頭にリツイート(RT)の形でアカウント名が追加されます。感想などを入力してもらってもいいように、先頭には空白文字を1つ入れています。リプライとリツイート、機能はどちらも同じ。

メリットは前述の通り「シェアしてもらったらすぐ分かる」こと。デメリットとしては、そのエントリーが人気となって大勢の方々にTwitterボタンでシェアしてもらうと、リプライがとんでもない数になります

Twitterアプリなどで通知するよう設定してると、仕事中だろうが夜中だろうがキコカコキコカコとiPhoneが鳴りまくります。もう焦るやら笑うやら、大変なことに。

音の問題だけなら消音にすればいいんですけど、リプライ欄が埋まるので、返信が必要なお友達からのリプライが埋没してしまって気付かず返事を忘れる、なんてことが発生してしまいます。たくさんシェアしてもらうのは嬉しいことなんですけどね。

なので現時点で、私のブログではリプライを飛ばさないようdata-viaも消し、リツイート指定も消しています。シェアしてもらってもすぐには気付けないですが、エゴサーチを使えば大半のツイートを拾うことが出来るので、それで対応しています。

Feedlyからシェアしてもらった一部のツイートはエゴサーチにヒットしないので拾えていない可能性があります。拾えなかった方々ゴメンナサイ。

【参考】[Я]Feedlyでシェアしたツイートをエゴサーチで発見してもらう設定方法*

シェアしてもらったついでにフォローしてもらっちゃう方法

ニュース系サイトなどに多いですが、記事をシェアした直後に「このアカウントをフォローしませんか」みたいな画面が表示されること、ありますよね。

たとえば、映画情報サイト「シネマトゥデイ」さんの記事をシェアすると、

screenshot_201310_021

↑こんな画面が表示されます。シェアしてもらって、「このブログ書いてる人のツイートも見てみようかな」とフォローもしてもらえると、さらに嬉しいですよね。

この設定も、ボタンにパラメータを1つ追加するだけで簡単に出来ます。

data-related」というパラメータで引用符の中に自分のアカウントを入れるだけで、シェアしてもらった直後に「フォローもよろしくね画面(仮称)」を表示させることが出来ます。

自分のアカウントで自分のブログをシェアしても画面が表示されませんので、テスト用のアカウントを新たに作って実験してみます。

screenshot_201310_022

↑テスト用アカウント。フォローもフォロワーもゼロの状態。当然ながら私(@Rikuma_)のアカウントもフォローしてません。これで私のエントリーをシェアしてみます。

screenshot_201310_023

↑Twitterボタンを押し、シェア内容の先頭にコメントを添えてから右下の「ツイート」を押します。

screenshot_201310_024

↑私のTwitterアカウント情報(ロゴ、名前、プロフィールなど)が表示され、右側にはフォローボタンも表示されました。このボタンを押すとフォローできます。

screenshot_201310_025

↑ツイートもされてるので、エゴサーチで拾えます。

フォローした後、2回目以降はツイートのみで「フォローよろしくね画面」は表示されません。別ウィンドウだった場合はシェア後に画面が自動で閉じられました。

上で紹介した「シネマトゥデイ」さんのパターンのように、例えば「個人アカウント」と「ブログ更新通知用アカウント」、複数のアカウントを持っていて、シェアしてもらった際に複数を「フォローよろしくね画面」に表示させたい場合は、

data-related=”アカウント1,アカウント2″

という風に、引用符の中に複数アカウントをカンマで区切って指定すればいいそうです。

「フォローよろしくね画面」にメッセージを添えることもできる

screenshot_201310_0211

↑「シネマトゥデイ」さんの記事シェア後に表示される画面で、2つめのアカウントにメッセージが添えられてます。これも簡単に設定できます。

screenshot_201310_026

↑こんな感じ。

data-relatedの引用符内で、アカウント名の後ろにコロンで区切り、その後にメッセージ内容を書くだけ。

複数アカウントにメッセージを指定したい時は、

data-related=”アカウント1:メッセージ1,アカウント2:メッセージ2″

アカウント単位はカンマで、メッセージはコロンで区切って指定すればいいそうです。

りくま ( @Rikuma_ )的まとめ

data-relatedに関しては以下記事で初めて知りました。ありがとうございました。

【参考】知らないで損してた! ツイートボタンにdata-relatedを入れるとよい

他のパラメータを含むTwitterの様々な機能については、以下ページに解説されてます。

Tweet Button | Twitter Developers

全文英語ですが、見てみると結構いろいろ機能あるんだなーって分かると思います。お試しあれ!

スポンサーリンク
この記事がお気に召したら
「いいね!」をお願いします!
「りくまろぐ」の最新情報を
Facebookにお届けします