ツイート、シェアなどのリンクをHTMLで作る—重いソーシャルボタンをJavascriptフリーで軽く！(2)

前の記事で、良く見るソーシャルボタンはリンク部分と過去のシェア数を表示する部分の2つがあることを書きました。

まず、リンク部分を公式のJavascript APIに頼ることなくHTMLメインで書いていきます。

ソーシャルボタンをHTMLで作る
HTMLコード

ソーシャルボタンをHTMLで作る

完全にHTMLだけで書くこともできるのですが、ボタンを押したときに今のページに上書きされるか、新規ウィンドウを開くかしかできず、不便です。

簡単なJavascriptを書くと、新しいウィンドウを小さく開けるので少しだけJavascriptを使います。

Javascriptを使えばシェアボタンの横にモーダルウィンドウをポップアップさせることも出来そうですが、2つの理由で単純に新規ウィンドウを開く方を選択しました。

（私が）Javascriptが苦手
開いたモーダルウィンドウがAdSense広告を隠してしまうと規約違反になりそう

個人的な理由は「(１)Javascriptが苦手」なのですが、AdSenseを使っているサイトでは規約違反になってしまうと問題です。

アドセンスの「広告の配置に関するポリシー」

ページ内のさまざまな要素によって隠すなど、わかりにくくすること。

の部分に違反しそうです。実際に規約違反と取られてペナルティを受けるかどうかはわかりませんが、忘れたころに指摘されるとどこが問題だったのかわからなくなるので、多少不便で見栄えが悪いですが新ウィンドウを開きたいです。

HTMLコード

<a class="btn btn-sm btn-info" rel="nofollow" href="https://twitter.com/intent/tweet?url=<?php echo $url; ?>&amp;text=<?php echo $title; ?>&amp;via=ユーザー名&amp;hashtags=ハッシュタグ" target="_blank" title="ツイート">Tweet</a>

<a class="btn btn-xs btn-primary" rel="nofollow" href="https://www.facebook.com/sharer/sharer.php?u=<?php echo $url; ?>&t=<?php echo $title; ?>" title="Share on Facebook" target="_blank" onclick="window.open(this.href, '_blank', 'width=1,height=1'); return false;">Share</a>

<a class="btn" rel="nofollow" href="https://plusone.google.com/_/+1/confirm?hl=en&url=<?php echo $url; ?>" target="_blank" title="Plus one this page on Google" onclick="window.open(this.href, '_blank', 'width=680,height=460'); return false;"><strong style="color:red;">G+</strong></a>

<a class="btn btn-primary" rel="nofollow" href="http://b.hatena.ne.jp/entry/<?php echo $url; ?>" target="_blank" title="はてなブックマークに追加する" onclick="window.open(this.href, '_blank', 'width=902,height=600); return false;">B!</a>

これで、ツイートボタン、Facebookのシェアボタン、Google+1ボタン、はてなブックマークのボタンが出来ます。

はてなブックマークはかなり格好悪く、開いた先の画面もいつもの画面と大きく違うので、諦めて標準のボックスを設置しても良いかもしれません。

次の記事で、過去のシェア数を取得していきます。Twitterは2015年11月から過去のシェア数を直接取得できるAPIがなくなってしまいましたが、頑張ればある程度カウントできるようになります。