らいちのヒミツ基地

公然のひみつ基地です

MENU

たった5行ではてなブログにTwitterのエゴサボタンを設置!

はてなブログのカスタマイズでお馴染みの、横に細長い「この記事に関するツイート」ボタンの元記事はこちらになります。

エントリを紹介してくれているツイートを一覧表示するボタンの設置方法です。

20190723更新

Twitterの仕様変更のため、コードを修正しました。

とうじょうじんぶつ

f:id:AzuLitchi:20170724182014p:plain

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


 

f:id:AzuLitchi:20170824005740p:plain

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


 

たった5行ではてなブログにTwitterのエゴサボタン設置

前回の記事がコチラ

azulitchi.hatenablog.jp

ありがたくブコメを頂戴しました。

f:id:AzuLitchi:20170827004318p:plain

(c) id:kinako222

f:id:AzuLitchi:20170827004540p:plain

ちょうシンプルに

前回、あんな長い記事書きましたが、ブログ記事の上に「この記事に関するツイート」ボタンを設置するだけなら以下の4行を

「デザイン→カスタマイズ→記事」の「記事上」

に追加するだけで良いです。

 

<style type=text/css>
a.twitter-search{background: #1DA1F2;width: 85%;border-radius: 4px;font-size: 12px;padding: 4px;line-height: 0px;display: block;margin: 0px auto;text-align: center;text-decoration: none;color: #fff;}
</style>
<a href="https://twitter.com/search?q={URLEncodedPermalink}&f=live" class="twitter-search" target="_blank"><i class="blogicon-twitter lg"></i> この記事に関するツイート</a>

はてなブログの構文チェッカーが一部[×]吐きますけど無視してください。構文チェッカー側の不具合のようです。

 

はてなブログで選んでるテーマによっては表示崩れたり上手く動作しないかもしれませんが、

基本的にWebフォントやjQueryの読み込みはブログ純正テーマの方でやってるみたいなんで、実際はリンクとスタイルシートだけ書けばイイって話。

 

ボタン色の変更について

ボタンをグレーにしたいなら

「background: #1DA1F2」

のところの#1DA1F2を

  • #14171A
  • #657786
  • #AAB8C2

のどれかに書き換えて、お好みの濃さで設定してください。下の方が明るくなります。

水色かグレー以外にするのはTwitterロゴ使用規定違反になる可能性があるので非推奨です。

Twitterのブランドリソースガイドラインについては下記PDFをご覧下さい。

https://about.twitter.com/content/dam/about-twitter/company/brand-resources/en_us/Twitter_Brand_Guidelines_V2_0.pdf

まとめ

f:id:AzuLitchi:20170827004557p:plain

以上、たった4行ではてなブログにTwitterのエゴサボタンを設置する方法でした!

ご大層に語ってますけどこれ、ただのhtml+cssです。

【追記】はてなブログ以外のサイトに設置する方へ

このページのコードははてなブログ用ですので。 

azulitchi.hatenablog.jp

 

 

 

【追記】DAC (id:dacs) さんがブックマークレット版を作ってくれました!

dac.hateblo.jp

記事デザインの編集がうまくいかない方や、はてなブログ以外のブログサービスをご利用の方はブックマークレット版をお試しくださいませー。

 

 

【追記】この記事にjQueryは関係ない

記事ページにブログパーツなどを配置するときに利用できる変数を追加しました - はてなブログ開発ブログ

「{URLEncodedPermalink}」は、はてなブログで使える変数なので、jQueryの読み込みはこの記事のソースコードでは不要です。( id:minimalgreen さんご指摘感謝です )

 

 

色んな方法が紹介されてユーザーの選択肢が増えるとイイなと思います。

 


 

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