【jQuery/javascript】はてなボタンを動的に設置する

公開日: : JavaScript/jQuery, サイト制作, はてな

スポンサーリンク

はてなブックマークのボタンをページの読み込みが終わった後にjavascript(jQuery)で追加して表示させるということをします。

通常の設置方法

一応通常の設置スクリプトについて確認しておきます。はてなブックマークボタンの設置はこちらのページを参考にしてください。

<a href="http://b.hatena.ne.jp/entry/" class="hatena-bookmark-button" data-hatena-bookmark-layout="vertical-balloon" data-hatena-bookmark-lang="ja" title="このエントリーをはてなブックマークに追加"><img src="http://b.st-hatena.com/images/entry-button/button-only@2x.png" alt="このエントリーをはてなブックマークに追加" width="20" height="20" style="border: none;" /></a><script type="text/javascript" src="http://b.st-hatena.com/js/bookmark_button.js" charset="utf-8" async="async"></script>

こんな感じのものをコピペするとその位置にボタンが出現するようになっています。仕組みとしては「http://b.st-hatena.com/js/bookmark_button.js」の中を見ると一番最後に「Hatena.Bookmark.BookmarkButton.setup();」と書かれておりこのメソッドでクラス名が「hatena-bookmark-button」のaタグにボタンの装飾を行っているようです。

このコードは表示したページをブックマークするボタンとなりますが、任意のURL、任意のタイトルのブックマークボタンとしたい場合はそれぞれaタグのhref属性の「http://b.hatena.ne.jp/entry/」の後にそのURLを追加し、タイトルについては「data-hatena-bookmark-title」属性にその文字列を入れます。

例えば「http://mementoo.info/」でタイトル「めめんと」であれば次のようになります。

<a href="http://b.hatena.ne.jp/entry/http://mementoo.info/" class="hatena-bookmark-button" data-hatena-bookmark-title="めめんと" data-hatena-bookmark-layout="vertical-balloon" data-hatena-bookmark-lang="ja" title="このエントリーをはてなブックマークに追加"><img src="http://b.st-hatena.com/images/entry-button/button-only@2x.png" alt="このエントリーをはてなブックマークに追加" width="20" height="20" style="border: none;" /></a><script type="text/javascript" src="http://b.st-hatena.com/js/bookmark_button.js" charset="utf-8" async="async"></script>

その他の設定については色々調べてみてください。とりあえず今回はこれをベースに作ってみます。

任意の要素にボタンを追加する

上記のコードに多少手を加えて文字列として関数としました。

$.fn.appendHatenaButton = function(){
		$(this).append($('<a href="http://b.hatena.ne.jp/entry/" class="hatena-bookmark-button" data-hatena-bookmark-layout="vertical-balloon" data-hatena-bookmark-lang="ja" title="このエントリーをはてなブックマークに追加"><img src="http://b.st-hatena.com/images/entry-button/button-only@2x.png" alt="このエントリーをはてなブックマークに追加" width="20" height="20" style="border: none;" \/><\/a><script type="text/javascript" src="http://b.st-hatena.com/js/bookmark_button.js" charset="utf-8" async="async"><\/script>'));
}
//はてなボタンを#testに追加
$("#test").appendHatenaButton();

appendHatenaButtonという指定の要素にはてなボタンを追加するメソッドを作りました。こんな感じで指定の要素にはてなボタンを追加することができます。

任意のURL、タイトルにしたい場合のために改良すると次のようになります。引数のurlとtextにそれぞれブックマーク先のURL、タイトルの文字列を記述します。

$.fn.appendHatenaButton = function(url,text){
		$(this).append($('<a href="http://b.hatena.ne.jp/entry/'+url+'" class="hatena-bookmark-button" data-hatena-bookmark-title="'+text+'" data-hatena-bookmark-layout="vertical-balloon" data-hatena-bookmark-lang="ja" title="このエントリーをはてなブックマークに追加"><img src="http://b.st-hatena.com/images/entry-button/button-only@2x.png" alt="このエントリーをはてなブックマークに追加" width="20" height="20" style="border: none;" \/><\/a><script type="text/javascript" src="http://b.st-hatena.com/js/bookmark_button.js" charset="utf-8" async="async"><\/script>'));
}
//はてなボタンを#testに追加
$("#test").appendHatenaButton("http://www.yahoo.co.jp/","やほお!");

デモ

ボタンを押すとそれぞれyahooのページ、Twitterのアバウトページのはてなブックマークボタンが出現します。(※一回クリックしたらイベントを削除しているので同じ奴はいっぱいでないようになっています。)




ソース

HTML側

<input type="button" id="tweetbtn1" value="はてなボタンを出す1"/>
<input type="button" id="tweetbtn2" value="はてなボタンを出す2"/>
<hr>
<div id="hatena1"></div>
<div id="hatena2"></div>
<hr>

JS側

$(function(){
	$.fn.appendHatenaButton = function(url,text){
		$(this).append($('<a href="http://b.hatena.ne.jp/entry/'+url+'" class="hatena-bookmark-button" data-hatena-bookmark-title="'+text+'" data-hatena-bookmark-layout="vertical-balloon" data-hatena-bookmark-lang="ja" title="このエントリーをはてなブックマークに追加"><img src="http://b.st-hatena.com/images/entry-button/button-only@2x.png" alt="このエントリーをはてなブックマークに追加" width="20" height="20" style="border: none;" \/><\/a><script type="text/javascript" src="http://b.st-hatena.com/js/bookmark_button.js" charset="utf-8" async="async"><\/script>'));
	}
	//クリックイベント1
	$("#tweetbtn1").click(function(){
		$("#hatena1").appendHatenaButton("http://www.yahoo.co.jp/","やほお!");
		//一回クリックしたらおしまい
		$(this).unbind();
	});
	//クリックイベント2
	$("#tweetbtn2").click(function(){
		$("#hatena2").appendHatenaButton("https://about.twitter.com/ja","Twitterについて");
		//一回クリックしたらおしまい
		$(this).unbind();
	});
});

スポンサーリンク
Amazon

  • このエントリーをはてなブックマークに追加

関連記事

リクルート期間限定ポイントの有効な使い道

はじめに  先日クレジットカードの見直し活動の一環でポイント還元率の

初心者がお金を貯めるための節約・財テク手法まとめ【ポイント還元・投資・税金対策】

はじめに  最近なるべく節約しようと思い、お金周りに関して色々調べて

動画講座を効率的にキャプチャして復習する方法

はじめに  最近、動画媒体の講座などをたまに視聴しています。独学だと

Twitterのオリジナルサイズの画像ファイル(.jpg-large,.jpg-orig等)を一括リネームする

Twitterの画像をオリジナルサイズで保存しようとするとjpg-la

【Unity】他のスクリプトを一括で取得して有効化・無効化を制御する

Unityを使っていて他のスクリプトを一時的に停止させたいと思ったので

テレビの録画をPCやNASで共有する

今までテレビはテレビ用のモニターで見ればいいやと思っていたのですが、さ

【DeepLearning】物体検出手法のSSD(Keras版)を試す (Ubuntu14.04)

はやりのディープラーニングの物体検出手法の一つであるSSDのサンプルを

→もっと見る

  • Author : ががんぼ
    プログラミングやWeb関係で気付いたことについてメモしていく予定。だいたいが備忘録ですが、自分でサンプルを作って動かしてみたりしています。
PAGE TOP ↑