jQueryでカウント付オリジナル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…。

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

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