https://qwerty.work/tags/hatena/ Recent content in Hatena on qwerty.work Hugo -- gohugo.io ja-JP Mon, 14 Jan 2019 13:14:21 +0900 https://qwerty.work/post/2019/01/php-curl_multi-snsbutton/ Mon, 14 Jan 2019 13:14:21 +0900 https://qwerty.work/post/2019/01/php-curl_multi-snsbutton/ <p>先日、<a class="link" href="https://qwerty.work/blog/2019/01/php-sns-share-button.php" target="_blank" rel="noopener" >CURLというPHPの関数を使ってシェアカウント付のSNSボタンを自作しました</a>が、スピードがいまいちだったので、他に高速表示できる方法がないか探してみたところ、cURL関数に非同期で値を取得できる<strong>curl_multi</strong>という関数があることを知りました。これを使えば複数の<a class="link" href="http://php.net/manual/ja/ref.curl.php" target="_blank" rel="noopener" >cURL</a>ハンドルを非同期で実行できるようです。</p> <h3 id="こんなsnsをボタンを作る">こんなSNSをボタンを作る </h3><p><a class="link" href="https://qwerty.work/blog/2019/01/php-sns-share-button.php" target="_blank" rel="noopener" >前回</a>、CURLで自作したSNSボタンと同じボタンを<strong>curl_multi</strong>を使って作ります。</p> <p><img class="gallery-image" data-flex-basis="800px" data-flex-grow="333" height="210" loading="lazy" sizes="(max-width: 767px) calc(100vw - 30px), (max-width: 1023px) 700px, (max-width: 1279px) 950px, 1232px" src="https://qwerty.work/post/2019/01/php-curl_multi-snsbutton/images/No-00.jpg" width="700"></p> <h3 id="これを表示するソース">これを表示するソース </h3><div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-text-size-adjust:none;"><code class="language-php" data-lang="php"><span style="display:flex;"><span><span style="color:#f92672">&lt;?</span><span style="color:#a6e22e">php</span> </span></span><span style="display:flex;"><span><span style="color:#75715e">//カウント数を取得したい対象URL </span></span></span><span style="display:flex;"><span>$targeturl <span style="color:#f92672">=</span> <span style="color:#e6db74">&#39;https://www.apple.com/jp/&#39;</span>; </span></span><span style="display:flex;"><span>$targeturl <span style="color:#f92672">=</span> <span style="color:#a6e22e">urlencode</span>($targeturl); </span></span><span style="display:flex;"><span> </span></span><span style="display:flex;"><span><span style="color:#75715e">//現在のページで取得したいとき </span></span></span><span style="display:flex;"><span><span style="color:#75715e">//$url = &#39;https://&#39;.$_SERVER[&#34;HTTP_HOST&#34;] . $_SERVER[&#34;REQUEST_URI&#34;]; </span></span></span><span style="display:flex;"><span> </span></span><span style="display:flex;"><span><span style="color:#75715e">// 並列通信用マルチハンドルを用 </span></span></span><span style="display:flex;"><span>$mh <span style="color:#f92672">=</span> <span style="color:#a6e22e">curl_multi_init</span>(); </span></span><span style="display:flex;"><span> </span></span><span style="display:flex;"><span><span style="color:#75715e">// APIごとにCurl Handleを作る </span></span></span><span style="display:flex;"><span><span style="color:#75715e">// Twitter </span></span></span><span style="display:flex;"><span>$ch_twitter <span style="color:#f92672">=</span> <span style="color:#a6e22e">curl_init</span>(<span style="color:#e6db74">&#34;http://jsoon.digitiminimi.com/twitter/count.json?url=</span><span style="color:#e6db74">$targeturl</span><span style="color:#e6db74">&#34;</span>); </span></span><span style="display:flex;"><span><span style="color:#a6e22e">curl_setopt</span>($ch_twitter, <span style="color:#a6e22e">CURLOPT_RETURNTRANSFER</span>, <span style="color:#66d9ef">TRUE</span>); </span></span><span style="display:flex;"><span><span style="color:#a6e22e">curl_multi_add_handle</span>($mh, $ch_twitter); </span></span><span style="display:flex;"><span> </span></span><span style="display:flex;"><span><span style="color:#75715e">// Facebook </span></span></span><span style="display:flex;"><span>$ch_facebook <span style="color:#f92672">=</span> <span style="color:#a6e22e">curl_init</span>(<span style="color:#e6db74">&#34;https://graph.facebook.com/?id=</span><span style="color:#e6db74">$targeturl</span><span style="color:#e6db74">&#34;</span>); </span></span><span style="display:flex;"><span><span style="color:#a6e22e">curl_setopt</span>($ch_facebook, <span style="color:#a6e22e">CURLOPT_RETURNTRANSFER</span>, <span style="color:#66d9ef">TRUE</span>); </span></span><span style="display:flex;"><span><span style="color:#a6e22e">curl_multi_add_handle</span>($mh, $ch_facebook); </span></span><span style="display:flex;"><span> </span></span><span style="display:flex;"><span><span style="color:#75715e">// Hatena </span></span></span><span style="display:flex;"><span>$ch_hatena <span style="color:#f92672">=</span> <span style="color:#a6e22e">curl_init</span>(<span style="color:#e6db74">&#34;https://b.hatena.ne.jp/entry.count?url=</span><span style="color:#e6db74">$targeturl</span><span style="color:#e6db74">&#34;</span>); </span></span><span style="display:flex;"><span><span style="color:#a6e22e">curl_setopt</span>($ch_hatena, <span style="color:#a6e22e">CURLOPT_RETURNTRANSFER</span>, <span style="color:#66d9ef">TRUE</span>); </span></span><span style="display:flex;"><span><span style="color:#a6e22e">curl_multi_add_handle</span>($mh, $ch_hatena); </span></span><span style="display:flex;"><span> </span></span><span style="display:flex;"><span><span style="color:#75715e">// Pocket </span></span></span><span style="display:flex;"><span>$ch_pocket <span style="color:#f92672">=</span> <span style="color:#a6e22e">curl_init</span>(<span style="color:#e6db74">&#34;https://widgets.getpocket.com/v1/button?v=1&amp;count=horizontal&amp;url=</span><span style="color:#e6db74">$targeturl</span><span style="color:#e6db74">&amp;src=</span><span style="color:#e6db74">$targeturl</span><span style="color:#e6db74">&#34;</span>);<span style="color:#a6e22e">curl_setopt</span>($ch_pocket, <span style="color:#a6e22e">CURLOPT_RETURNTRANSFER</span>, <span style="color:#66d9ef">TRUE</span>); </span></span><span style="display:flex;"><span><span style="color:#a6e22e">curl_multi_add_handle</span>($mh, $ch_pocket); </span></span><span style="display:flex;"><span> </span></span><span style="display:flex;"><span><span style="color:#75715e">// 複数の通信を非同期で同時実行 </span></span></span><span style="display:flex;"><span><span style="color:#66d9ef">do</span> { <span style="color:#a6e22e">curl_multi_exec</span>($mh, $running); } <span style="color:#66d9ef">while</span> ( $running ); </span></span><span style="display:flex;"><span> </span></span><span style="display:flex;"><span><span style="color:#75715e">// APIから戻ってきた値を変数に入れる </span></span></span><span style="display:flex;"><span>$json_twitter <span style="color:#f92672">=</span> <span style="color:#a6e22e">curl_multi_getcontent</span>($ch_twitter); </span></span><span style="display:flex;"><span>$json_facebook <span style="color:#f92672">=</span> <span style="color:#a6e22e">curl_multi_getcontent</span>($ch_facebook); </span></span><span style="display:flex;"><span>$count_hatena <span style="color:#f92672">=</span> <span style="color:#a6e22e">curl_multi_getcontent</span>($ch_hatena); </span></span><span style="display:flex;"><span>$html_pocket <span style="color:#f92672">=</span> <span style="color:#a6e22e">curl_multi_getcontent</span>($ch_pocket); </span></span><span style="display:flex;"><span> </span></span><span style="display:flex;"><span><span style="color:#75715e">//cURLハンドルセットを閉じる </span></span></span><span style="display:flex;"><span><span style="color:#a6e22e">curl_multi_remove_handle</span>($mh, $ch_twitter) </span></span><span style="display:flex;"><span><span style="color:#a6e22e">curl_close</span>($ch_twitter); </span></span><span style="display:flex;"><span><span style="color:#a6e22e">curl_multi_remove_handle</span>($mh, $ch_facebook); </span></span><span style="display:flex;"><span><span style="color:#a6e22e">curl_close</span>($ch_facebook); </span></span><span style="display:flex;"><span><span style="color:#a6e22e">curl_multi_remove_handle</span>($mh, $ch_hatena); </span></span><span style="display:flex;"><span><span style="color:#a6e22e">curl_close</span>($ch_hatena); </span></span><span style="display:flex;"><span><span style="color:#a6e22e">curl_multi_remove_handle</span>($mh, $ch_pocket); </span></span><span style="display:flex;"><span><span style="color:#a6e22e">curl_close</span>($ch_pocket); </span></span><span style="display:flex;"><span><span style="color:#a6e22e">curl_multi_close</span>($mh); </span></span><span style="display:flex;"><span> </span></span><span style="display:flex;"><span><span style="color:#75715e">/*デバッグ用 </span></span></span><span style="display:flex;"><span><span style="color:#75715e">var_dump($json_twitter).&#34;\n&#34;; </span></span></span><span style="display:flex;"><span><span style="color:#75715e">var_dump($json_facebook).&#34;\n&#34; </span></span></span><span style="display:flex;"><span><span style="color:#75715e">var_dump($count_hatena).&#34;\n&#34;; </span></span></span><span style="display:flex;"><span><span style="color:#75715e">var_dump($html_pocket).&#34;\n&#34;; </span></span></span><span style="display:flex;"><span><span style="color:#75715e">*/</span> </span></span><span style="display:flex;"><span> </span></span><span style="display:flex;"><span><span style="color:#75715e">//Twitterのカウント数を取り出す </span></span></span><span style="display:flex;"><span>$count_twtter <span style="color:#f92672">=</span> <span style="color:#a6e22e">json_decode</span>($json_twitter, <span style="color:#66d9ef">true</span> ); </span></span><span style="display:flex;"><span>$count_twtter <span style="color:#f92672">=</span> <span style="color:#a6e22e">num_format</span>(<span style="color:#a6e22e">strval</span>($count_twtter[<span style="color:#e6db74">&#39;count&#39;</span>])); </span></span><span style="display:flex;"><span> </span></span><span style="display:flex;"><span><span style="color:#75715e">//facebookのカウント数を取り出す </span></span></span><span style="display:flex;"><span>$count_facebook <span style="color:#f92672">=</span> <span style="color:#a6e22e">json_decode</span>($json_facebook, <span style="color:#66d9ef">true</span> ); </span></span><span style="display:flex;"><span>$count_facebook <span style="color:#f92672">=</span> <span style="color:#a6e22e">num_format</span>($count_facebook[<span style="color:#e6db74">&#39;share&#39;</span>][<span style="color:#e6db74">&#39;share_count&#39;</span>]); </span></span><span style="display:flex;"><span> </span></span><span style="display:flex;"><span><span style="color:#75715e">//Hatenaのカウント数を取り出す </span></span></span><span style="display:flex;"><span>$count_hatena <span style="color:#f92672">=</span> <span style="color:#a6e22e">num_format</span>($count_hatena); </span></span><span style="display:flex;"><span> </span></span><span style="display:flex;"><span><span style="color:#75715e">//Pocketのカウント数を取り出す </span></span></span><span style="display:flex;"><span><span style="color:#75715e">//HTML→DOM→XML→JSON→配列に変換 </span></span></span><span style="display:flex;"><span>$dom_pocket <span style="color:#f92672">=</span> <span style="color:#66d9ef">new</span> <span style="color:#a6e22e">DOMDocument</span>(<span style="color:#e6db74">&#39;1.0&#39;</span>, <span style="color:#e6db74">&#39;UTF-8&#39;</span>); </span></span><span style="display:flex;"><span>$dom_pocket<span style="color:#f92672">-&gt;</span><span style="color:#a6e22e">preserveWhiteSpace</span> <span style="color:#f92672">=</span> <span style="color:#66d9ef">false</span>; </span></span><span style="display:flex;"><span>$dom_pocket<span style="color:#f92672">-&gt;</span><span style="color:#a6e22e">loadHTML</span>($html_pocket); </span></span><span style="display:flex;"><span>$xmlString_pocket <span style="color:#f92672">=</span> $dom_pocket<span style="color:#f92672">-&gt;</span><span style="color:#a6e22e">saveXML</span>(); </span></span><span style="display:flex;"><span>$xmlObject_pocket <span style="color:#f92672">=</span> <span style="color:#a6e22e">simplexml_load_string</span>($xmlString_pocket); </span></span><span style="display:flex;"><span>$count_pocket <span style="color:#f92672">=</span> <span style="color:#a6e22e">json_decode</span>(<span style="color:#a6e22e">json_encode</span>($xmlObject_pocket), <span style="color:#66d9ef">true</span>); </span></span><span style="display:flex;"><span>$count_pocket <span style="color:#f92672">=</span> <span style="color:#a6e22e">num_format</span>(<span style="color:#a6e22e">strval</span>($count_pocket[<span style="color:#e6db74">&#39;body&#39;</span>][<span style="color:#e6db74">&#39;div&#39;</span>][<span style="color:#e6db74">&#39;a&#39;</span>][<span style="color:#e6db74">&#39;span&#39;</span>][<span style="color:#e6db74">&#39;em&#39;</span>])) </span></span><span style="display:flex;"><span><span style="color:#75715e">?&gt;</span><span style="color:#960050;background-color:#1e0010"> </span></span></span><span style="display:flex;"><span><span style="color:#960050;background-color:#1e0010"> </span></span></span><span style="display:flex;"><span><span style="color:#960050;background-color:#1e0010">&lt;!DOCTYPE html&gt; </span></span></span><span style="display:flex;"><span><span style="color:#960050;background-color:#1e0010"> &lt;html lang=&#34;ja&#34; itemscope itemtype=&#34;http://schema.org/WebPage&#34;&gt; </span></span></span><span style="display:flex;"><span><span style="color:#960050;background-color:#1e0010"> &lt;head&gt; </span></span></span><span style="display:flex;"><span><span style="color:#960050;background-color:#1e0010"> &lt;meta charset=&#34;UTF-8&#34;&gt; </span></span></span><span style="display:flex;"><span><span style="color:#960050;background-color:#1e0010"> &lt;meta http-equiv=&#34;X-UA-Compatible&#34; content=&#34;IE=edge&#34;&gt; </span></span></span><span style="display:flex;"><span><span style="color:#960050;background-color:#1e0010"> &lt;meta name=&#34;viewport&#34; content=&#34;width=device-width,initial-scale=1&#34;&gt;&lt;br&gt; &lt;meta http-equiv=&#34;x-dns-prefetch-control&#34; content=&#34;on&#34;&gt;&lt;br&gt; &lt;link rel=&#34;dns-prefetch&#34; href=&#34;//cdn.jsdelivr.net&#34;&gt; </span></span></span><span style="display:flex;"><span><span style="color:#960050;background-color:#1e0010">&lt;style&gt; </span></span></span><span style="display:flex;"><span><span style="color:#960050;background-color:#1e0010"> .sns-counter {&lt; </span></span></span><span style="display:flex;"><span><span style="color:#960050;background-color:#1e0010"> width: 100%; </span></span></span><span style="display:flex;"><span><span style="color:#960050;background-color:#1e0010"> } </span></span></span><span style="display:flex;"><span><span style="color:#960050;background-color:#1e0010"> .sns-counter li { </span></span></span><span style="display:flex;"><span><span style="color:#960050;background-color:#1e0010"> display: inline-block; </span></span></span><span style="display:flex;"><span><span style="color:#960050;background-color:#1e0010"> border-radius: 2px; </span></span></span><span style="display:flex;"><span><span style="color:#960050;background-color:#1e0010"> width: 80px; </span></span></span><span style="display:flex;"><span><span style="color:#960050;background-color:#1e0010"> padding: 3px; </span></span></span><span style="display:flex;"><span><span style="color:#960050;background-color:#1e0010"> margin-left: 3px; </span></span></span><span style="display:flex;"><span><span style="color:#960050;background-color:#1e0010"> } </span></span></span><span style="display:flex;"><span><span style="color:#960050;background-color:#1e0010"> .sns-counter li span { </span></span></span><span style="display:flex;"><span><span style="color:#960050;background-color:#1e0010"> display: inline-block; </span></span></span><span style="display:flex;"><span><span style="color:#960050;background-color:#1e0010"> text-align: center; </span></span></span><span style="display:flex;"><span><span style="color:#960050;background-color:#1e0010"> width: 70%; </span></span></span><span style="display:flex;"><span><span style="color:#960050;background-color:#1e0010"> font-size: 12px; </span></span></span><span style="display:flex;"><span><span style="color:#960050;background-color:#1e0010"> font-weight: bold; </span></span></span><span style="display:flex;"><span><span style="color:#960050;background-color:#1e0010"> color: #fff; </span></span></span><span style="display:flex;"><span><span style="color:#960050;background-color:#1e0010"> } </span></span></span><span style="display:flex;"><span><span style="color:#960050;background-color:#1e0010"> .sns-counter li i { </span></span></span><span style="display:flex;"><span><span style="color:#960050;background-color:#1e0010"> display: inline-block; </span></span></span><span style="display:flex;"><span><span style="color:#960050;background-color:#1e0010"> text-align: center; </span></span></span><span style="display:flex;"><span><span style="color:#960050;background-color:#1e0010"> width: 30%; </span></span></span><span style="display:flex;"><span><span style="color:#960050;background-color:#1e0010"> color: #fff; </span></span></span><span style="display:flex;"><span><span style="color:#960050;background-color:#1e0010"> font-size: 14px; </span></span></span><span style="display:flex;"><span><span style="color:#960050;background-color:#1e0010"> position: relative; </span></span></span><span style="display:flex;"><span><span style="color:#960050;background-color:#1e0010"> top: 1px; </span></span></span><span style="display:flex;"><span><span style="color:#960050;background-color:#1e0010"> } </span></span></span><span style="display:flex;"><span><span style="color:#960050;background-color:#1e0010"> .sns-counter .btn-tw { </span></span></span><span style="display:flex;"><span><span style="color:#960050;background-color:#1e0010"> background-color: #55ACEE; </span></span></span><span style="display:flex;"><span><span style="color:#960050;background-color:#1e0010"> } </span></span></span><span style="display:flex;"><span><span style="color:#960050;background-color:#1e0010"> .sns-counter .btn-fb { </span></span></span><span style="display:flex;"><span><span style="color:#960050;background-color:#1e0010"> background-color: #3A5795; </span></span></span><span style="display:flex;"><span><span style="color:#960050;background-color:#1e0010"> } </span></span></span><span style="display:flex;"><span><span style="color:#960050;background-color:#1e0010"> .sns-counter .btn-hb { </span></span></span><span style="display:flex;"><span><span style="color:#960050;background-color:#1e0010"> background-color: #008CE1; </span></span></span><span style="display:flex;"><span><span style="color:#960050;background-color:#1e0010"> } </span></span></span><span style="display:flex;"><span><span style="color:#960050;background-color:#1e0010"> .sns-counter .btn-pk { </span></span></span><span style="display:flex;"><span><span style="color:#960050;background-color:#1e0010"> background-color: #ef4357; </span></span></span><span style="display:flex;"><span><span style="color:#960050;background-color:#1e0010"> } </span></span></span><span style="display:flex;"><span><span style="color:#960050;background-color:#1e0010"> .sns-counter .btn-line { </span></span></span><span style="display:flex;"><span><span style="color:#960050;background-color:#1e0010"> background-color: #1dcd00; </span></span></span><span style="display:flex;"><span><span style="color:#960050;background-color:#1e0010"> } </span></span></span><span style="display:flex;"><span><span style="color:#960050;background-color:#1e0010"> .sns-counter .btn-total { </span></span></span><span style="display:flex;"><span><span style="color:#960050;background-color:#1e0010"> background-color: #000; </span></span></span><span style="display:flex;"><span><span style="color:#960050;background-color:#1e0010"> } </span></span></span><span style="display:flex;"><span><span style="color:#960050;background-color:#1e0010"> .btn-hb:hover,.btn-tw:hover,.btn-fb:hover,.btn-pk:hover,.btn-line:hover,.btn-total:hover { </span></span></span><span style="display:flex;"><span><span style="color:#960050;background-color:#1e0010"> background-color: #ccc; </span></span></span><span style="display:flex;"><span><span style="color:#960050;background-color:#1e0010"> }&lt; </span></span></span><span style="display:flex;"><span><span style="color:#960050;background-color:#1e0010"> i.fa-hatena:before { </span></span></span><span style="display:flex;"><span><span style="color:#960050;background-color:#1e0010"> content: &#34;B!&#34;; </span></span></span><span style="display:flex;"><span><span style="color:#960050;background-color:#1e0010"> font-family: Verdana; </span></span></span><span style="display:flex;"><span><span style="color:#960050;background-color:#1e0010"> font-weight: bold; </span></span></span><span style="display:flex;"><span><span style="color:#960050;background-color:#1e0010"> } </span></span></span><span style="display:flex;"><span><span style="color:#960050;background-color:#1e0010">&lt;/style&gt; </span></span></span><span style="display:flex;"><span><span style="color:#960050;background-color:#1e0010">&lt;/head&gt; </span></span></span><span style="display:flex;"><span><span style="color:#960050;background-color:#1e0010">&lt;body&gt; </span></span></span><span style="display:flex;"><span><span style="color:#960050;background-color:#1e0010">&lt;div&gt; </span></span></span><span style="display:flex;"><span><span style="color:#960050;background-color:#1e0010">&lt;ul class=&#34;sns-counter&#34; title=&#34;&lt;?php echo $targeturl; ?&gt;&#34;&gt;&lt;!-- </span></span></span><span style="display:flex;"><span><span style="color:#960050;background-color:#1e0010"> --&gt;&lt;li class=&#34;btn-tw&#34;&gt; </span></span></span><span style="display:flex;"><span><span style="color:#960050;background-color:#1e0010"> &lt;a href=&#34;//twitter.com/intent/tweet?url=&lt;?php echo $targeturl; ?&gt;&#34; target=&#34;_blank&#34;&gt; </span></span></span><span style="display:flex;"><span><span style="color:#960050;background-color:#1e0010"> &lt;i class=&#34;fab fa-twitter&#34;&gt;&lt;/i&gt;&lt;span&gt;&lt;?php echo $count_twtter; ?&gt;&lt;/span&gt; </span></span></span><span style="display:flex;"><span><span style="color:#960050;background-color:#1e0010"> &lt;/a&gt;&lt;br&gt; &lt;/li&gt;&lt;!-- </span></span></span><span style="display:flex;"><span><span style="color:#960050;background-color:#1e0010"> --&gt;&lt;li class=&#34;btn-fb&#34;&gt; </span></span></span><span style="display:flex;"><span><span style="color:#960050;background-color:#1e0010"> &lt;a href=&#34;//www.facebook.com/sharer/sharer.php?u=&lt;?php echo $targeturl; ?&gt;&#34; onclick=&#34;window.open(&#39;https://www.facebook.com/sharer/sharer.php?u=&lt;?php echo $targeturl; ?&gt;&#39;, &#39;new&#39;, &#39;width=500,height=300&#39;);return false;&#34; target=&#34;_blank&#34;&gt; </span></span></span><span style="display:flex;"><span><span style="color:#960050;background-color:#1e0010"> &lt;i class=&#34;fab fa-facebook-f&#34;&gt;&lt;/i&gt;&lt;span&gt;&lt;?php echo $count_facebook; ?&gt;&lt;/span&gt; </span></span></span><span style="display:flex;"><span><span style="color:#960050;background-color:#1e0010"> &lt;/a&gt; </span></span></span><span style="display:flex;"><span><span style="color:#960050;background-color:#1e0010"> &lt;/li&gt;&lt;!-- </span></span></span><span style="display:flex;"><span><span style="color:#960050;background-color:#1e0010"> --&gt;&lt;li class=&#34;btn-hb&#34;&gt; </span></span></span><span style="display:flex;"><span><span style="color:#960050;background-color:#1e0010"> &lt;a href=&#34;//b.hatena.ne.jp/entry/&lt;?php echo $targeturl; ?&gt;&#34; target=&#34;_blank&#34;&gt; </span></span></span><span style="display:flex;"><span><span style="color:#960050;background-color:#1e0010"> &lt;i class=&#34;fa fa-hatena&#34;&gt;&lt;/i&gt;&lt;span&gt;&lt;?php echo $count_hatena; ?&gt;&lt;/span&gt; </span></span></span><span style="display:flex;"><span><span style="color:#960050;background-color:#1e0010"> &lt;/a&gt; </span></span></span><span style="display:flex;"><span><span style="color:#960050;background-color:#1e0010"> &lt;/li&gt;&lt;!-- </span></span></span><span style="display:flex;"><span><span style="color:#960050;background-color:#1e0010"> --&gt;&lt;li class=&#34;btn-pk&#34;&gt; </span></span></span><span style="display:flex;"><span><span style="color:#960050;background-color:#1e0010"> &lt;a href=&#34;//getpocket.com/edit?url=&lt;?php echo $targeturl; ?&gt;&#34; target=&#34;_blank&#34;&gt; </span></span></span><span style="display:flex;"><span><span style="color:#960050;background-color:#1e0010"> &lt;i class=&#34;fab fa-get-pocket&#34;&gt;&lt;/i&gt;&lt;span&gt;&lt;?php echo $count_pocket; ?&gt;&lt;/span&gt; </span></span></span><span style="display:flex;"><span><span style="color:#960050;background-color:#1e0010"> &lt;/a&gt; </span></span></span><span style="display:flex;"><span><span style="color:#960050;background-color:#1e0010"> &lt;/li&gt;&lt;!-- </span></span></span><span style="display:flex;"><span><span style="color:#960050;background-color:#1e0010"> --&gt;&lt;li class=&#34;btn-line&#34;&gt; </span></span></span><span style="display:flex;"><span><span style="color:#960050;background-color:#1e0010"> &lt;a href=&#34;//social-plugins.line.me/lineit/share?url=&lt;?php echo $targeturl; ?&gt;&#34; target=&#34;_blank&#34;&gt; </span></span></span><span style="display:flex;"><span><span style="color:#960050;background-color:#1e0010"> &lt;i class=&#34;fab fa-line&#34;&gt;&lt;/i&gt;&lt;span&gt;LINE&lt;/span&gt; </span></span></span><span style="display:flex;"><span><span style="color:#960050;background-color:#1e0010"> &lt;/a&gt; </span></span></span><span style="display:flex;"><span><span style="color:#960050;background-color:#1e0010"> &lt;/li&gt; </span></span></span><span style="display:flex;"><span><span style="color:#960050;background-color:#1e0010">&lt;/ul&gt; </span></span></span><span style="display:flex;"><span><span style="color:#960050;background-color:#1e0010">&lt;/div&gt; </span></span></span><span style="display:flex;"><span><span style="color:#960050;background-color:#1e0010">&lt;script&gt; </span></span></span><span style="display:flex;"><span><span style="color:#960050;background-color:#1e0010">window.addEventListener(&#34;load&#34;,function(){ </span></span></span><span style="display:flex;"><span><span style="color:#960050;background-color:#1e0010"> const css=[ &#34;//cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@5.6.3/css/all.min.css&#34; ]; </span></span></span><span style="display:flex;"><span><span style="color:#960050;background-color:#1e0010"> for(i in css){ </span></span></span><span style="display:flex;"><span><span style="color:#960050;background-color:#1e0010"> let html=document.createElement(&#34;link&#34;); </span></span></span><span style="display:flex;"><span><span style="color:#960050;background-color:#1e0010"> html.rel=&#34;stylesheet&#34;;html.href=css[i]; </span></span></span><span style="display:flex;"><span><span style="color:#960050;background-color:#1e0010"> html.async=true;document.head.appendChild(html); </span></span></span><span style="display:flex;"><span><span style="color:#960050;background-color:#1e0010"> } </span></span></span><span style="display:flex;"><span><span style="color:#960050;background-color:#1e0010">}); </span></span></span><span style="display:flex;"><span><span style="color:#960050;background-color:#1e0010">&lt;/script&gt; </span></span></span><span style="display:flex;"><span><span style="color:#960050;background-color:#1e0010">&lt;/body&gt; </span></span></span><span style="display:flex;"><span><span style="color:#960050;background-color:#1e0010">&lt;/html&gt; </span></span></span></code></pre></div><h3 id="たった05秒だけど速い">たった0.5秒だけど速い！ </h3><p><a class="link" href="https://qwerty.work/blog/2019/01/php-sns-share-button.php" target="_blank" rel="noopener" >前回</a>は<strong>平均2秒</strong>だったのが今回<strong>1.5秒</strong>になりました。</p> <p><img class="gallery-image" data-flex-basis="492px" data-flex-grow="205" height="341" loading="lazy" sizes="(max-width: 767px) calc(100vw - 30px), (max-width: 1023px) 700px, (max-width: 1279px) 950px, 1232px" src="https://qwerty.work/post/2019/01/php-curl_multi-snsbutton/images/No-01.jpg" width="700"></p> <p>期待していたのは1秒以下だったのですが、<strong>curl_multi</strong>を使った効果はありました。非同期なのはAPIから結果を取得しに行く部分で、表示は非同期ではありません。よってブログのページにこのボタンを埋め込むとこの1.5秒分ほどページ全体の表示を遅くさせる可能性があります。それでも純正のシェアボタンを使うよりは速いと思います。</p> <p>表示も非同期にしたいときはPHPでカウント数を呼び出す部分をJavascriptから実行させることができれば可能かもしれません。jQueryでできるらしいので今度試してみたいと思います。</p> <h3 id="20190117追記">2019/01/17追記 </h3><p>jQueryから非同期でPHPを実行する方法をやってみました。</p> <ul> <li><a class="link" href="https://qwerty.work/blog/2019/01/jquery-ajax-php-async.php" target="_blank" rel="noopener" >jQueryのAjaxからカウント数付のソーシャルボタンを出力するPHPを非同期で実行する</a></li> </ul> <h3 id="参考サイト">参考サイト </h3> <div class="link-card"> <a href="http://php.net/manual/ja/ref.curl.php" target="_blank" rel="noopener noreferrer"> <div class="link-card-image"> <img src="https://image.thum.io/get/width/300/crop/200/http://php.net/manual/ja/ref.curl.php" alt="http://php.net/manual/ja/ref.curl.php" loading="lazy"> </div> <div class="link-card-body"> <span class="link-card-title">http://php.net/manual/ja/ref.curl.php</span> <span class="link-card-url">http://php.net/manual/ja/ref.curl.php</span> </div> </a> </div> <div class="link-card"> <a href="http://asklife.info/archives/3335" target="_blank" rel="noopener noreferrer"> <div class="link-card-image"> <img src="https://image.thum.io/get/width/300/crop/200/http://asklife.info/archives/3335" alt="http://asklife.info/archives/3335" loading="lazy"> </div> <div class="link-card-body"> <span class="link-card-title">http://asklife.info/archives/3335</span> <span class="link-card-url">http://asklife.info/archives/3335</span> </div> </a> </div> <div class="link-card"> <a href="https://minory.org/php-curl_multi.html" target="_blank" rel="noopener noreferrer"> <div class="link-card-image"> <img src="https://image.thum.io/get/width/300/crop/200/https://minory.org/php-curl_multi.html" alt="https://minory.org/php-curl_multi.html" loading="lazy"> </div> <div class="link-card-body"> <span class="link-card-title">https://minory.org/php-curl_multi.html</span> <span class="link-card-url">https://minory.org/php-curl_multi.html</span> </div> </a> </div> <div class="link-card"> <a href="https://techblog.yahoo.co.jp/architecture/api1_curl_multi/" target="_blank" rel="noopener noreferrer"> <div class="link-card-image"> <img src="https://image.thum.io/get/width/300/crop/200/https://techblog.yahoo.co.jp/architecture/api1_curl_multi/" alt="https://techblog.yahoo.co.jp/architecture/api1_curl_multi/" loading="lazy"> </div> <div class="link-card-body"> <span class="link-card-title">https://techblog.yahoo.co.jp/architecture/api1_curl_multi/</span> <span class="link-card-url">https://techblog.yahoo.co.jp/architecture/api1_curl_multi/</span> </div> </a> </div> https://qwerty.work/post/2019/01/php-sns-share-button/ Fri, 11 Jan 2019 23:56:13 +0900 https://qwerty.work/post/2019/01/php-sns-share-button/ <h3 id="カウント付snsシェアボタンをphpで作ってみる">カウント付SNSシェアボタンをPHPで作ってみる </h3><p>SNSのシェボタンを全部公式のボタンで作るとかなり表示が遅なくなるので、<strong>Twitter</strong>、<strong>Facebook</strong>、<strong>はてブ</strong>、<strong>Pocket</strong> のSNSシェアボタンを作ることにしました。。シェアされているカウント付で非同期で実行できるJavascriptを使って行いたいところですが、Javascriptを扱う実力がないので、今回はをPHPで実力の範囲内でチャレンジしてみました。</p> <h4 id="うまくいけばこんなボタンが表示されます">うまくいけばこんなボタンが表示されます </h4><p><img class="gallery-image" data-flex-basis="800px" data-flex-grow="333" height="210" loading="lazy" sizes="(max-width: 767px) calc(100vw - 30px), (max-width: 1023px) 700px, (max-width: 1279px) 950px, 1232px" src="https://qwerty.work/post/2019/01/php-sns-share-button/images/No-00.jpg" width="700"></p> <h3 id="これを表示するphpとhtmlコード">これを表示するPHPとHTMLコード </h3><p>仮に、AppleのWEBサイト（<a class="link" href="https://www.apple.com/jp/" target="_blank" rel="noopener" >https://www.apple.com/jp/</a>）をシェアするためのSNSボタンとして記載しています。アイコンは<a class="link" href="https://fontawesome.com/" target="_blank" rel="noopener" >Font Awesome</a>をCDNから非同期で読み込むようにしています。</p> <div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-text-size-adjust:none;"><code class="language-php" data-lang="php"><span style="display:flex;"><span><span style="color:#f92672">&lt;?</span><span style="color:#a6e22e">php</span> </span></span><span style="display:flex;"><span><span style="color:#f92672">&lt;</span><span style="color:#a6e22e">br</span><span style="color:#f92672">&gt;</span> </span></span><span style="display:flex;"><span><span style="color:#75715e">//カウント数を取得したい対象URL（サンプル） </span></span></span><span style="display:flex;"><span>$url <span style="color:#f92672">=</span> <span style="color:#e6db74">&#39;https://www.apple.com/jp/&#39;</span>; </span></span><span style="display:flex;"><span><span style="color:#f92672">&lt;</span><span style="color:#a6e22e">br</span><span style="color:#f92672">&gt;</span> </span></span><span style="display:flex;"><span><span style="color:#75715e">//現在のページで取得したいとき </span></span></span><span style="display:flex;"><span><span style="color:#75715e">//$url = &#39;https://&#39;.$_SERVER[&#34;HTTP_HOST&#34;] . $_SERVER[&#34;REQUEST_URI&#34;]; </span></span></span><span style="display:flex;"><span><span style="color:#f92672">&lt;</span><span style="color:#a6e22e">br</span><span style="color:#f92672">&gt;</span> </span></span><span style="display:flex;"><span><span style="color:#75715e">//Twitter// </span></span></span><span style="display:flex;"><span><span style="color:#66d9ef">function</span> <span style="color:#a6e22e">get_twitter_count</span>($url) { </span></span><span style="display:flex;"><span> $url <span style="color:#f92672">=</span> <span style="color:#a6e22e">urlencode</span>($url); </span></span><span style="display:flex;"><span> $ch <span style="color:#f92672">=</span> <span style="color:#a6e22e">curl_init</span>(<span style="color:#e6db74">&#34;http://jsoon.digitiminimi.com/twitter/count.json?url=</span><span style="color:#e6db74">$url</span><span style="color:#e6db74">&#34;</span>); </span></span><span style="display:flex;"><span> <span style="color:#a6e22e">curl_setopt</span>($ch, <span style="color:#a6e22e">CURLOPT_RETURNTRANSFER</span>, <span style="color:#66d9ef">true</span>); </span></span><span style="display:flex;"><span> $json <span style="color:#f92672">=</span> <span style="color:#a6e22e">curl_exec</span>($ch); </span></span><span style="display:flex;"><span> <span style="color:#a6e22e">curl_close</span>($ch); </span></span><span style="display:flex;"><span> $array <span style="color:#f92672">=</span> <span style="color:#a6e22e">json_decode</span>($json, <span style="color:#66d9ef">true</span> ) ; </span></span><span style="display:flex;"><span> $count <span style="color:#f92672">=</span> <span style="color:#a6e22e">strval</span>($array[<span style="color:#e6db74">&#39;count&#39;</span>]); </span></span><span style="display:flex;"><span> $count <span style="color:#f92672">=</span> <span style="color:#a6e22e">num_format</span>($count); </span></span><span style="display:flex;"><span> <span style="color:#66d9ef">return</span> $count; </span></span><span style="display:flex;"><span> } </span></span><span style="display:flex;"><span><span style="color:#f92672">&lt;</span><span style="color:#a6e22e">br</span><span style="color:#f92672">&gt;</span> </span></span><span style="display:flex;"><span><span style="color:#75715e">//facebook// </span></span></span><span style="display:flex;"><span><span style="color:#66d9ef">function</span> <span style="color:#a6e22e">get_facebook_count</span>($url) { </span></span><span style="display:flex;"><span> $url <span style="color:#f92672">=</span> <span style="color:#a6e22e">urlencode</span>($url); </span></span><span style="display:flex;"><span> $ch <span style="color:#f92672">=</span> <span style="color:#a6e22e">curl_init</span>(<span style="color:#e6db74">&#34;https://graph.facebook.com/?id=</span><span style="color:#e6db74">$url</span><span style="color:#e6db74">&#34;</span>); </span></span><span style="display:flex;"><span> <span style="color:#a6e22e">curl_setopt</span>($ch, <span style="color:#a6e22e">CURLOPT_RETURNTRANSFER</span>, <span style="color:#66d9ef">true</span>); </span></span><span style="display:flex;"><span> $json <span style="color:#f92672">=</span> <span style="color:#a6e22e">curl_exec</span>($ch); </span></span><span style="display:flex;"><span> <span style="color:#a6e22e">curl_close</span>($ch); </span></span><span style="display:flex;"><span> $array <span style="color:#f92672">=</span> <span style="color:#a6e22e">json_decode</span>($json, <span style="color:#66d9ef">true</span> ) ; </span></span><span style="display:flex;"><span> $count <span style="color:#f92672">=</span> $array[<span style="color:#e6db74">&#39;share&#39;</span>][<span style="color:#e6db74">&#39;share_count&#39;</span>]; </span></span><span style="display:flex;"><span> $count <span style="color:#f92672">=</span> <span style="color:#a6e22e">num_format</span>($count); </span></span><span style="display:flex;"><span> <span style="color:#66d9ef">return</span> $count; </span></span><span style="display:flex;"><span>} </span></span><span style="display:flex;"><span><span style="color:#f92672">&lt;</span><span style="color:#a6e22e">br</span><span style="color:#f92672">&gt;</span> </span></span><span style="display:flex;"><span><span style="color:#75715e">//Hatena </span></span></span><span style="display:flex;"><span> <span style="color:#66d9ef">function</span> <span style="color:#a6e22e">get_hatena_count</span>($url) { </span></span><span style="display:flex;"><span> $url <span style="color:#f92672">=</span> <span style="color:#a6e22e">urlencode</span>($url); </span></span><span style="display:flex;"><span> $ch <span style="color:#f92672">=</span> <span style="color:#a6e22e">curl_init</span>(<span style="color:#e6db74">&#34;https://b.hatena.ne.jp/entry.count?url=</span><span style="color:#e6db74">$url</span><span style="color:#e6db74">&#34;</span>); </span></span><span style="display:flex;"><span> <span style="color:#a6e22e">curl_setopt</span>($ch, <span style="color:#a6e22e">CURLOPT_RETURNTRANSFER</span>, <span style="color:#66d9ef">true</span>); </span></span><span style="display:flex;"><span> $count <span style="color:#f92672">=</span> <span style="color:#a6e22e">curl_exec</span>($ch); </span></span><span style="display:flex;"><span> <span style="color:#a6e22e">curl_close</span>($ch); </span></span><span style="display:flex;"><span> $count <span style="color:#f92672">=</span> <span style="color:#a6e22e">num_format</span>($count); </span></span><span style="display:flex;"><span> <span style="color:#66d9ef">return</span> $count; </span></span><span style="display:flex;"><span>} </span></span><span style="display:flex;"><span><span style="color:#f92672">&lt;</span><span style="color:#a6e22e">br</span><span style="color:#f92672">&gt;</span> </span></span><span style="display:flex;"><span><span style="color:#75715e">//Pocket </span></span></span><span style="display:flex;"><span> <span style="color:#66d9ef">function</span> <span style="color:#a6e22e">get_pocket_count</span>($url) { </span></span><span style="display:flex;"><span> $url <span style="color:#f92672">=</span> <span style="color:#a6e22e">urlencode</span>($url); </span></span><span style="display:flex;"><span><span style="color:#f92672">&lt;</span><span style="color:#a6e22e">br</span><span style="color:#f92672">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#75715e">//指定されたURLのPocketボタンを取得 </span></span></span><span style="display:flex;"><span> $ch <span style="color:#f92672">=</span> <span style="color:#a6e22e">curl_init</span>(<span style="color:#e6db74">&#34;https://widgets.getpocket.com/v1/button?v=1&amp;count=horizontal&amp;url=</span><span style="color:#e6db74">$url</span><span style="color:#e6db74">&amp;src=</span><span style="color:#e6db74">$url</span><span style="color:#e6db74">&#34;</span>); </span></span><span style="display:flex;"><span> <span style="color:#a6e22e">curl_setopt</span>($ch,<span style="color:#a6e22e">CURLOPT_RETURNTRANSFER</span>, <span style="color:#66d9ef">true</span>); </span></span><span style="display:flex;"><span> $html <span style="color:#f92672">=</span> <span style="color:#a6e22e">curl_exec</span>($ch); </span></span><span style="display:flex;"><span> <span style="color:#a6e22e">curl_close</span>($ch); </span></span><span style="display:flex;"><span><span style="color:#f92672">&lt;</span><span style="color:#a6e22e">br</span><span style="color:#f92672">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#75715e">//PocketボタンのHTMLソースを読み込みXMLパーサーを作成 </span></span></span><span style="display:flex;"><span> $dom <span style="color:#f92672">=</span> <span style="color:#66d9ef">new</span> <span style="color:#a6e22e">DOMDocument</span>(<span style="color:#e6db74">&#39;1.0&#39;</span>, <span style="color:#e6db74">&#39;UTF-8&#39;</span>); </span></span><span style="display:flex;"><span> $dom<span style="color:#f92672">-&gt;</span><span style="color:#a6e22e">preserveWhiteSpace</span> <span style="color:#f92672">=</span> <span style="color:#66d9ef">false</span>; </span></span><span style="display:flex;"><span> $dom<span style="color:#f92672">-&gt;</span><span style="color:#a6e22e">loadHTML</span>($html); </span></span><span style="display:flex;"><span> $xmlString <span style="color:#f92672">=</span> $dom<span style="color:#f92672">-&gt;</span><span style="color:#a6e22e">saveXML</span>(); </span></span><span style="display:flex;"><span> $xmlObject <span style="color:#f92672">=</span> <span style="color:#a6e22e">simplexml_load_string</span>($xmlString); </span></span><span style="display:flex;"><span><span style="color:#f92672">&lt;</span><span style="color:#a6e22e">br</span><span style="color:#f92672">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#75715e">//XMLをJSONに変換 </span></span></span><span style="display:flex;"><span> $array <span style="color:#f92672">=</span> <span style="color:#a6e22e">json_decode</span>(<span style="color:#a6e22e">json_encode</span>($xmlObject), <span style="color:#66d9ef">true</span>); </span></span><span style="display:flex;"><span><span style="color:#f92672">&lt;</span><span style="color:#a6e22e">br</span><span style="color:#f92672">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#75715e">//配列からカウント数を文字列として取り出す </span></span></span><span style="display:flex;"><span> $count <span style="color:#f92672">=</span> <span style="color:#a6e22e">strval</span>($array[<span style="color:#e6db74">&#39;body&#39;</span>][<span style="color:#e6db74">&#39;div&#39;</span>][<span style="color:#e6db74">&#39;a&#39;</span>][<span style="color:#e6db74">&#39;span&#39;</span>][<span style="color:#e6db74">&#39;em&#39;</span>]); </span></span><span style="display:flex;"><span> $count <span style="color:#f92672">=</span> <span style="color:#a6e22e">num_format</span>($count); </span></span><span style="display:flex;"><span> <span style="color:#66d9ef">return</span> $count; </span></span><span style="display:flex;"><span>} </span></span><span style="display:flex;"><span><span style="color:#f92672">&lt;</span><span style="color:#a6e22e">br</span><span style="color:#f92672">&gt;</span> </span></span><span style="display:flex;"><span><span style="color:#66d9ef">function</span> <span style="color:#a6e22e">num_format</span>($count) { </span></span><span style="display:flex;"><span> <span style="color:#75715e">//3桁区切りのカンマを削除 </span></span></span><span style="display:flex;"><span> $count <span style="color:#f92672">=</span> <span style="color:#a6e22e">str_replace</span>(<span style="color:#e6db74">&#39;,&#39;</span>,<span style="color:#e6db74">&#39;&#39;</span>,$count); </span></span><span style="display:flex;"><span> <span style="color:#75715e">//数値に変換 </span></span></span><span style="display:flex;"><span> $count <span style="color:#f92672">=</span> <span style="color:#a6e22e">intval</span>($count); </span></span><span style="display:flex;"><span> <span style="color:#75715e">// 共有数を表示 </span></span></span><span style="display:flex;"><span> <span style="color:#66d9ef">return</span> <span style="color:#a6e22e">isset</span>($count) <span style="color:#f92672">?</span> <span style="color:#a6e22e">intval</span>($count) <span style="color:#f92672">:</span> <span style="color:#ae81ff">0</span> ; </span></span><span style="display:flex;"><span>} </span></span><span style="display:flex;"><span><span style="color:#f92672">&lt;</span><span style="color:#a6e22e">br</span><span style="color:#f92672">&gt;</span> </span></span><span style="display:flex;"><span> <span style="color:#75715e">/* </span></span></span><span style="display:flex;"><span><span style="color:#75715e"> //カウント数表示(デバッグ用) </span></span></span><span style="display:flex;"><span><span style="color:#75715e"> echo $url.&#34;&lt;br&gt;\n&#34;; </span></span></span><span style="display:flex;"><span><span style="color:#75715e"> echo urlencode($url).&#34;&lt;br&gt;\n&#34;; </span></span></span><span style="display:flex;"><span><span style="color:#75715e"> echo &#39;Facebook→ &#39;.get_facebook_count($url).&#34;&lt;br&gt;\n&#34; </span></span></span><span style="display:flex;"><span><span style="color:#75715e"> echo &#39;Twitter→ &#39;.get_twitter_count($url).&#34;&lt;br&gt;\n&#34; </span></span></span><span style="display:flex;"><span><span style="color:#75715e"> echo &#39;Hatena→ &#39;.get_hatena_count($url).&#34;&lt;br&gt;\n&#34; </span></span></span><span style="display:flex;"><span><span style="color:#75715e"> echo &#39;Pocket→ &#39;.get_pocket_count($url).&#34;&lt;br&gt;\n&#34; </span></span></span><span style="display:flex;"><span><span style="color:#75715e"> */</span> </span></span><span style="display:flex;"><span><span style="color:#f92672">&lt;</span><span style="color:#a6e22e">br</span><span style="color:#f92672">&gt;</span> </span></span><span style="display:flex;"><span><span style="color:#75715e">?&gt;</span><span style="color:#960050;background-color:#1e0010"> </span></span></span><span style="display:flex;"><span><span style="color:#960050;background-color:#1e0010">&lt;!DOCTYPE html&gt; </span></span></span><span style="display:flex;"><span><span style="color:#960050;background-color:#1e0010">&lt;html lang=&#34;ja&#34; itemscope itemtype=&#34;http://schema.org/WebPage&#34;&gt; </span></span></span><span style="display:flex;"><span><span style="color:#960050;background-color:#1e0010">&lt;head&gt; </span></span></span><span style="display:flex;"><span><span style="color:#960050;background-color:#1e0010">&lt;meta charset=&#34;UTF-8&#34;&gt; </span></span></span><span style="display:flex;"><span><span style="color:#960050;background-color:#1e0010">&lt;meta http-equiv=&#34;X-UA-Compatible&#34; content=&#34;IE=edge&#34;&gt; </span></span></span><span style="display:flex;"><span><span style="color:#960050;background-color:#1e0010">&lt;meta name=&#34;viewport&#34; content=&#34;width=device-width,initial-scale=1&#34;&gt; </span></span></span><span style="display:flex;"><span><span style="color:#960050;background-color:#1e0010">&lt;link rel=&#34;stylesheet&#34; href=&#34;https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@5.6.3/css/all.min.css&#34;&gt; </span></span></span><span style="display:flex;"><span><span style="color:#960050;background-color:#1e0010">&lt;style&gt; </span></span></span><span style="display:flex;"><span><span style="color:#960050;background-color:#1e0010">.snsbtn { </span></span></span><span style="display:flex;"><span><span style="color:#960050;background-color:#1e0010"> width: 100%; </span></span></span><span style="display:flex;"><span><span style="color:#960050;background-color:#1e0010"> } </span></span></span><span style="display:flex;"><span><span style="color:#960050;background-color:#1e0010">&lt;br&gt; </span></span></span><span style="display:flex;"><span><span style="color:#960050;background-color:#1e0010">.snsbtn li { </span></span></span><span style="display:flex;"><span><span style="color:#960050;background-color:#1e0010"> display: inline-block; </span></span></span><span style="display:flex;"><span><span style="color:#960050;background-color:#1e0010"> border-radius: 2px; </span></span></span><span style="display:flex;"><span><span style="color:#960050;background-color:#1e0010"> width: 80px; </span></span></span><span style="display:flex;"><span><span style="color:#960050;background-color:#1e0010"> padding: 3px; </span></span></span><span style="display:flex;"><span><span style="color:#960050;background-color:#1e0010"> margin-left: 3px; </span></span></span><span style="display:flex;"><span><span style="color:#960050;background-color:#1e0010"> } </span></span></span><span style="display:flex;"><span><span style="color:#960050;background-color:#1e0010">&lt;br&gt; </span></span></span><span style="display:flex;"><span><span style="color:#960050;background-color:#1e0010">.snsbtn li span { </span></span></span><span style="display:flex;"><span><span style="color:#960050;background-color:#1e0010"> display: inline-block; </span></span></span><span style="display:flex;"><span><span style="color:#960050;background-color:#1e0010"> text-align: center; </span></span></span><span style="display:flex;"><span><span style="color:#960050;background-color:#1e0010"> width: 70%; </span></span></span><span style="display:flex;"><span><span style="color:#960050;background-color:#1e0010"> font-size: 12px; </span></span></span><span style="display:flex;"><span><span style="color:#960050;background-color:#1e0010"> font-weight: bold; </span></span></span><span style="display:flex;"><span><span style="color:#960050;background-color:#1e0010"> color: #fff; </span></span></span><span style="display:flex;"><span><span style="color:#960050;background-color:#1e0010"> } </span></span></span><span style="display:flex;"><span><span style="color:#960050;background-color:#1e0010">&lt;br&gt; </span></span></span><span style="display:flex;"><span><span style="color:#960050;background-color:#1e0010">.snsbtn li i { </span></span></span><span style="display:flex;"><span><span style="color:#960050;background-color:#1e0010"> display: inline-block; </span></span></span><span style="display:flex;"><span><span style="color:#960050;background-color:#1e0010"> text-align: center; </span></span></span><span style="display:flex;"><span><span style="color:#960050;background-color:#1e0010"> width: 30%; </span></span></span><span style="display:flex;"><span><span style="color:#960050;background-color:#1e0010"> color: #fff; </span></span></span><span style="display:flex;"><span><span style="color:#960050;background-color:#1e0010"> font-size: 14px; </span></span></span><span style="display:flex;"><span><span style="color:#960050;background-color:#1e0010"> position: relative; </span></span></span><span style="display:flex;"><span><span style="color:#960050;background-color:#1e0010"> top: 1px; </span></span></span><span style="display:flex;"><span><span style="color:#960050;background-color:#1e0010"> } </span></span></span><span style="display:flex;"><span><span style="color:#960050;background-color:#1e0010">&lt;br&gt; </span></span></span><span style="display:flex;"><span><span style="color:#960050;background-color:#1e0010">.snsbtn .btn-tw { </span></span></span><span style="display:flex;"><span><span style="color:#960050;background-color:#1e0010"> background-color: #55ACEE; </span></span></span><span style="display:flex;"><span><span style="color:#960050;background-color:#1e0010"> } </span></span></span><span style="display:flex;"><span><span style="color:#960050;background-color:#1e0010">&lt;br&gt; </span></span></span><span style="display:flex;"><span><span style="color:#960050;background-color:#1e0010">.snsbtn .btn-fb { </span></span></span><span style="display:flex;"><span><span style="color:#960050;background-color:#1e0010"> background-color: #3A5795; </span></span></span><span style="display:flex;"><span><span style="color:#960050;background-color:#1e0010"> } </span></span></span><span style="display:flex;"><span><span style="color:#960050;background-color:#1e0010">&lt;br&gt; </span></span></span><span style="display:flex;"><span><span style="color:#960050;background-color:#1e0010">.snsbtn .btn-hb { </span></span></span><span style="display:flex;"><span><span style="color:#960050;background-color:#1e0010"> background-color: #008CE1; </span></span></span><span style="display:flex;"><span><span style="color:#960050;background-color:#1e0010"> } </span></span></span><span style="display:flex;"><span><span style="color:#960050;background-color:#1e0010">&lt;br&gt; </span></span></span><span style="display:flex;"><span><span style="color:#960050;background-color:#1e0010">.snsbtn .btn-pk { </span></span></span><span style="display:flex;"><span><span style="color:#960050;background-color:#1e0010"> background-color: #ef4357; </span></span></span><span style="display:flex;"><span><span style="color:#960050;background-color:#1e0010"> } </span></span></span><span style="display:flex;"><span><span style="color:#960050;background-color:#1e0010">&lt;br&gt; </span></span></span><span style="display:flex;"><span><span style="color:#960050;background-color:#1e0010">.snsbtn .btn-line { </span></span></span><span style="display:flex;"><span><span style="color:#960050;background-color:#1e0010"> background-color: #1dcd00; </span></span></span><span style="display:flex;"><span><span style="color:#960050;background-color:#1e0010"> } </span></span></span><span style="display:flex;"><span><span style="color:#960050;background-color:#1e0010">&lt;br&gt; </span></span></span><span style="display:flex;"><span><span style="color:#960050;background-color:#1e0010">.btn-hb:hover,.btn-tw:hover,.btn-fb:hover,.btn-pk:hover,.btn-line:hover { </span></span></span><span style="display:flex;"><span><span style="color:#960050;background-color:#1e0010"> background-color: #ccc; </span></span></span><span style="display:flex;"><span><span style="color:#960050;background-color:#1e0010"> } </span></span></span><span style="display:flex;"><span><span style="color:#960050;background-color:#1e0010">&lt;br&gt; </span></span></span><span style="display:flex;"><span><span style="color:#960050;background-color:#1e0010">i.fa-hatena:before { </span></span></span><span style="display:flex;"><span><span style="color:#960050;background-color:#1e0010"> content: &#34;B!&#34;; </span></span></span><span style="display:flex;"><span><span style="color:#960050;background-color:#1e0010"> font-family: Verdana; </span></span></span><span style="display:flex;"><span><span style="color:#960050;background-color:#1e0010"> font-weight: bold; </span></span></span><span style="display:flex;"><span><span style="color:#960050;background-color:#1e0010"> } </span></span></span><span style="display:flex;"><span><span style="color:#960050;background-color:#1e0010">&lt;br&gt; </span></span></span><span style="display:flex;"><span><span style="color:#960050;background-color:#1e0010">&lt;/style&gt; </span></span></span><span style="display:flex;"><span><span style="color:#960050;background-color:#1e0010">&lt;/head&gt; </span></span></span><span style="display:flex;"><span><span style="color:#960050;background-color:#1e0010">&lt;body&gt; </span></span></span><span style="display:flex;"><span><span style="color:#960050;background-color:#1e0010">&lt;div class=&#34;entry-social-buttons clearfix&#34;&gt; </span></span></span><span style="display:flex;"><span><span style="color:#960050;background-color:#1e0010">&lt;ul class=&#34;snsbtn share&#34; title=&#34;&lt;?php echo urlencode($url); ?&gt;&#34;&gt;&lt;!-- </span></span></span><span style="display:flex;"><span><span style="color:#960050;background-color:#1e0010">--&gt;&lt;li class=&#34;btn-tw&#34;&gt; </span></span></span><span style="display:flex;"><span><span style="color:#960050;background-color:#1e0010">&lt;a href=&#34;//twitter.com/intent/tweet?url=&lt;?php echo urlencode($url); ?&gt;&#34; target=&#34;_blank&#34;&gt; </span></span></span><span style="display:flex;"><span><span style="color:#960050;background-color:#1e0010">&lt;i class=&#34;fab fa-twitter&#34;&gt;&lt;/i&gt;&lt;span&gt;&lt;?php echo get_twitter_count($url); ?&gt;&lt;/span&gt; </span></span></span><span style="display:flex;"><span><span style="color:#960050;background-color:#1e0010">&lt;/a&gt; </span></span></span><span style="display:flex;"><span><span style="color:#960050;background-color:#1e0010">&lt;/li&gt;&lt;!-- </span></span></span><span style="display:flex;"><span><span style="color:#960050;background-color:#1e0010">--&gt;&lt;li class=&#34;btn-fb&#34;&gt; </span></span></span><span style="display:flex;"><span><span style="color:#960050;background-color:#1e0010">&lt;a href=&#34;//www.facebook.com/sharer/sharer.php?u=&lt;?php echo urlencode($url); ?&gt;&#34; onclick=&#34;window.open(&#39;https://www.facebook.com/sharer/sharer.php?u=&lt;?php echo urlencode($url); ?&gt;&#39;, &#39;new&#39;, &#39;width=500,height=300&#39;);return false;&#34; target=&#34;_blank&#34;&gt; </span></span></span><span style="display:flex;"><span><span style="color:#960050;background-color:#1e0010">&lt;i class=&#34;fab fa-facebook-f&#34;&gt;&lt;/i&gt;&lt;span&gt;&lt;?php echo get_facebook_count($url); ?&gt;&lt;/span&gt; </span></span></span><span style="display:flex;"><span><span style="color:#960050;background-color:#1e0010">&lt;/a&gt; </span></span></span><span style="display:flex;"><span><span style="color:#960050;background-color:#1e0010">&lt;/li&gt;&lt;!-- </span></span></span><span style="display:flex;"><span><span style="color:#960050;background-color:#1e0010">--&gt;&lt;li class=&#34;btn-hb&#34;&gt; </span></span></span><span style="display:flex;"><span><span style="color:#960050;background-color:#1e0010">&lt;a href=&#34;//b.hatena.ne.jp/entry/&lt;?php echo urlencode(urlencode($url)); ?&gt;&#34; target=&#34;_blank&#34;&gt; </span></span></span><span style="display:flex;"><span><span style="color:#960050;background-color:#1e0010">&lt;i class=&#34;fa fa-hatena&#34;&gt;&lt;/i&gt;&lt;span&gt;&lt;?php echo get_hatena_count($url); ?&gt;&lt;/span&gt; </span></span></span><span style="display:flex;"><span><span style="color:#960050;background-color:#1e0010">&lt;/a&gt; </span></span></span><span style="display:flex;"><span><span style="color:#960050;background-color:#1e0010">&lt;/li&gt;&lt;!-- </span></span></span><span style="display:flex;"><span><span style="color:#960050;background-color:#1e0010">--&gt;&lt;li class=&#34;btn-pk&#34;&gt; </span></span></span><span style="display:flex;"><span><span style="color:#960050;background-color:#1e0010">&lt;a href=&#34;//getpocket.com/edit?url=&lt;?php echo urlencode($url); ?&gt;&#34; target=&#34;_blank&#34;&gt; </span></span></span><span style="display:flex;"><span><span style="color:#960050;background-color:#1e0010">&lt;i class=&#34;fab fa-get-pocket&#34;&gt;&lt;/i&gt;&lt;span&gt;&lt;?php echo get_pocket_count($url); ?&gt;&lt;/span&gt; </span></span></span><span style="display:flex;"><span><span style="color:#960050;background-color:#1e0010">&lt;/a&gt; </span></span></span><span style="display:flex;"><span><span style="color:#960050;background-color:#1e0010">&lt;/li&gt;&lt;!-- </span></span></span><span style="display:flex;"><span><span style="color:#960050;background-color:#1e0010">--&gt;&lt;li class=&#34;btn-line&#34;&gt; </span></span></span><span style="display:flex;"><span><span style="color:#960050;background-color:#1e0010">&lt;a href=&#34;//social-plugins.line.me/lineit/share?url=&lt;?php echo urlencode($url); ?&gt;&#34; target=&#34;_blank&#34;&gt; </span></span></span><span style="display:flex;"><span><span style="color:#960050;background-color:#1e0010">&lt;i class=&#34;fab fa-line&#34;&gt;&lt;/i&gt;&lt;span&gt;LINE&lt;/span&gt; </span></span></span><span style="display:flex;"><span><span style="color:#960050;background-color:#1e0010">&lt;/a&gt; </span></span></span><span style="display:flex;"><span><span style="color:#960050;background-color:#1e0010">&lt;/li&gt; </span></span></span><span style="display:flex;"><span><span style="color:#960050;background-color:#1e0010">&lt;/ul&gt; </span></span></span><span style="display:flex;"><span><span style="color:#960050;background-color:#1e0010">&lt;/div&gt; </span></span></span><span style="display:flex;"><span><span style="color:#960050;background-color:#1e0010">&lt;script&gt; </span></span></span><span style="display:flex;"><span><span style="color:#960050;background-color:#1e0010">window.addEventListener(&#34;load&#34;,function(){ const css=[ &#34;//cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@5.6.3/css/all.min.css&#34; ];for(i in css){ let html=document.createElement(&#34;link&#34;);html.rel=&#34;stylesheet&#34;;html.href=css[i];html.async=true;document.head.appendChild(html);}}); </span></span></span><span style="display:flex;"><span><span style="color:#960050;background-color:#1e0010">&lt;/script&gt; </span></span></span><span style="display:flex;"><span><span style="color:#960050;background-color:#1e0010">&lt;/body&gt; </span></span></span><span style="display:flex;"><span><span style="color:#960050;background-color:#1e0010">&lt;/html&gt; </span></span></span></code></pre></div><h3 id="説明">説明 </h3><p>SNSによってAPIから受け取るカウント数が異なりますが、共通して<strong>cURL</strong>というのを使って各SNSのカウント数が含まれた情報を取得しています。</p> <p><strong>Twitter</strong>と<strong>Facebook</strong>はAPIからJSONでデータが戻ってくるので、それを<strong>json_decode</strong>で配列に変換してカウント数の部分を取得しています。</p> <p><strong>Twitter</strong>の公式APIは現在ないのですが、<a class="link" href="https://jsoon.digitiminimi.com/" target="_blank" rel="noopener" >https://jsoon.digitiminimi.com/</a>のAPIから取得できます。APIを使用するためには事前に<a class="link" href="https://jsoon.digitiminimi.com/" target="_blank" rel="noopener" >https://jsoon.digitiminimi.com/</a>に登録が必要です。登録しないと値が取得できないのでカウント数が「0」のままになってしまいます。</p> <p><strong>はてブ</strong>は数字のみがダイレクトに帰ってくるので簡単です。</p> <p><strong>Pocket</strong>に関してはPocketにストックされたWEBページのカウント数数を取得できるAPIがないので、公式ボタンの<strong>HTMLを取得→XMLに変換→JSONに変換→配列</strong>に変換し、その中からカウント数を抜き出しています。</p> <h3 id="gtmetrixで計測してみた">GTmetrixで計測してみた </h3><p>サイトのテストを行える<a class="link" href="https://gtmetrix.com/" target="_blank" rel="noopener" >GTmetrix</a>でスピードテストしてみました。アイコンに<a class="link" href="https://fontawesome.com/" target="_blank" rel="noopener" >Font Awesome</a>を使っているのと、4つのSNSを同期で順番に作業しているせいでしょうか？</p> <p><strong>1秒以下を期待</strong>していたのですが、何度テストしても<strong>約2秒前後</strong>かかりました。</p> <p><img class="gallery-image" data-flex-basis="494px" data-flex-grow="205" height="340" loading="lazy" sizes="(max-width: 767px) calc(100vw - 30px), (max-width: 1023px) 700px, (max-width: 1279px) 950px, 1232px" src="https://qwerty.work/post/2019/01/php-sns-share-button/images/No-01.jpg" width="700"></p> <p>公式ボタンに比べたら速いのですが、劇的に速くするためには非同期で実行させる方法を考えないといけないですね。</p> <h3 id="参考ページ">参考ページ </h3><h3 id="20190114追記">2019/01/14追記 </h3><p>カウント数の取得を非同期で行うcurl_multi関数を使って少し高速かできたので、以下のページにまとめました。</p> <ul> <li><a class="link" href="https://qwerty.work/blog/2019/01/php-curl-multi-snsbutton.php" target="_blank" rel="noopener" >https://qwerty.work/blog/2019/01/php-curl-multi-snsbutton.php</a></li> </ul>