wordpressでオリジナルのSNS共有ボタンを設置する方法

2015年4月5日jQuery, WEB制作, wordpress

■※2014年12月17日追記
↓のリンク先が間違っていたので修正しました。
SNS Count CacheでSNS共有数を高速表示+オリジナルSNSボタンでwordpressを高速化 | CreativeTips

上記記事では、この記事の方法よりページ表示速度が早くなっています。
またpocket数の取得もできる様になっています。

※pocketのコードを一部修正しました。

twitterとかfacebookとかgooglePlusとかの共有ボタンをオリジナルのデザインにしてみる。
SNS共有ボタンは公式のものを使うと結構動作が重いので、オリジナルにする事にした。

共有数の取得に関しては、twitter,facebookシェア,はてなブックマーク,feedlyに対応。

wordpressでの設定

実装に至って下記のブログ様を参考にさせていただきました。

SNSボタンをオリジナルデザインにする方法 | Creator Clip

http://creatorclip.info/2014/01/sns-btn-original-design/

殆どコードは同じものを使っていますが、そのままコピペでsyntax errorが出たので若干コードを変えています。

feedly

feedlyの購読者数を取得するのに、functions.phpに以下を記述する。

HTML

記事ページのファイルsingle.phpに表示させたい場所に以下を記述。
アイコンの表示にはtwitter bootstrapを使っています。

onclickイベントで小窓表示するようにしています。

<div class=”shera_area”>
<h3>記事を共有・ブログを購読する</h3>
<p>ここまで読んでくださりありがとうございます。<br>【役にたった】【面白かった】等、感じていただいたら記事の共有で友達にも教えてみてください。</p>
<ul class=”shear_list”>
<li>
<a class=”button-twitter” href=”http://twitter.com/intent/tweet?text=<?php echo trim(wp_title( ”, false)); ?>&nbsp;|&nbsp;&amp;url=<?php echo get_permalink() ?>” onclick=”window.open(encodeURI(decodeURI(this.href)), ‘tweetwindow’, ‘width=550, height=450, personalbar=0, toolbar=0, scrollbars=1, resizable=1’ ); return false;” target=”_blank” rel=”tooltip” data-toggle=”tooltip” data-placement=”top” title=”この記事をtwitterで共有する”>twitter<span><i class=”fa fa-twitter”></i></span><span class=”t_count”><i class=”fa fa-refresh fa-spin”></i></span></a>
</li>
<li>
<a href=”http://www.facebook.com/sharer.php?u=<?php the_permalink() ?>&amp;t=<?php the_title(); ?>” onclick=”window.open(this.href, ‘window’, ‘width=550, height=450,personalbar=0,toolbar=0,scrollbars=1,resizable=1’); return false;” rel=”tooltip” data-toggle=”tooltip” data-placement=”top” title=”facebookでこの記事を友達に教える”>facebook<span><i class=”fa fa-facebook-square”></i></span><span class=”f_count”><i class=”fa fa-refresh fa-spin”></i></span></a>
</li>
<li>
<a href=”http://b.hatena.ne.jp/add?mode=confirm&url=<?php echo get_permalink() ?>&title=<?php echo trim(wp_title( ”, false)); ?>” target=”_blank” onclick=”window.open(this.href, ‘window’, ‘width=550, height=450,personalbar=0,toolbar=0,scrollbars=1,resizable=1’); return false;” rel=”tooltip” data-toggle=”tooltip” data-placement=”top” title=”はてなブックマーク”>hatena<span><i class=”fa fa-bold”></i></span><span class=”h_count”><i class=”fa fa-refresh fa-spin”></i></span></a>
</li>
<li>
<a href=”https://plusone.google.com/_/+1/confirm?hl=ja&url=<?php echo get_permalink() ?>” onclick=”window.open(this.href, ‘window’, ‘width=550, height=450,personalbar=0,toolbar=0,scrollbars=1,resizable=1’); return false;” rel=”tooltip” data-toggle=”tooltip” data-placement=”top” title=”GooglePlusで共有”>Google+1</a>
</li>
<li>
<a href=”http://getpocket.com/edit?url=<?php echo get_permalink() ?>&title=<?php echo trim(wp_title( ”, false)); ?>” onclick=”window.open(this.href, ‘POwindow’, ‘width=550, height=350, menubar=no, toolbar=no, scrollbars=yes’); return false;” rel=”tooltip” data-toggle=”tooltip” data-placement=”top” title=”いつでもどこでもこの記事を見れるようにする”>Pocket<span></span></a>
</li>
<li>
<a href=”<?php bloginfo(‘rss2_url’); ?>” target=”_blank” rel=”tooltip” data-toggle=”tooltip” data-placement=”top” title=”RSS購読して新しい記事情報を高速で受け取る”>RSS</a>
</li>
<li>
<a href=’http://cloud.feedly.com/#subscription%2Ffeed%2Fhttp%3A%2F%2F11neko.com%2Ffeed%2F’ target=’blank’ rel=”tooltip” data-toggle=”tooltip” data-placement=”top” title=”feedlyでブログを購読する”>Feedly<span><i class=”fa fa-heart”></i>&nbsp;<?php feedly_count(); ?></span></a>
</li>
</ul>
</div>
<div class=”clr”></div>

javascript

共有数を取得するためのコードです。
ページが読み込まれてから動作するようにしています。

jQueryを使っているのでjQuery読み込ませておきましょう。

上記コードを記述後social.jsと言う名前で保存。
任意のディレクトリに置きます。

記事ページのみで読み込む

上で作成したjavascriptファイルを、記事ページでのみで読み込みたいので条件文を書く。
headerもしくはfooterに記述。

css

共有部分のデザイン
DOM構造的はシンプルに作ったつもり

CSS3のtransitionを使ってアニメーション効果を出しています。
ベンダープレフィックスは付けていません。

共有数その他の取得方法

共有数の取得でgoogle+は出来たのですが動作が重いので却下。
以前書いた記事に取得方法を書いています。

■[PHP]or[java script]google+1のカウント数だけを取得して表示する | CreativeLife

javascriptのみでやる場合は、Yahoo! Pipesを使った方法もあるようです。
ちょっと難しいので断念しました。

Google+のシェア数をJavascriptで取得する方法 : たき備忘録

この記事が気に入ったら
『いいね』しよう!