スマートフォンでのSNSボタン

先日スマートフォンからこのサイトを見た時に、記事下のSNSボタンをSimplicity独自のものではなく、各SNSサービスが提供している独自のものに変えようと試みたのですが、うまくいきませんでした。

それで、その時にスマホからはてなブックマークのボタンをおした時の挙動を確かめたのですが、自分の予測と異なるサイトへと飛ばされたので、それを変えることにしました。

結果、なんとかうまくいったので、今回はその方法をメモしておこうと思います。

ただ、1つ気になることがあるので、正直この方法が正しいかはわかりません。

はてなブックマークのSNSボタンを押した時の挙動

Simplicityではスマートフォンで独自のSNSボタンが採用されるため、パソコンからアクセスした時と表示されるSNSボタンが異なります。

何もSimplicityをいじっていないときは、スマートフォンからはてなブックマークのボタンをタッチすると以下の画面になります。

設定前にはてなブックマークをタッチしたときの様子

そして、そこでログインをすることで、始めてはてなブックマークにブックマークできるようになります。 ログインした後の様子

ただ、はてなのSNSボタンをタッチするたびに毎回この画面からブックマークするのは正直面倒です。

なぜなら、はてなブックマークをよく利用している人は高確率ではてなブックマークのアプリを入れていると思うので、はてなブックマークのSNSボタンをクリックした時にアプリが表示されたほうがいいと思うからです。

実際公式のSNSボタンもアプリへと遷移するようになっています。

はてなブックマークのアプリでブックマークする

そこで、SimplicityのファイルをいじってSNSボタンをタッチした時にアプリへと遷移するようにしました。

Simplicityで変更すべきファイル

SimplicityでスマートフォンのSNSボタンについて書かれたファイルはsns-buttons-icon.phpです。

そこのはてなブックマークの部分を以下のように変えます。

    <?php if ( is_hatena_btn_visible() )://はてなボタンを表示するか ?>
  	<li class="hatena-btn-icon"><?php
//    $page_title=trim(wp_title( '', false));
//    $page_title_encoded=urlencode(mb_convert_encoding($page_title, "UTF-8"));
?>
    <a href="http://b.hatena.ne.jp/entry/<?php echo get_encoded_url(get_permalink()) ?>" class="hatena-btn-icon-link"><span class="icon-hatena"></span><span class="social-count hatebu-count"><i class="fa fa-spinner fa-spin"></i></span></a></li>
    <?php endif; ?>

変更点はアンカーのURL部分です。

変更前はこうなっていました。

<a href="http://b.hatena.ne.jp/add?mode=confirm&url=<?php echo get_encoded_url(get_permalink()) ?>&title=<?php echo get_encoded_title( trim(wp_title( '', false)) ); ?>" class="hatena-btn-icon-link"><span class="icon-hatena"></span><span class="social-count hatebu-count"><i class="fa fa-spinner fa-spin"></i></span></a>

これで、今まではスマホではてなブックマークのSNSボタンをクリックすると以下のように表示されていたのが、

ログインした後の様子

このようにアプリで表示されるようになりました。

はてなブックマークのアプリでブックマークする

今回の変更における注意点

今回、ファイルを変更したことによって遷移先が変わったのではいいのですが、これが正しい方法なのかは正直わかりません。

なぜかというと、ブログのソースを見たときにはてなブックマークのSNSボタン部分のURLがエスケープされた状態（？）で表示されているからです。

URLが正しく表示されていない様子

おそらく使用している関数の仕様でしょう。よくわかりませんが･･･。

ですので、一応動いている、といった感じです。

自分は今この設定のままですが、もし何か不具合があれば元の設定に戻すつもりです。

というわけで、今回の記事は本当に参考までに、といった感じです。すみません。

さいごに

今回SNSボタンをタッチした時の遷移について調べる際、「はてなブックマーク　○○」といった感じで検索をかけたのですが、はてなブックマークにブックマークされている他の全く関係のない記事が出てきたりして、うまく解決策をみつけることができませんでした。

そこで、公式のはてなブックマークボタンを使用しているサイトのソースを見て、自分なりに試行錯誤した結果が今回の記事です。

ただ、他のサイトははてなブックマーク部分にきちんとURLが表示されていたのですが･･･。

今後もっといい方法が見つかったら、ブログで記事にしようと思います。