jQueryでカウント付オリジナルsnsボタンに変更するカスタマイズ
ちょこちょこ変更していたら、ある日突然SNSボタンを変更したくなったので、
カスタマイズTIPS。
何故か、カスタマイズTIPS沢山あるんですが、どれも動かない、激重になったりと、
かなり苦戦しましたので、今後の為にメモ。
オリジナルのボタンに変更するのは、割と簡単にカスタマイズ出来る様で、多くの記事を見かけました。
したい事は、
オリジナルボタンに変えて、カウンター数も出す！
ずばりこれです。
方法としては、
：javascript
：jQuery
：PHP
のどれかでAPIを取って来て、表示させる様です。
javascript&jQueryは重いし、チキンな私は、PHPを使いたかったんですが、
1度PHPで試すと、めーーーちゃくちゃ重たくなったので、中止しました。orz…。
ちょっと嫌ですが、jQueryで、やっと、動くのタイプの物を発見！と思い、コードを丸っとコピー！
とか思ってコピーしても動かない。
コードが間違っていました。orz….。
以下は、私がコード変えたバージョンです。
| //headerにjQuery | |
| <?php | |
| wp_deregister_script('jquery'); | |
| wp_enqueue_script('jquery', 'http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js', array(), '1.7.1'); | |
| ?> | |
| //js | |
| <script type="text/javascript"> | |
| $(function(){ | |
| var link_src = location.href; | |
| $.ajax({ | |
| type: 'GET', | |
| url: 'http://urls.api.twitter.com/1/urls/count.json', | |
| data: { | |
| url : encodeURI(link_src), | |
| noncache: new Date() | |
| }, | |
| dataType: 'jsonp', | |
| success: function(data) { | |
| $('#social_icon > .twitter_count').text(data.count); | |
| },error : function(){ | |
| $('.twitter_count').text('0'); | |
| } | |
| }); | |
| $.ajax({ | |
| type: 'GET', | |
| url: 'http://graph.facebook.com/' + link_src, | |
| dataType: 'jsonp', | |
| success: function(data) { | |
| var count = (data.shares)? data.shares : 0; | |
| $('.facebook_count').text(count); | |
| },error : function(){ | |
| $('#social_icon > .facebook_count').text('0'); | |
| } | |
| }); | |
| }); | |
| </script> | |
| //footer | |
| <?php | |
| if(is_single){ | |
| wp_enqueue_script('social', get_template_directory_uri() . '/js/sociallinks_2.js' ); | |
| } | |
| ?> | |
| //html | |
| <ul id="social_icon" class="social_icon_list"> | |
| <li class="twitter_icon"> | |
| <li class="twitter_icon"> | |
| <a href="http://twitter.com/share?text=<?php the_title(); ?>&url=<?php the_permalink() ?>" target="_blank"><img src="/img/twitter2.png" alt="ツイートする" class="tweetButton" height="32" width="32" /></a> | |
| </li> | |
| <li class="twitter_count">0</li> | |
| <li class="facebook_icon"> | |
| <a href="http://www.facebook.com/sharer.php?u=<?php the_permalink() ?>&t=<?php the_title(); ?>" target="_blank"><img src="/img/facebook2.png" alt="facebook" height="32" width="32" /></a> | |
| </li> | |
| </ul> |
：headerには、毎度おなじみ、jQuery使いますよー！のコード。
(wordpress止めて、googleさんのAPI拝借コードです。)
：JS部分は、headerに書くと、これまた重たくなるので、footerに記入。
：footerに使いたいjsコード
：htmlはSNSボタンを記載したいページに書くhtml。
(ボタン画像はimgに格納)
で完成！です。1日かかった私って一体orz…。
参考にしたURL:(かなり沢山あります。ありがとうございます！)
：Facebookの「いいね！」ボタンをオリジナルデザインに変更する
：Twitterの「ツイート」ボタンをオリジナルデザインに変更する
：ソーシャルボタンをjQueryで、いいね・ツイート・はてブのカウントを取得する方法
：javascriptで任意のデザインのソーシャルブックマークボタンとカウントを作成する
：カウント付のソーシャルボタンの見た目を統一
：jQueryでツイート数、はてブ数、いいね数を取得して自由にデザインする方法
：jQueryでツイート数、いいね数などを取得して、WordPressの記事別に設置する方法
- Did you like this article?
-
- 0
-
- 0
Maybe you like!!
- << PREVIOUS:ボルダリングDAY ｜プライベートピザパーティー日記:NEXT>>
Comment
【コメントの投稿について】
Furaha clothingでは、「Disqus」のコメントを使っています。
ツイッターやフェイスブックなどにアカウントをお持ちの方は、ログインすることで
自分のプロフィールでコメント出来ます。アカウントの無い方もメールアドレスでコメント出来ます。
（入力したアドレスはコメントには表示されません。）