https://qwerty.work/tags/%E3%81%AF%E3%81%A6%E3%81%AA/ Recent content in はてな on qwerty.work Hugo -- gohugo.io ja-JP Fri, 11 Jan 2019 23:56:13 +0900 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>