【はてなブログ】ツイートボタンをカスタマイズしたくてはまった話。

2016年3月17日

こんにちは。ソーシャルパーツ設置してますか？

はてなブログのソーシャルパーツはお手軽に設置出来るので利用させていただいてました。（↓これ）

通常は問題ないのですが、Twitterだけやや不満が・・・。

ツイートがあっても気づかなくないですか？自分で検索するまで気づかないのが不便すぎです。

これを何とかしたくてはまった話です。

デフォルトのソーシャルパーツはカスタマイズできない

デフォルトのソーシャルパーツはそれぞれオン、オフにするか、上下に表示の設定しかできません。

Twitter公式のボタン生成ページにもありますが、自分宛てにメンションを埋め込むにはdata属性のviaプロパティにユーザー名を入れる必要があります。

<a href="https://twitter.com/share" class="twitter-share-button" data-via="weblog_life">Tweet</a>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');</script>

Twitterボタン | About

こうなったら無理やり入れるしかないので、動的にdata-viaを入れるべくフッターに以下のコードを追加しました。

$(function(){
$("a.twitter-share-button").each(function() {
var obj = $(this);
obj.data("via","weblog-life");
});
});

ページロード時、動的にdata属性は追加されるのですが、ボタンを押しても反映されない。。

いろいろ調べてみたところwidget.jsを再度読み込んだりする必要もありそう。しかしうまく行かない・・・。

便利なカスタマイズを利用させていただいた

結局、既に公開されていた便利なカスタマイズコードを使わせていただくことにしました。

www.yukihy.com

ただ、そのまま実装しただけだと、以下のように今までと変わらないのでちょっとだけ修正していきます。

変更前

<!--Twitter-->
<a href="http://twitter.com/intent/tweet?text={Title} {URLEncodedPermalink}" class="twitter-button" target="_blank"><i class="blogicon-twitter lg"></i><br><span class="small-text">Twitter</span></a>

変更後

<!--Twitter-->
<a href="http://twitter.com/intent/tweet?text={Title} {URLEncodedPermalink}&amp;via=weblog%2Dlife" class="twitter-button" data-via="weblog%5Flife" target="_blank"><i class="blogicon-twitter lg"></i><br><span class="small-text">Twitter</span></a>

変更したのは{URLEncodedPermalink}の後に&via=weblog%2Dlifeを追加しました。URLに&via=weblog_lifeを追加したのです。（※＆amp;は「＆」のURLエンコードしたもの）

これで保存するとこのようになりました。