読者です 読者をやめる 読者になる 読者になる

ファイヤードブログ

ディジタル・パブリッシングという観点から、Webサイト制作、電子書籍制作などを。※ブログリニューアル中

主要メディアのソーシャルボタンのスタイル・実装状況

WebDev gestaltung

「Social Bookmarking Light」プラグインに不満が出てきたので、自分でSNSボタンくらい設置しようと考えた。ここで、悪い癖なんだけれど、そもそもSNSボタンとは何か、ということから始めて調査をした。記事詳細ページで表示するということを前提とする。対象となったのは大手のニュース系のメディアサイト。 

Newsweek

マウスオーバーでツイート拡散数を含むボタンを出現させるようになっている。記事の始めと終わりの合計2個設置。

f:id:sthmdnss:20141204022202p:plain

f:id:sthmdnss:20141204022231p:plain

TIME

こちらは拡散数のボタンなしで、ボタンのみのシンプルなSNSボタン。こちらも始めと終わりの2つ用意していて、終わりの方はやや小さい。

http://time.com/3615819/israel-parliament-dissolve/

f:id:sthmdnss:20141204022144p:plain

f:id:sthmdnss:20141204022113p:plain

Der Spiegel Online

Ebola Vaccine Search Moves Ahead Rapidly - SPIEGEL ONLINE

こちらも2箇所設置。SNSが用意しているボタンを表示している。

上部

f:id:sthmdnss:20141204021937p:plain

下部

f:id:sthmdnss:20141204022023p:plain

The Huffington Post

http://www.huffingtonpost.com/chad-griffin/imitation-game-review_b_6258430.html
f:id:sthmdnss:20141204022407p:plain

デスクトップではスクロールしたときにfixedされた領域が現れるけれど、RWDと合わないので編集者の都合により省略。これも数字を表示していて、デフォルトのようだが若干のスタイルが加えられているように見える。

The Washington Post

上部下部共に設置。ただし、下部のところにはTwitterとFacebookのみ。スタイルも別に用意してある。

上部

f:id:sthmdnss:20141204021802p:plain

The New York Times

http://www.nytimes.com/2014/12/03/technology/once-celebrated-in-russia-programmer-pavel-durov-chooses-exile.html

レヴェル高し。今までのが霞む。デザイン面でもページが詰まっていなく余白がとれていてスッキリしている。

f:id:sthmdnss:20141204023501p:plain

MOREを展開すると、次のようになる。

f:id:sthmdnss:20141204023617p:plain

ヘッダーナビ部分がスクロールして記事タイトルに触れるくらいのところで入れ替わる。その固定ナビゲーションの右上に、該当記事のシェアボタンが出現。
f:id:sthmdnss:20141204023648p:plain

それにしても、1.5cm以上ものスーパー頭でっかちな固定ナビを置いてしまう新聞社とは大違いだ。おっと、いけね。

Vox

ネットメディアだけあって、それなりに凝っている。拡散数を取得するのに、通常のデフォルトのボタンではなく、少しクライアントで処理をしてスタイルしなおしている。エンジニアやデザイナーと運営の関係が強いのだろう。

f:id:sthmdnss:20141204024412p:plain
A Japanese probe is heading to an asteroid — to bring rock samples back to Earth - Vox

記事下部にもあるが、ここでは省略。

The Japan Times

ボタンをデフォルトでもCSSでも出しておかず、「share」を押してから選ばせる方法をとっている。AddThis - Personalize Your Marketing with Smart Data というサービスを利用している。

f:id:sthmdnss:20141204024901p:plain

The Guardian

上下共に設置。上ではCSS丸ボタンたちの下に、シェアの合計数。これはプログラムを書かなくてはならない。拡散数を合計するといいのは、TwitterとFacebookに比べて、Google +の数字が寂しく感じられないこと。おっと、いけね。Guardianのフロントエンドについては興味があって調べているので別の記事で書きたい。
f:id:sthmdnss:20141204025300p:plain

下部。タグの下に再登場する。

f:id:sthmdnss:20141204025353p:plain

まとめ

だいたいこのくらいかな。きりがないのでやめよう。調査の結果としては、自分のプロジェクトでやる限りでは、CSSボタンだけでもいいような気がしてきた。シェア数がそんなに多いサイトでもないこともあるけれど。

厄介なのは、Facebookボタンを設置するためにはFacebookアカウントをとらないといけないこと。今の所、Facebookからの流入が一切なく、これは課題でもあるのでなんとか対処したいのだが。

気をつけなくてはいけないのは、「サイトのアカウントフォローよろしくボタン」と「この記事をシェアするときはこちらボタン」を明確に違うものだと見る人に分からせないといけないということ。Voxを例にとると、Voxでは、右上にサイトのソーシャルアイコンが並んでいるのだが、そこのボタンはグレーであまり目立たないようにして、記事のボタンと区別している。

次回の実装編に続きます。たぶん。簡単なスタイルとか非同期のやり方とか。

ここにインスタのボタンが並ばないのをみて、やっぱりインスタグラムは残酷だと思った。