プラグインを利用したオリジナルソーシャルボタン|jQuery POP’n SocialButton

以前から一応記事の末尾にソーシャルボタンをつけているのですが、丸い画像にリンクしてあるだけなので、ただそこにあるだけで、はてブされようがシェアされようが管理者にさえわからない、という有様でした。

そして今日、とある雑誌を読んでいたところ、そこで紹介されていたオリジナルのソーシャルボタン導入が鬼のように簡単だったので、それを利用して自分のソーシャルボタンにカウントをつけてみようと思い立ち、導入してみました。
※こちら、twitterに関しては非推奨の使い方だそうです。使用にあたっては自己責任で。

jquery.popn-socialbutton

ソースは上記よりダウンロードできます。サンプルファイルも同梱されているので、それを元に導入、カスタマイズを行いました。

導入は簡単です。

まずヘッダで呼びます。

埋め込みたい箇所のセレクタを指定して、実行します。
対応してるのはtwitter、facebook、はてブですが、表示したいSNSを括弧の中に記述します。
パラメータは、実際にこのサイトで設定した内容です。全部省略だと、サンプルのような見た目になりそうです。

html側に、セレクタに対応するid等を振ったdivなどを用意します。

これだけでOK

さて、見た目にもう少しカスタマイズしたかったので、ソースにちょいちょい手を加えました。
パラメータでいけるのかもしれませんが、よくわからなかったのでソース見て該当箇所を直に治しちゃいました。

表示するボタン画像を変えたい

元のソースの52行、64行、93行に、使用する画像のファイル名が指定してあります。ファイル名はそれぞれ

twitter_2x.png
facebook_2x.png
hatena_bookmark_2x.png

となっています。このファイル名で画像を作ってもいいですが、僕の場合は既に使ってる画像があったので、ソース内のファイル名の方をそれにあわせて書き直し、パラメータで画像サイズを指定しなおしました。

カウント文字をもう少し地味にしたかった

どうせ大した数は表示されないのでもう少し目立たなくしたくて、背景色や境界線の色はパラメータで指定できるんですが、境界線自体をどうやったら変えられるのかわからず、結局ソースでそれを指定しているところを直に書き直してしまいました。

元のソース155行

これを無しに↓

ボタン表示を右寄せにしたい

デフォルトではボタンはfloatのleftなのですが、右に寄せたかったので、109行

に変更。

そうすると、左右の並び順が変り、マージンの設定がそもそも1番目のボタンには適用されていなかったらしくて一番右のボタンと右から2番目のボタンがくっついちゃうので、取り急ぎ、全部のボタンにマージンが入るよう、if文をちょっと変更。

115行

に変更。

カウントが0のときは数字を非表示にしたい

滅多にはてブもいいねもされないし、0が並ぶのは恥ずかしいので、0の時にはカウント枠自体が表示されない処理を追加。

171行

に変更。

これで一応望みどおりの形になりました。

コメントを残す

メールアドレスが公開されることはありません。

one × two =