Facebook on qwerty.work

PHPのcurl_multiを使って非同期でカウント数を取得するSNSのシェアボタンを自作してみた

Mon, 14 Jan 2019 13:14:21 +0900

先日、CURLというPHPの関数を使ってシェアカウント付のSNSボタンを自作しましたが、スピードがいまいちだったので、他に高速表示できる方法がないか探してみたところ、cURL関数に非同期で値を取得できるcurl_multiという関数があることを知りました。これを使えば複数のcURLハンドルを非同期で実行できるようです。

こんなSNSをボタンを作る

前回、CURLで自作したSNSボタンと同じボタンをcurl_multiを使って作ります。

これを表示するソース

<?php
//カウント数を取得したい対象URL
$targeturl = 'https://www.apple.com/jp/';
$targeturl = urlencode($targeturl);

//現在のページで取得したいとき
//$url = 'https://'.$_SERVER["HTTP_HOST"] . $_SERVER["REQUEST_URI"];

// 並列通信用マルチハンドルを用
$mh = curl_multi_init();

// APIごとにCurl Handleを作る
// Twitter
$ch_twitter = curl_init("http://jsoon.digitiminimi.com/twitter/count.json?url=$targeturl");
curl_setopt($ch_twitter, CURLOPT_RETURNTRANSFER, TRUE);
curl_multi_add_handle($mh, $ch_twitter);

// Facebook
$ch_facebook = curl_init("https://graph.facebook.com/?id=$targeturl");
curl_setopt($ch_facebook, CURLOPT_RETURNTRANSFER, TRUE);
curl_multi_add_handle($mh, $ch_facebook);

// Hatena
$ch_hatena = curl_init("https://b.hatena.ne.jp/entry.count?url=$targeturl");
curl_setopt($ch_hatena, CURLOPT_RETURNTRANSFER, TRUE);
curl_multi_add_handle($mh, $ch_hatena);

// Pocket
$ch_pocket = curl_init("https://widgets.getpocket.com/v1/button?v=1&count=horizontal&url=$targeturl&src=$targeturl");curl_setopt($ch_pocket, CURLOPT_RETURNTRANSFER, TRUE);
curl_multi_add_handle($mh, $ch_pocket);

// 複数の通信を非同期で同時実行
do { curl_multi_exec($mh, $running); } while ( $running );

// APIから戻ってきた値を変数に入れる
$json_twitter  = curl_multi_getcontent($ch_twitter);
$json_facebook = curl_multi_getcontent($ch_facebook);
$count_hatena = curl_multi_getcontent($ch_hatena);
$html_pocket = curl_multi_getcontent($ch_pocket);

//cURLハンドルセットを閉じる
curl_multi_remove_handle($mh, $ch_twitter)
curl_close($ch_twitter);
curl_multi_remove_handle($mh, $ch_facebook);
curl_close($ch_facebook);
curl_multi_remove_handle($mh, $ch_hatena);
curl_close($ch_hatena);
curl_multi_remove_handle($mh, $ch_pocket);
curl_close($ch_pocket);
curl_multi_close($mh);

/*デバッグ用
var_dump($json_twitter)."\n";
var_dump($json_facebook)."\n"
var_dump($count_hatena)."\n";
var_dump($html_pocket)."\n";
*/

//Twitterのカウント数を取り出す
$count_twtter = json_decode($json_twitter, true );
$count_twtter = num_format(strval($count_twtter['count']));

//facebookのカウント数を取り出す
$count_facebook = json_decode($json_facebook, true );
$count_facebook = num_format($count_facebook['share']['share_count']);

//Hatenaのカウント数を取り出す
$count_hatena = num_format($count_hatena);

//Pocketのカウント数を取り出す
//HTML→DOM→XML→JSON→配列に変換
$dom_pocket = new DOMDocument('1.0', 'UTF-8');
$dom_pocket->preserveWhiteSpace = false;
$dom_pocket->loadHTML($html_pocket);
$xmlString_pocket = $dom_pocket->saveXML();
$xmlObject_pocket = simplexml_load_string($xmlString_pocket);
$count_pocket = json_decode(json_encode($xmlObject_pocket), true);
$count_pocket = num_format(strval($count_pocket['body']['div']['a']['span']['em']))
?>

<!DOCTYPE html>
  <html lang="ja" itemscope itemtype="http://schema.org/WebPage">
  <head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width,initial-scale=1"><br>  <meta http-equiv="x-dns-prefetch-control" content="on"><br>  <link rel="dns-prefetch" href="//cdn.jsdelivr.net">
<style>
  .sns-counter {<
    width: 100%;
  }
  .sns-counter li {
  display: inline-block;
  border-radius: 2px;
  width: 80px;
  padding: 3px;
  margin-left: 3px;
  }
  .sns-counter li span {
  display: inline-block;
  text-align: center;
  width: 70%;
  font-size: 12px;
  font-weight: bold;
  color: #fff;
  }
 .sns-counter li i {
 display: inline-block;
  text-align: center;
  width: 30%;
  color: #fff;
  font-size: 14px;
  position: relative;
  top: 1px;
  }
 .sns-counter .btn-tw {
  background-color: #55ACEE;
  }
 .sns-counter .btn-fb {
  background-color: #3A5795;
  }
 .sns-counter .btn-hb {
  background-color: #008CE1;
  }
 .sns-counter .btn-pk {
  background-color: #ef4357;
  }
 .sns-counter .btn-line {
  background-color: #1dcd00;
  }
  .sns-counter .btn-total {
  background-color: #000;
  }
 .btn-hb:hover,.btn-tw:hover,.btn-fb:hover,.btn-pk:hover,.btn-line:hover,.btn-total:hover {
  background-color: #ccc;
  }<
  i.fa-hatena:before {
  content: "B!";
  font-family: Verdana;
  font-weight: bold;
  }
</style>
</head>
<body>
<div>
<ul class="sns-counter" title="<?php echo $targeturl; ?>"><!--
  --><li class="btn-tw">
  <a href="//twitter.com/intent/tweet?url=<?php echo $targeturl; ?>" target="_blank">
  <i class="fab fa-twitter"></i><span><?php echo $count_twtter; ?></span>
  </a><br>  </li><!--
  --><li class="btn-fb">
  <a href="//www.facebook.com/sharer/sharer.php?u=<?php echo $targeturl; ?>" onclick="window.open('https://www.facebook.com/sharer/sharer.php?u=<?php echo $targeturl; ?>', 'new', 'width=500,height=300');return false;" target="_blank">
  <i class="fab fa-facebook-f"></i><span><?php echo $count_facebook; ?></span>
  </a>
  </li><!--
  --><li class="btn-hb">
  <a href="//b.hatena.ne.jp/entry/<?php echo $targeturl; ?>" target="_blank">
  <i class="fa fa-hatena"></i><span><?php echo $count_hatena; ?></span>
  </a>
  </li><!--
  --><li class="btn-pk">
  <a href="//getpocket.com/edit?url=<?php echo $targeturl; ?>" target="_blank">
  <i class="fab fa-get-pocket"></i><span><?php echo $count_pocket; ?></span>
  </a>
  </li><!--
  --><li class="btn-line">
  <a href="//social-plugins.line.me/lineit/share?url=<?php echo $targeturl; ?>" target="_blank">
  <i class="fab fa-line"></i><span>LINE</span>
  </a>
  </li>
</ul>
</div>
<script>
window.addEventListener("load",function(){
  const css=[ "//cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@5.6.3/css/all.min.css" ];
  for(i in css){
   let html=document.createElement("link");
   html.rel="stylesheet";html.href=css[i];
   html.async=true;document.head.appendChild(html);
  }
});
</script>
</body>
</html>

たった0.5秒だけど速い！

前回は平均2秒だったのが今回1.5秒になりました。

期待していたのは1秒以下だったのですが、curl_multiを使った効果はありました。非同期なのはAPIから結果を取得しに行く部分で、表示は非同期ではありません。よってブログのページにこのボタンを埋め込むとこの1.5秒分ほどページ全体の表示を遅くさせる可能性があります。それでも純正のシェアボタンを使うよりは速いと思います。

表示も非同期にしたいときはPHPでカウント数を呼び出す部分をJavascriptから実行させることができれば可能かもしれません。jQueryでできるらしいので今度試してみたいと思います。

2019/01/17追記

jQueryから非同期でPHPを実行する方法をやってみました。

jQueryのAjaxからカウント数付のソーシャルボタンを出力するPHPを非同期で実行する

参考サイト

http://php.net/manual/ja/ref.curl.php http://php.net/manual/ja/ref.curl.php

http://asklife.info/archives/3335 http://asklife.info/archives/3335

https://minory.org/php-curl_multi.html https://minory.org/php-curl_multi.html

https://techblog.yahoo.co.jp/architecture/api1_curl_multi/ https://techblog.yahoo.co.jp/architecture/api1_curl_multi/

PHPでカウント付のSNSシェアボタンを自作してみた

Fri, 11 Jan 2019 23:56:13 +0900

カウント付SNSシェアボタンをPHPで作ってみる

SNSのシェボタンを全部公式のボタンで作るとかなり表示が遅なくなるので、Twitter、Facebook、はてブ、Pocket のSNSシェアボタンを作ることにしました。。シェアされているカウント付で非同期で実行できるJavascriptを使って行いたいところですが、Javascriptを扱う実力がないので、今回はをPHPで実力の範囲内でチャレンジしてみました。

うまくいけばこんなボタンが表示されます

これを表示するPHPとHTMLコード

仮に、AppleのWEBサイト（https://www.apple.com/jp/）をシェアするためのSNSボタンとして記載しています。アイコンはFont AwesomeをCDNから非同期で読み込むようにしています。

<?php
<br>
//カウント数を取得したい対象URL（サンプル）
$url = 'https://www.apple.com/jp/';
<br>
//現在のページで取得したいとき
//$url = 'https://'.$_SERVER["HTTP_HOST"] . $_SERVER["REQUEST_URI"];
<br>
//Twitter//
function get_twitter_count($url) {
	$url = urlencode($url);
	$ch = curl_init("http://jsoon.digitiminimi.com/twitter/count.json?url=$url");
	curl_setopt($ch, CURLOPT_RETURNTRANSFER, true);
	$json = curl_exec($ch);
	curl_close($ch);
	$array = json_decode($json, true ) ;
	$count = strval($array['count']);
	$count = num_format($count);
	return $count;
	}
<br>
//facebook//
function get_facebook_count($url) {
	$url = urlencode($url);
	$ch = curl_init("https://graph.facebook.com/?id=$url");
	curl_setopt($ch, CURLOPT_RETURNTRANSFER, true);
	$json = curl_exec($ch);
	curl_close($ch);
	$array = json_decode($json, true ) ;
	$count = $array['share']['share_count'];
	$count = num_format($count);
	return $count;
}
<br>
//Hatena
	function get_hatena_count($url) {
	$url = urlencode($url);
	$ch = curl_init("https://b.hatena.ne.jp/entry.count?url=$url");
	curl_setopt($ch, CURLOPT_RETURNTRANSFER, true);
	$count = curl_exec($ch);
	curl_close($ch);
	$count = num_format($count);
	return $count;
}
<br>
//Pocket
	function get_pocket_count($url) {
	$url = urlencode($url);
<br>
	//指定されたURLのPocketボタンを取得
	$ch = curl_init("https://widgets.getpocket.com/v1/button?v=1&count=horizontal&url=$url&src=$url");
	curl_setopt($ch,CURLOPT_RETURNTRANSFER, true);
	$html = curl_exec($ch);
	curl_close($ch);
<br>
	//PocketボタンのHTMLソースを読み込みXMLパーサーを作成
	$dom = new DOMDocument('1.0', 'UTF-8');
	$dom->preserveWhiteSpace = false;
	$dom->loadHTML($html);
	$xmlString = $dom->saveXML();
	$xmlObject = simplexml_load_string($xmlString);
<br>
	//XMLをJSONに変換
	$array = json_decode(json_encode($xmlObject), true);
<br>
	//配列からカウント数を文字列として取り出す
	$count = strval($array['body']['div']['a']['span']['em']);
	$count = num_format($count);
	return $count;
}
<br>
function num_format($count) {
	//3桁区切りのカンマを削除
	$count = str_replace(',','',$count);
	//数値に変換
	$count = intval($count);
	// 共有数を表示
	return isset($count) ? intval($count) : 0 ;
}
<br>
	/*
	//カウント数表示(デバッグ用)
	echo $url."<br>\n";
	echo urlencode($url)."<br>\n";
	echo 'Facebook→ '.get_facebook_count($url)."<br>\n"
	echo 'Twitter→ '.get_twitter_count($url)."<br>\n"
	echo 'Hatena→ '.get_hatena_count($url)."<br>\n"
	echo 'Pocket→ '.get_pocket_count($url)."<br>\n"
	*/
<br>
?>
<!DOCTYPE html>
<html lang="ja" itemscope itemtype="http://schema.org/WebPage">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@5.6.3/css/all.min.css">
<style>
.snsbtn {
	width: 100%;
	}
<br>
.snsbtn li {
	display: inline-block;
	border-radius: 2px;
	width: 80px;
	padding: 3px;
	margin-left: 3px;
	}
<br>
.snsbtn li span {
	display: inline-block;
	text-align: center;
	width: 70%;
	font-size: 12px;
	font-weight: bold;
	color: #fff;
	}
<br>
.snsbtn li i {
	display: inline-block;
	text-align: center;
	width: 30%;
	color: #fff;
	font-size: 14px;
	position: relative;
	top: 1px;
	}
<br>
.snsbtn .btn-tw {
	background-color: #55ACEE;
	}
<br>
.snsbtn .btn-fb {
	background-color: #3A5795;
	}
<br>
.snsbtn .btn-hb {
	background-color: #008CE1;
	}
<br>
.snsbtn .btn-pk {
	background-color: #ef4357;
	}
<br>
.snsbtn .btn-line {
	background-color: #1dcd00;
	}
<br>
.btn-hb:hover,.btn-tw:hover,.btn-fb:hover,.btn-pk:hover,.btn-line:hover {
	background-color: #ccc;
	}
<br>
i.fa-hatena:before {
	content: "B!";
	font-family: Verdana;
	font-weight: bold;
	}
<br>
</style>
</head>
<body>
<div class="entry-social-buttons clearfix">
<ul class="snsbtn share" title="<?php echo urlencode($url); ?>"><!--
--><li class="btn-tw">
<a href="//twitter.com/intent/tweet?url=<?php echo urlencode($url); ?>" target="_blank">
<i class="fab fa-twitter"></i><span><?php echo get_twitter_count($url); ?></span>
</a>
</li><!--
--><li class="btn-fb">
<a href="//www.facebook.com/sharer/sharer.php?u=<?php echo urlencode($url); ?>" onclick="window.open('https://www.facebook.com/sharer/sharer.php?u=<?php echo urlencode($url); ?>', 'new', 'width=500,height=300');return false;" target="_blank">
<i class="fab fa-facebook-f"></i><span><?php echo get_facebook_count($url); ?></span>
</a>
</li><!--
--><li class="btn-hb">
<a href="//b.hatena.ne.jp/entry/<?php echo urlencode(urlencode($url)); ?>" target="_blank">
<i class="fa fa-hatena"></i><span><?php echo get_hatena_count($url); ?></span>
</a>
</li><!--
--><li class="btn-pk">
<a href="//getpocket.com/edit?url=<?php echo urlencode($url); ?>" target="_blank">
<i class="fab fa-get-pocket"></i><span><?php echo get_pocket_count($url); ?></span>
</a>
</li><!--
--><li class="btn-line">
<a href="//social-plugins.line.me/lineit/share?url=<?php echo urlencode($url); ?>" target="_blank">
<i class="fab fa-line"></i><span>LINE</span>
</a>
</li>
</ul>
</div>
<script>
window.addEventListener("load",function(){ const css=[ "//cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@5.6.3/css/all.min.css" ];for(i in css){ let html=document.createElement("link");html.rel="stylesheet";html.href=css[i];html.async=true;document.head.appendChild(html);}});
</script>
</body>
</html>

説明

SNSによってAPIから受け取るカウント数が異なりますが、共通してcURLというのを使って各SNSのカウント数が含まれた情報を取得しています。

TwitterとFacebookはAPIからJSONでデータが戻ってくるので、それをjson_decodeで配列に変換してカウント数の部分を取得しています。

Twitterの公式APIは現在ないのですが、https://jsoon.digitiminimi.com/のAPIから取得できます。APIを使用するためには事前にhttps://jsoon.digitiminimi.com/に登録が必要です。登録しないと値が取得できないのでカウント数が「0」のままになってしまいます。

はてブは数字のみがダイレクトに帰ってくるので簡単です。

Pocketに関してはPocketにストックされたWEBページのカウント数数を取得できるAPIがないので、公式ボタンのHTMLを取得→XMLに変換→JSONに変換→配列に変換し、その中からカウント数を抜き出しています。

GTmetrixで計測してみた

サイトのテストを行えるGTmetrixでスピードテストしてみました。アイコンにFont Awesomeを使っているのと、4つのSNSを同期で順番に作業しているせいでしょうか？

1秒以下を期待していたのですが、何度テストしても約2秒前後かかりました。

公式ボタンに比べたら速いのですが、劇的に速くするためには非同期で実行させる方法を考えないといけないですね。

参考ページ

2019/01/14追記

カウント数の取得を非同期で行うcurl_multi関数を使って少し高速かできたので、以下のページにまとめました。

https://qwerty.work/blog/2019/01/php-curl-multi-snsbutton.php

レスポンシブ対応できなくなったfacebookのPage Plugin（旧Like Box）

Fri, 17 Apr 2015 15:04:43 +0900

以下のページによると2015/06/23に今までのLike Boxは使えなくなるそうです。（同時にActivity Feed、Facepile、Recommendations Feedも使えなくなるようです。）

https://developers.facebook.com/docs/plugins/like-box-for-pages

2015年4月から既に仕様変更されたPage Pluginが使用できるようになっていますが、幅280～500pxで固定されどうやってもレスポンシブ対応できないようです。

https://developers.facebook.com/docs/plugins/page-plugin https://developers.facebook.com/docs/plugins/page-plugin

今までは以下のようにCSSに幅を100％とするコードを加えればよかったので、試しにPage Pluginのページでコードをゲットしてやってみましたがダメでした。

.fb_iframe_widget, .fb_iframe_widget span,.fb_iframe_widget span iframe[style]{
     width: 100% !important;
}

**data-width=“100%”**にしてみり、data-width自体を消してみたりしましたがびくともしませんでした…残念。

SQLみたいにFacebookの情報を取得できるFQLについてのメモ。

Tue, 29 Jan 2013 15:32:34 +0900

役にたちそうなので、とりあえずメモ。

Facebook Query Language (FQL) リファレンスで取得できる情報の種類を確認できます。

Graph APIエクスプローラでリクエストに対して、取得できる実際のデータを見ることができます。タブを切り替えればFQL文を実行してみることもできます。

Facebookで「いいね！」「シェア」されたときのサムネイル画像を指定する方法

Fri, 16 Mar 2012 01:20:02 +0900

自分のブログをシェアしたり、されたときにあまり表示されて欲しくない画像がサムネイルで表示されたりすることがありますが、その画像を意図的に指定する方法があるようです。

OGP （Open Graph Protocol）といわれるものを、～に追加することでできるようで、以下の一行を加えるだけでできます。

<meta property="og:image" content="http://指定したい画像のパス" />

今回、指定した画像はこれ↓

でも、上記だけでは内部的に情報不足で、Facebookにおいては下記６つが必須なようです。

og:title
og:type
og:image
og:url
og:site_name
fb:admins or fb:app_id

<meta property="og:title" content="その記事のタイトル" />
<meta property="og:type" content="blog" />
<meta property="og:image" content="http://指定したい画像のパス" />
<meta property="og:url" content="http://シェアするURL" />
<meta property="og:site_name" content="サイト名" />
<meta property="fb:admins" content="1234567890"/>

最後のfb:adminsの設定でfacebookのユーザID

以下のサイトでは、シェアした際にFacebookが取得する情報をあらかじめ確認をすることや、足らない情報などを表示することができます。

OGP （Open Graph Protocol）については以下のサイトが参考になります。

Facebook、Twitter、Google+、mixiの連携について

Wed, 14 Dec 2011 16:39:59 +0900

とりあえずソーシャルネットワークに参加してますが、どれか一つに絞れません。

すべてをまめに使いこなせないので、理想は1つ投稿したら全部に投稿されて欲しいです。

いまのところ使えそうなツールをまとめてみました。

※とりあえずのメモなので、設定方法は適当に検索してみてください。

TwitterからFacebookに投稿

Smart Tweets for Pages（Facebookのアプリ）

FacebookからTwitterに投稿

Twitter（Facebookのアプリ）

Google+からTwitterとFacebookに投稿

[dlvr.it

](http://dlvr.it/)フィードを読みこませてTwiter、Facebook、LinkedInに投稿するウェブサービス。ちなみにGoogle+のフィードはGoogle+のフィードを取得する方法を参照してください。

Twitterからmixiへ（相互連携）

mixi内で設定

その他ツール

[Google+Facebook

](http://crossrider.com/install/519-google-facebook)IE,Firefox,Chromeのブラウザ拡張機能で、Google+の画面内でFacebookのニュースフィードが見れるスグレものです。

いまのところ、Google+に投稿 → dlvr.it → Facebook → Twitter→ mixiと連動しています。

できればFacebookを最初の投稿先にしたいのですが、ツールが見当たらないのが現状です。

ブログを投稿するたびにTwitter、FacebookなどSNSに一斉自動配信してくれる「dlvr.it」

Wed, 27 Apr 2011 23:01:29 +0900

SNSが増えてミクシィ派のグループもあればTwitterのお付き合いやFacebookの集まりもあり、全部にちまちま投稿するのも面倒になってきましたが、そんな悩みを解決できるウェブサービスを見つけました。「dlvr.it」は一斉配信したブログのRSSを登録しておき、新規投稿があれば自動で配信してくれるサービスです。

https://dlvr.it/ https://dlvr.it/

以下のSNSに自動でブログ記事の更新を投稿してくれます。

Twitter
Facebook
Google Buzz
LinkedIn
MySpace
Status.net
Tumblr
ping.fn

Mixi、GREEはTwitterと連携させておけばいいので、あとはブログの記事を書けばフルオートで投稿ができて完璧！

dlvr.itに登録する方法

http://dlvr.it/にアクセスしてサインアップする。

ブログのRSSフィードのURLを登録する。

とりあえずTwtterを選択し、Twitterのアクセス許可をして終わり。

（事前にTwitterはログイン状態にしておいたほうがいいです。）

あとから他のSNSに登録する方法

ログインする。

「+Add Route」をクリック。

「+add」を押す。

ブログのRSSフィードを選択。

（新規にURLを登録するか、すでに選択済みのフィードを選択）

「+add」を押す。

自動投稿したいSNSを選択。

投稿先のSNSのアクセス許可をする。

（これをしないとエラーになり登録ができない。）

「save」を押して登録完了。

その他の詳しいことは以下のサイトが参考になります。

http://gigazine.net/news/20100523_dlvrit/ http://gigazine.net/news/20100523_dlvrit/