ウェブと食べ物と趣味のこと

読者です 読者をやめる 読者になる 読者になる

ウェブと食べ物と趣味のこと

格安SIMのこと、windows10、迷惑メールネタ、写真ネタなど。困った方の参考になる記事を心掛けます。

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

はてな

スポンサードリンク

f:id:photoblg:20160316233854j:plain

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

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

f:id:photoblg:20160316225038p:plain

通常は問題ないのですが、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

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

f:id:photoblg:20160316231910p:plain

変更前
<!--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エンコードしたもの)

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

f:id:photoblg:20160316232758p:plain

ばっちりです。別のアカウントから試しにツイートしたらきちんと通知も来ました。

f:id:photoblg:20160316232828p:plain

※そのほか&related=ユーザー名を追加するとツイート後のおすすめユーザーを設定できます。このブログパーツの場合ツイート後閉じるので今回は未設定

今日は以上です!

スポンサードリンク