Wordpressで記事ページに代表的なSNSのオリジナルボタンを表示させる方法

Wordpressでオリジナルボタンを使って、Facebookなどのソーシャルアイコンを表示する時があります。Twitterはカウント表示が出来なくなったので（無理矢理表示させる方法もあるみたいですが）、FacebookとGoogle PlusだけAPIからシェア数などを取得して、表示する方法です。備忘録です。
#シェア数取得
Facebookの場合はgraph apiを利用するのにアクセストークンが必要になってると思いますので、アクセストークンを取得します。
[Facebook API を利用するには、すべてにアクセストークンが必須になったようです。アクセストークン取得](http://ausnichts.hatenablog.com/entry/2015/06/30/135808)

こちらに記載の方法で各ウェブサイト毎にアプリ登録して、アクセストークンを取得します。
1.[デベロッパー登録](https://developers.facebook.com/)
2.アプリ登録（＆公開）
3.ツール&サポート→Access Token Toolsで確認
の流れでしょうか。

##Facebookのシェア数取得
```php:functions.php
function curl_get_content( $url, $timeout = 60 ){
	$ch = curl_init();
	curl_setopt($ch, CURLOPT_URL, $url);
	curl_setopt($ch, CURLOPT_HEADER, false);
	curl_setopt($ch, CURLOPT_RETURNTRANSFER, true);
	curl_setopt($ch, CURLOPT_TIMEOUT, $timeout);
	curl_setopt($ch, CURLOPT_FAILONERROR, true);
	$result = curl_exec($ch);
	curl_close($ch);
	return $result;
}

function fb_counter($url){
	$access_token = 'ACCESS_TOKEN';//ここに入力
	$get_facebook = 'https://graph.facebook.com/v2.7/' . $url.'?access_token='.$access_token;
	$json = curl_get_content($get_facebook);
	$json = json_decode($json);
	$total_count = $json->share->share_count;
	if(!isset($total_count)){
		echo '0';
		return false;
	}else{
		echo $total_count;
	}
	unset($json);
}
```
これがFacebookのカウンター取得用です。データダウンロード用にcURLで取得するfunctionを作って利用してますが、[wp_remote_get](https://codex.wordpress.org/Function_Reference/wp_remote_get)でも良いですし、[file_get_contents](http://php.net/manual/ja/function.file-get-contents.php)でも良いと思います。
`$json->share->share_count`でシェア数ですが、`$json->share->comment_count`でコメント数も取得されるので、合計数を表示する事も出来ると思います。

##Google Plusのシェア数取得
```php:functions.php
function gp_counter($url){
  $plus = file_get_contents( 'https://apis.google.com/_/+1/fastbutton?url=' . urlencode( $url ) );
	preg_match( '/\[2,([0-9.]+),\[/', $plus, $count );
	$googleplus =  $count[1];
	if($googleplus){
		echo $googleplus;
	}else{
		echo '0';
	}
}
```
こっちはGoogle Plusの取得方法です。以下の記事そのままですね。[
Google+のカウント数を取得するために色々試した結果がこちら](http://hayashikejinan.com/webwork/sns/358/)

きっちりやるのでしたら、こっちでしょうか（未検証）
[ソーシャルカウントの取得方法まとめ(全9サイト)](https://syncer.jp/how-to-get-sns-count#s3)

#記事ページへの表示

```inc/single-share.php
<?php
$sb_title = get_the_title($post->ID);
$sb_title = urlencode($sb_title);
function is_tablet () {
	$useragents = array('iPad','Android');
	$pattern = '/'.implode('|', $useragents).'/i';
	return preg_match($pattern, $_SERVER['HTTP_USER_AGENT']);
}
$new_window = '';
if(is_tablet()){
	$new_window = 'target="_blank" rel="noopener"';
}
?>
<ul>
	<li class="facebook">
		<a href="https://facebook.com/sharer.php?u=<?php the_permalink(); ?>" onclick="window.open(this.href, 'facebook_share', 'width=550, height=450,personalbar=0,toolbar=0,scrollbars=1,resizable=1'); return false;"
		<?php echo $new_window;?>>
			<img src="<?php echo get_template_directory_uri();?>/imges/bt-facebook.png" alt="Facebook"/>
		</a>
		<span class="count"><?php fb_counter(get_permalink()); ?></span>
	</li>
	<li class="twitter">
		<a href="http://twitter.com/share?url=<?php the_permalink(); ?>&text=<?php echo $sb_title;?>" onclick="window.open(this.href, 'twitter_share', 'width=550, height=260,personalbar=0,toolbar=0,scrollbars=1,resizable=1'); return false;"
		<?php echo $new_window;?>>
			<img src="<?php echo get_template_directory_uri();?>/images/bt-twitter.png" alt="Twitter" /></a>
	</li>
	<li class="googleplus">
		<a href="https://plus.google.com/share?url=<?php the_permalink(); ?>" onclick="window.open(this.href, 'Gwindow', 'width=650, height=450, menubar=no, toolbar=no, scrollbars=yes'); return false;"
		<?php echo $new_window;;?>>
		<img src="/img/bt-twitter.png" alt="Twitter" /></a>
		<span class="count"><?php gp_counter(get_permalink()); ?></span>
	</li>
	<li class="line-share">
		<div class="line-it-button" style="display: none;" data-type="share-a" data-lang="ja"></div>
		<script src="//scdn.line-apps.com/n/line_it/thirdparty/loader.min.js" async="async"　defer="defer"></script>
	</li>
</ul>
```
上からFacebook、Twitter、GooglePlus、LINEの順番で並んでいます。FacebookとGooglePlusのシェア数は先ほど設定したfunctions.phpを利用しています。

記事タイトルは一応URLエンコードをかけます。

スマホやタブレットの場合はポップアップではなく新規ウィンドウの方が表示しやすいので、分岐を行ってます。
`wp_is_mobile()`とかでも良いと思います。


オリジナルボタンを使う話の流れで、LINEについては公式ボタンを読み込んでいますが、[LINEボタンを設置する](https://media.line.me/howto/ja/)ページ内の書式1
` http://line.me/R/msg/<CONTENT TYPE>/?<CONTENT KEY> `
で記述した場合、スマホではアプリに移動しますが、PCではLINEの告知ページに飛ぶだけなので、PC版クライアントと連動した動きをしてもらうには公式のjs読み込みしか方法が無さそうです。そのため、LINEだけ公式のボタン読み込みの記述にしています。
[Using the “LINE it!” button on websites](https://developers.line.me/line-it/line-it-button-for-websites)
今回の記載方法はLINEの英語版デベロッパーサイトに従ってます。

オリジナルボタンを使うとしたら、以下のような記述になると思います。

```php:inc/single-share.php
	<li class="line-share">
		<a href="http://line.me/R/msg/text/?<?php echo $sb_title;?>%0D%0A<?php the_permalink(); ?><?php echo $new_window;?>">
			<img src="<?php echo get_template_directory_uri();?>/images/bt-line.png"alt="LINEで送る" />
		</a>
	</li>
```

動きの早いところなので、各社のAPI仕様変更によって使えなくなる事が多々あります。特にFacebookは変更が早いので、注意が必要ですね。