らいちのヒミツ基地

公然のひみつ基地です

たった8行でWordPressにTwitterのエゴサボタン設置

広 告

Introduction

こんにちは。阿豆らいち(@AzuLitchi)です。

今回ははてなブログ以外でもTwitterのエゴサボタン…「この記事に関するツイート」を検索するボタンを設置する方法を解説します。

とうじょうじんぶつ

f:id:AzuLitchi:20170724182014p:plain

阿豆らいち:
フリーランスのデザイナー。ときどきコーダー。


 

f:id:AzuLitchi:20170824005740p:plain

ATA-b(アタビイ):
都合よく会話してくれるヒミツロボ。


 

たった8行でWordPressにTwitterのエゴサボタン設置

以前書いた記事がこちら

azulitchi.hatenablog.jp

ありがたくご意見を頂戴しました。

f:id:AzuLitchi:20180303030503j:plain

(c) nych ( id:nych87

f:id:AzuLitchi:20180303030651j:plain

どこでも動くように

前回の記事でははてなブログ用のコードを書きましたが、「この記事に関するツイート」ボタン(エゴサボタン)を設置するだけなら以下の7行をページの好きな箇所に追加するだけで良いです。

<div id="twitter-search"></div>
<style type=text/css>
#twitter-search a{background: #5ae;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?f=tweets&vertical=default&q='+ location.href +'" class="twitter-search" target="_blank">この記事に関するツイート</a>';
</script>

WordPressだけでなく、通常のhtmlによるホームページでも機能します。

 

WordPressの場合、html用のウィジェットで貼ると余計な<br />タグが挿入されることがあるようですが、適宜自動挿入される<br />タグは削除してください。

普通にテキストで貼ると問題無いようでしたらそれで構いません。

 

例によってボタンをグレーにしたいなら

「background: #5ae」

のところの#5aeを#111〜#999くらいの3桁ゾロ目に書き換えて、お好みの濃さで設定してください。数字が多い方が明るくなります。

 

角を丸めたくないなら「border-radius: 4px;」のところを0pxに、

幅を調節したいなら「width: 85%;」の数字を調節してください。

 

f:id:AzuLitchi:20180303031550j:plain

以上、たった7行でWebページにTwitterのエゴサボタンを設置する方法でした!

 


 

技術的な話

Twitterアイコンの表示は色々面倒なので諦めました・・・。

 

はてなブログ用のコードと同じく、Twitter検索へのリンクとスタイルシートだけ書いているだけです。

はてなブログでは{URLEncodedPermalink}という変数が用意されているのですが、それが使えなくなるので代替手段を考えてみました。

 

できるだけ多くの環境で動くようにphpやjQueryを使わずJavaScriptのみで記述してます。

 

昔多用していたJavaScriptのdocument.write はいつの間にかHTML5的にdiscouraged(非推奨)とされているようなので、代わりにinnerHTMLを使用してます。

「innerHTMLよりinsertAdjacentHTMLを使用すべき」というご意見もあるようですので、わかる人は書き換えても良いと思います。

 

スペシャルありがとう

実際は、にーちさんにはWordPressで動作確認などのご協力を頂きました。ありがとうございました!

 

それではまた…さよならいち!・∀・)ノ