今回ははてなブログ以外でもTwitterのエゴサボタン…「この記事に関するツイート」を検索するボタンを設置する方法を解説します。
とうじょうじんぶつ
阿豆らいち：
フリーランスのデザイナー。ときどきコーダー。
ATA-b（アタビイ）：
都合よく会話してくれるヒミツロボ。
たった8行でWordPressにTwitterのエゴサボタン設置
以前書いた記事がこちら
ありがたくご意見を頂戴しました。
(c) nych ( id:nych87 )
どこでも動くように
前回の記事でははてなブログ用のコードを書きましたが、「この記事に関するツイート」ボタン（エゴサボタン）を設置するだけなら以下の7行をページの好きな箇所に追加するだけで良いです。
<div id="twitter-search"></div>
<style type=text/css>
#twitter-search a{background: #1DA1F2;width: 85%;border-radius: 4px;font-size: 12px;padding: 4px;display: block;margin: 0px auto;line-height: 100%;text-align: center;text-decoration: none;color: #fff;}
</style>
<script type="text/javascript">
document.getElementById( "twitter-search" ).innerHTML='<a href="https://twitter.com/search?q='+ location.href +'" class="twitter-search" target="_blank">この記事に関するツイート</a>';
</script>
WordPressだけでなく、通常のhtmlによるホームページでも機能します。
WordPressの場合、html用のウィジェットで貼ると余計な<br />タグが挿入されることがあるようですが、適宜自動挿入される<br />タグは削除してください。
普通にテキストで貼ると問題無いようでしたらそれで構いません。
角を丸めたくないなら「border-radius: 4px;」のところを0pxに、
幅を調節したいなら「width: 85%;」の数字を調節してください。
以上、たった7行でWebページにTwitterのエゴサボタンを設置する方法でした！
技術的な話
Twitterアイコンの表示は色々面倒なので諦めました・・・。
はてなブログ用のコードと同じく、Twitter検索へのリンクとスタイルシートだけ書いているだけです。
はてなブログでは{URLEncodedPermalink}という変数が用意されているのですが、それが使えなくなるので代替手段を考えてみました。
できるだけ多くの環境で動くようにphpやjQueryを使わずJavaScriptのみで記述してます。
昔多用していたJavaScriptのdocument.write はいつの間にかHTML5的にdiscouraged(非推奨)とされているようなので、代わりにinnerHTMLを使用してます。
「innerHTMLよりinsertAdjacentHTMLを使用すべき」というご意見もあるようですので、わかる人は書き換えても良いと思います。
スペシャルありがとう
実際は、にーちさんにはWordPressで動作確認などのご協力を頂きました。ありがとうございました！
それではまた…さよならいち！・∀・)ノ
