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

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

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

feedly

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

function feedly_count(){
    if (false === ($subscribers = get_transient('feedly_subscribers'))):
        $feed_url = rawurlencode(get_bloginfo('rss2_url'));
    $subscribers = wp_remote_get("http://cloud.feedly.com/v3/feeds/feed%2F$feed_url");
    $subscribers = json_decode($subscribers['body']);
    $subscribers = $subscribers->subscribers;
    set_transient('feedly_subscribers', $subscribers, 60 * 60 * 12);
    endif;
echo $subscribers;
    }

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読み込ませておきましょう。

(function ($) {
	$(window).load(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) {
					$('.t_count').text(data.count);
        		},error : function(){
			$('.t_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;
			$('.f_count').text(count);
		},error : function(){
			$('.f_count').text('0');
			}
  });
	$.ajax({
		type: 'GET',
		url: 'http://api.b.st-hatena.com/entry.count',
		data: {
			url : link_src
			},
			dataType: 'jsonp',
			success: function(data) {
				var count = (data)? data : 0;
				$('.h_count').text(count);
            },error : function(){
			$('.h_count').text('0');
			}
    });
});
}(jQuery));

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

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

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

<?php
    if(is_single){
        wp_enqueue_script('social', get_template_directory_uri() . '/js/social.js');
    }
?>

css

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

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

.shera_area{
		padding:20px 0 ;
		border-top:3px dotted #999;
		border-bottom:3px dotted #999;
		float: left;
		width: 100%;
	}
	.shear_list{padding: 0;margin:0;}
	.shear_list li{list-style:none;float:left;width:25%;}
	.shear_list li a{
		display:block;
		padding:10px;
		text-align:center;
		overflow: hidden;
		box-shadow: 250px 0 0 0 #38C14C inset,100px 0 0 0 #9161FF inset;
		transition:0.5s;
		font-size:16px;
		color:transparent;
		margin:1px;
		text-shadow: 0 0 0 #FFF,-100px 0 0 rgba(0,0,0,0);
	}
	.shear_list li a:hover{
		text-decoration:none;
		text-shadow: 150px 0 0 rgba(255,255,255,0),0 0 0 rgba(255,255,255,1);
		box-shadow: 0 0 0 0 #E67E22 inset,250px 0 0 0 #9161FF inset;
	}
	.shear_list li a span{
		margin:0 0 0 10px;
	}
	.clr{clear:both;}

共有数その他の取得方法

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

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

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

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

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