JSなしのソーシャルシェアボタン

各サービス、JSでボタンを出すスクリプトを提供していますが、それを使いたくない場合向けに、 直接リンクを貼れば適切な画面にいけるエンドポイントも用意されています。

ここではそのエンドポイントを利用して、各サービス対応のシェアボタンを出そうという試みをしています。 各サービスのブランディングガイドを読むのがいちいち面倒ですが、基本的にオフィシャルで提供されているものをうまく使えば大丈夫そうな気がします。 というかいちいち守っても見ちゃいないんですけど

  1. Google+ アイコンを「共有」のコンテキストで使う場合「共有する」ということが明確にわからないといけない
  2. Google+ アイコンは変更しないのが望ましいが、他のソーシャルアイコンと並べるなどの場合は変更しても良い。ただし色や形を変えないこと
  3. Facebook アイコンの f の部分は変更しないこと。色も変えないこと。指定した色を使用できない場合は白黒とすること
  4. Twitter アイコンは必ず公式のものを使えと書いてある。
  5. LINE it! が最大 40px までの画像しか提供されていないので、ボタンサイズは40pxに
  6. はてなブックマークは直リンのエンドポイントを案内していない http://b.hatena.ne.jp/add?url= か http://b.hatena.ne.jp/entry?url= が使えるみたいだが、 entry ページは誰もブックマークしていない場合にコメントフォームがでない

影あり

G+ が元々影ありの画像なので、それに他をあわせたもの

影なし

box-shadow をやめ、overflow: hidden とし G+ の影を非表示にしたもの

lowreal.net