logo header
logo header
logo header
logo header
  • 2014.08.19
  • 技術ブログ

SNS投稿ボタンのデザインカスタマイズとシェア数を取得する方法

いまやFacebookやtwitterなどSNSへの投稿ボタンをサイトに設置するのは当たり前になっていますね。投稿ボタンは各サービス側で用意されていますが、デザインがサイトのイメージに合わない、レスポンスが遅いという課題もありますので、今回はオリジナルのデザインでSNS投稿ボタンを設置する方法をご紹介したいと思います。

意外とオリジナルボタンでシェア数も取得するとなると調べるのに苦労しましたので参考になればと思います。

HTML

SNSはfacebook、twitter、Google+を対象としています。
APIから取得した共有数は<span></span>タグの中に表示される仕様となっています。

CSS

デザインはマイナビニュースの共有ボタンのようなデザインになります。

sns-btn

Javascript

以下の処理でボタンの振る舞いを設定します。
jQueryを使っていますのでjQueryも読み込ませてください。

終わりに

いいねボタンのカスタマイズを試みましたが、現状facebookのいいねボタンはAPIの提供がされていない為、いいねボタンをカスタマイズすることはできませんでした。

また、Google+もAPIが提供されていませんでしたが、Yahoo! Pipesを経由してXMLを取得する方法で共有数を取得しています。

以上、簡単に紹介しましたが、webフォントのアイコン等を活用することで更にオリジナリティを出せると思いますので是非試してみてください。

ともに世界をアップグレードできる、そんな日を夢見て。
Upgrade the World!