11月
08
2013

jQueryでカウント付オリジナルsnsボタンに変更するカスタマイズ

オリジナルsnsボタンに変更する カスタマイズ

 

ちょこちょこ変更していたら、ある日突然SNSボタンを変更したくなったので、
カスタマイズTIPS。

何故か、カスタマイズTIPS沢山あるんですが、どれも動かない、激重になったりと、
かなり苦戦しましたので、今後の為にメモ。
オリジナルのボタンに変更するのは、割と簡単にカスタマイズ出来る様で、多くの記事を見かけました。

したい事は、

オリジナルボタンに変えて、カウンター数も出す!

ずばりこれです。
方法としては、

:javascript
:jQuery
:PHP
のどれかでAPIを取って来て、表示させる様です。

javascript&jQueryは重いし、チキンな私は、PHPを使いたかったんですが、
1度PHPで試すと、めーーーちゃくちゃ重たくなったので、中止しました。orz…。

ちょっと嫌ですが、jQueryで、やっと、動くのタイプの物を発見!と思い、コードを丸っとコピー!
とか思ってコピーしても動かない。
コードが間違っていました。orz….。
以下は、私がコード変えたバージョンです。

:headerには、毎度おなじみ、jQuery使いますよー!のコード。
(wordpress止めて、googleさんのAPI拝借コードです。)

:JS部分は、headerに書くと、これまた重たくなるので、footerに記入。

:footerに使いたいjsコード

:htmlはSNSボタンを記載したいページに書くhtml。
(ボタン画像はimgに格納)

で完成!です。1日かかった私って一体orz…。
オリジナルSNSボタンに変更TIPS

参考にしたURL:(かなり沢山あります。ありがとうございます!)

Facebookの「いいね!」ボタンをオリジナルデザインに変更する
Twitterの「ツイート」ボタンをオリジナルデザインに変更する
ソーシャルボタンをjQueryで、いいね・ツイート・はてブのカウントを取得する方法
javascriptで任意のデザインのソーシャルブックマークボタンとカウントを作成する
カウント付のソーシャルボタンの見た目を統一
jQueryでツイート数、はてブ数、いいね数を取得して自由にデザインする方法
jQueryでツイート数、いいね数などを取得して、WordPressの記事別に設置する方法

 

 

Maybe you like!!


Comment

【コメントの投稿について】
   Furaha clothingでは、「Disqus」のコメントを使っています。
  ツイッターやフェイスブックなどにアカウントをお持ちの方は、ログインすることで
  自分のプロフィールでコメント出来ます。アカウントの無い方もメールアドレスでコメント出来ます。
  (入力したアドレスはコメントには表示されません。)
  


ブログの感想や質問など お気軽にお書きください。

Shop Now

セレクトショップ furaha clothing コーディネートブログ