Like(いいね)系ボタンと、Share(送信・共有・おすすめ)系ボタン

WebコンテンツはSNSへ露出する方策を計画しなくちゃいけない。

Webサイトはアクセスしてもらう場所ではなくなりつつあります。 人はそれぞれ気に入っている場所に居座るようになった今だからこそ、Webサイトのコンテンツを彼等がいる様々な場所へ届ける仕組みを設計しなければいけません。
長谷川恭久

だいいち、下手なSEOや広告より効果あるじゃねぇか…
山本純

 

まず、LikeとShareの違いをおさらい

Like(いいね)系ボタンてのは、ワンクリックで対象にマーキングするものだよね。

  • Facebook : Like(いいね)
  • Google Plus : +1

Share(送信・共有・おすすめ)系ボタンってのは、友人知人に対象を紹介するのだよね。

  • Facebook : Share(送信)
  • Google Plus : Share
  • Twitter : (tweet) 

 

Webサイトに導入する際、LikeとShare、それぞれでニュアンスが違うので、できれば使い分けたい。

  • Like系
    (ログインしていれば)ワンクリックでアクションが完了する
    とにかくSNS系に露出したいという場合にはよい。 
  • Share系
    コメントの記入等のアクションが入るのでアクションがちょっとめんどくさい。
    効果の高い露出が期待できる…かもしれない。
    (FacebookのShareはLikeと統合されたのでちとややこしい) 

 ようするに、ユーザがそのコンテンツをSNSで取り上げる時の「濃さ」だね。
Likeは「お!」とか「読んだよ」とか、軽いカンジ。
Shareは「読んでこれ」 というニュアンスだ。

コンテンツに「お!」と感じても「読んでコレ」とは思わないシーンの方が多いでしょう。
それでもSNSに露出してほしい場合にはLike系ボタンを設置した方がいいよね。

 

クリエイタ泣かせのLike系ボタン

Like系ボタンの何が気に食わんっちゅうと、デザインが自由にならないトコだ。
(がんばればなるかもしれないが、厄介)

結局Like系ボタンは「既にLikeしているか」というロジックが走るので、その中身はiFrameになってる事が多い。だから見た目がコントロールできないんだよ。 

各SNSのLikeボタンはデザインがまちまちで、複数並べるとドンチャン騒ぎだ。
特に縦に並べようとすると無残。
アイコンだとかに変えたいが、先述のとおりムリ。
(ドロップダウンのような見せ方は一つの解かもしれない)

 

AddThis

AddThisはShare系、Like系ボタンを設置するための統合サービスだ。
(AddThisのAnalytics機能は効果測定に不可欠!) 

結構スタイリッシュなスタイリングができそうな印象を受けるかもしれない。
https://www.addthis.com/get/ 

アイコンのみのスタイリングもできるようだよね。
縦並びもできる。
http://www.addthis.com/labs/floating-vertical-bar

オリジナルのアイコン画像も使えるね
https://www.addthis.com/help/toolbox
(Custom Images) 

でも、よくよく見るとスタイリングできるのはShare系ボタンのみ

AddThisでLike系も扱えるが、AddThisだってLike系の見栄えをコントロールできない。
それは「Analytics機能と連動するオフィシャルボタンを生成して設置できる」というニュアンスで「Third-Party Buttons」として扱われてる。
 https://www.addthis.com/help/third-party-buttons

結局Like系ボタンのスタイリングについてAddThisは便利なツールではない。
(それでもShare系ボタンと統合してAnalytics機能に乗せられる魅力は捨てがたい) 

Like系ボタンはオフィシャル以上の事をするのは難しい

 

逆にShare系ボタンのスタイリングは結構凝れる

How to customise AddThis Sharing icons | Wiliam Web Design Sydney Australia

 

そんなこんなで…

納得はできてないけど、以下のようになった
http://www.questetra.com/ 

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

*

次のHTML タグと属性が使えます: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <img localsrc="" alt="">