生活を良くします - 怠惰なプログラミング

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

生活を良くします-怠惰なプログラミング

外資系でエンジニアをやっています。便利なサービスや商品、プログラミングで作ったものなどを紹介していきます

【はてなブログ】サイドバーに自動追尾するSNSシェアボタンを設置する ~sns連携

プログラミング 便利 仕事

SNSシェアボタン

SNSシェアボタンとは

twitterやfacebookに今読んでいる記事をユーザーがそのまま投稿できるという便利なシェアサービスです。ボタンを押すだけで記事のタイトルとURLがそのまま貼られるので、何もしない場合に比べてシェアされやすくなります。
www.yukihy.com



このサイトを参考にしてSNSシェアのボタンを記事下に作成しました。見た目はこのように綺麗になるのでぜひ使ってみてください。面倒な設定は少ないです。
f:id:what_a_day:20161116091531p:plain:w350

サイドバー

Qiitaのようにサードバーに設置したい

Qiitaとは、プログラマーにとって有益な情報が書かれていることが多いブログのことです。このブログにはサードバーにほぼデフォルトでSNSシェアボタンが付いています。

良い記事だと思っても、記事のけっこう下の方にシェアボタンやブックマークのボタンがあるため、自分の場合ではブックマークしようと思っていても忘れてしまうことが多々あります。その度に探しているので忘れられないようの対策として考えました。

下の画像のようにデザインは最初のままですが。デザインは上のブログを参考にして作ったものを使用し、サイドバーにSNSシェアのボタンを設置しようという計画になりました
f:id:what_a_day:20161116092604p:plain:w350


サイドバーにシェアボタンを設置できない

上のコードをそのままサイドバーに貼り付けたところ、デザインも保持されていていい感じだったのですが、リンクが有効になっていませんでした。

下の画像のようにブックマークタイトルが「%7Burlencodedpermalink%7D」、URLが無効という結果になってしまいました。
twitterシェアボタンも何も表示できず、facebookに至ってはすぐに落ちるという有様でした。


f:id:what_a_day:20161116092254p:plain:w350

原因について考えてみましたが、web周りは勘でやっているので少し複雑になると分からなくなるため、結局よくわかりませんでした。リンクが自動的に変更されていなかったことから、HTMLのタグの要素が変わっていないということなのでjavascriptあたりがサイドバーで変な動きをしている?と仮定して対策をとりました。

ちなみにtwitter,facebookのシェアボタンはデフォルトのままでサイドバーに貼り付けるとうまく動きました。たぶん自分がどこかで何か消しちゃったのかなと不安になっています。

実際のコード

cssや細かい設定は、引用してあるサイトから辿ってください。ここではサイドバーにどうやって貼り付けるのかを考えることにします。このコードは「デザイン」→「サイドバー」→「モジュールを追加」→「HTML」というのを選択して貼り付ければいいです。

f:id:what_a_day:20161116095341p:plain:w350


うまくいったバージョン

<!--シェアボタン-->
<div class="share-3d">
<div class="share-3d-inner">
<!--はてブ-->
<a href="" id="ref_book_hatena" class="hatena-bookmark-button" target="_blank" data-hatena-bookmark-layout="simple" title="このエントリーをはてなブックマークに追加"><i class="blogicon-bookmark lg"></i><br> <span class="hatebu-count small-text"><i class="fa fa-spinner fa-spin"></i></span></a>
<!--Facebook-->
<a href="http://www.facebook.com/sharer.php?u={URLEncodedPermalink}" id="ref_facebook" class="facebook-button" onclick="window.open(this.href, 'FBwindow', 'width=650, height=450, menubar=no, toolbar=no, scrollbars=yes'); return false;" ><i class="blogicon-facebook lg"></i><br><span class="facebook-count small-text"><i class="fa fa-spinner fa-spin"></i></span></a>


<!--Twitter-->

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

<!—  ここで現在のURLを取得すれば良いだけでは —>


<!--Googleプラス-->
<a href="https://plus.google.com/share?url={URLEncodedPermalink}" id="ref_google_plus" onclick="window.open(this.href, 'Gwindow', 'width=650, height=450, menubar=no, toolbar=no, scrollbars=yes'); return false;" class="googleplus-button"><i class="fa fa-google-plus"></i><br><span class="small-text">Google+</span></a>
<!--Pocket-->
<a href="http://getpocket.com/edit?url={URLEncodedPermalink}" class="pocket-button" id="pocket" target="_blank"><i class="fa fa-get-pocket"></i><br><span class="small-text">Pocket</span></a>
</div>
</div>


 <script type="text/javascript">
	
	var encodedURL = encodeURIComponent(location.href);

	<!--はてブ-->
	document.getElementById("ref_book_hatena").innerHTML = "<a href=\"http://b.hatena.ne.jp/entry/"+ encodedURL+ "\" id=\"ref_book_hatena\" class=\"hatena-bookmark-button\" target=\"_blank\" data-hatena-bookmark-title=\""+ document.title +"\" data-hatena-bookmark-layout=\"simple\" title=\"このエントリーをはてなブックマークに追加\"><i class=\"blogicon-bookmark lg\"></i><br> <span class=\"hatebu-count small-text\"><i class=\"fa fa-spinner fa-spin\"></i></span></a>";

	<!--Facebook-->
	var facebook_target = document.getElementById("ref_facebook");
	var facebook_url = "http://www.facebook.com/sharer.php?u=";
	facebook_url = facebook_url + encodedURL;
	facebook_target.href = facebook_url;

	<!--Twitter-->
 	var testTarget=document.getElementById("ref_target");
	var url_twitter = "http://twitter.com/intent/tweet?text=";
	url_twitter = url_twitter + document.title + " " +encodedURL;
	testTarget.href=url_twitter;

	<!--Googleプラス-->
	var google_plus_target = document.getElementById("ref_google_plus");
	var google_plus_url = "https://plus.google.com/share?url=" + encodedURL;
	google_plus_target.href = google_plus_url;

	<!--Pocket-->
	var Pocket_target = document.getElementById("pocket");
	var Pocket_url = "http://getpocket.com/edit?url=" + encodedURL;
	Pocket_target.href = Pocket_url;

 </script>

失敗したバージョン

<!--シェアボタン-->
<div class="share-3d">
<div class="share-3d-inner">
<!--はてブ-->
<a href="http://b.hatena.ne.jp/entry/{URLEncodedPermalink}" id="ref_book_hatena" class="hatena-bookmark-button" target="_blank" data-hatena-bookmark-title="生活を良くします - 怠惰なプログラミング" data-hatena-bookmark-layout="simple" title="このエントリーをはてなブックマークに追加"><i class="blogicon-bookmark lg"></i><br> <span class="hatebu-count small-text"><i class="fa fa-spinner fa-spin"></i></span></a>
<!--Facebook-->
<a href="http://www.facebook.com/sharer.php?u={URLEncodedPermalink}" id="ref_facebook" class="facebook-button" onclick="window.open(this.href, 'FBwindow', 'width=650, height=450, menubar=no, toolbar=no, scrollbars=yes'); return false;" ><i class="blogicon-facebook lg"></i><br><span class="facebook-count small-text"><i class="fa fa-spinner fa-spin"></i></span></a>


<!--Twitter-->

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

<!—  ここで現在のURLを取得すれば良いだけでは —>


<!--Googleプラス-->
<a href="https://plus.google.com/share?url={URLEncodedPermalink}" id="ref_google_plus" onclick="window.open(this.href, 'Gwindow', 'width=650, height=450, menubar=no, toolbar=no, scrollbars=yes'); return false;" class="googleplus-button"><i class="fa fa-google-plus"></i><br><span class="small-text">Google+</span></a>
<!--Pocket-->
<a href="http://getpocket.com/edit?url={URLEncodedPermalink}" class="pocket-button" id="pocket" target="_blank"><i class="fa fa-get-pocket"></i><br><span class="small-text">Pocket</span></a>
</div>
</div>


 <script type="text/javascript">
	
	var encodedURL = encodeURIComponent(location.href);

	<!--はてブ-->
	var hatena_target = document.getElementById("ref_book_hatena");
	var hatena_url = "http://b.hatena.ne.jp/entry/" + encodedURL;
	document.getElementById("ref_book_hatena”).data-hatena-bookmark-title = document.title;
	hatena_target.href = hatena_url;

	<!--Facebook-->
	var facebook_target = document.getElementById("ref_facebook");
	var facebook_url = "http://www.facebook.com/sharer.php?u=";
	facebook_url = facebook_url + encodedURL;
	facebook_target.href = facebook_url;

	<!--Twitter-->
 	var testTarget=document.getElementById("ref_target");
	var url_twitter = "http://twitter.com/intent/tweet?text=";
	url_twitter = url_twitter + document.title + " " +encodedURL;
	testTarget.href=url_twitter;

	<!--Googleプラス-->
	var google_plus_target = document.getElementById("ref_google_plus");
	var google_plus_url = "https://plus.google.com/share?url=" + encodedURL;
	google_plus_target.href = google_plus_url;

	<!--Pocket-->
	var Pocket_target = document.getElementById("pocket");
	var Pocket_url = "http://getpocket.com/edit?url=" + encodedURL;
	Pocket_target.href = Pocket_url;

 </script>

コードについて

うまくいっていないコードの方が正しいコードのような気がする。うまくいったコードは本当にごり押しで作成したものになります。どうして正しそうに見えるコードで動かないのか、気になりますね。

ちなみにコードのdocument.getElementById("ref_book_hatena").innerHTMLの部分ではURLをエスケープしていますが、webStreamやIntelliJ IDEAを使うと勝手にやってくれます。この部分で地味に感動していました。

document.getElementById("ref_book_hatena").innerHTML = "<a href=\"http://b.hatena.ne.jp/entry/"+ encodedURL+ "\" id=\"ref_book_hatena\" class=\"hatena-bookmark-button\" target=\"_blank\" data-hatena-bookmark-title=\""+ document.title +"\" data-hatena-bookmark-layout=\"simple\" title=\"このエントリーをはてなブックマークに追加\"><i class=\"blogicon-bookmark lg\"></i><br> <span class=\"hatebu-count small-text\"><i class=\"fa fa-spinner fa-spin\"></i></span></a>";

終わりに

追加する機能

サイドバーの一番下にSNSシェアボタンを設置すると、シェアボタンたちが追尾してくれるようになります。常にサイドバーにSNSシェアボタンが見えるため忘れ去られることは少なくなると思います。
www.no-overtime-day.com



完成品のこいつがついてきてくれます。
f:id:what_a_day:20161116095732p:plain

今回のことでjavascriptやhtmlの勉強をしてみないとやばいということがわかったのでこれから頑張ろうと思います(フラグ)。