【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
  • このエントリーをはてなブックマークに追加

関連記事

【jQuery UI】タブをクリックしたときのイベントでselectが使えない

jQuery UIは1.10のバージョンではタブをクリックしたときのイベントの名前が変わっているよう

記事を読む

【javascript/jQuery】JSON形式のデータの表示確認をする

PHPであれば「var_dump」や「print_r」などでJSON形式のデータの中身が思い通りの者

記事を読む

【Three.js/jThree.js】カメラ内部パラメータを変更して視野などを変える

jThree.jsでカメラの内部パラメータを変更するのに手間取ったのでメモ。参考にしているjThre

記事を読む

【jQuery】hasClass is not a functionエラー

jQueryでセレクタを使って取得してきたjQueryオブジェクトからその子要素をchildrenで

記事を読む

Windows7でVirtualBoxとVagrantを使ってローカル開発環境を構築する

Vagrant(ベイグラント)とは http://www.vagrantup.comで入手できる仮

記事を読む

YoutubeのURLリンクを外部プレイヤーのものに正規表現で置換する

Youtubeのアドレスを正規表現を使って抽出して外部プレイヤーのフレームに変換・置換するスクリプト

記事を読む

【HTML/jQuery UI】NumericUpDownを設置する【Spinner】

HTMLタグにNumericUpDownがないか探したのですがないみたいなのでそれが使えるようなもの

記事を読む

指定URLのWebサイトの画面全体をキャプチャする方法

Webサイトのスクリーンショットを撮る方法としてはいくつかありますが、各方法ごとに調べたものを紹介し

記事を読む

livedoorblogのタグのページが404 Not Found

別のブログとしてライブドアのものを使っているのですが、タグを編集していた際に特定のタグ一

記事を読む

ニコニコ動画の外部プレイヤーを動的に設置する【javascript/jQuery】

ニコニコ動画の外部プレイヤーはページのはじめの読み込みのときにしか表示されず、javascriptで

記事を読む

UWSCを使ったソフト自動立ち上げ【SoftEther VPN Server】

やりたいこと 最近SoftEtherという筑波大学発のベンチャー企業

【PHP】headerでContent-Typeを指定したのに効かない場合の対処法

PHPでサイトマップを作ろうと思い、XML形式のファイルを出力しようと

スマホ向け幅固定サイトの回転時の幅対応方法

幅固定サイトでのスマホ回転時Webサイトの横幅を合わせる方法のメモ。

【PHP】特定のURLからそのAtomやRSSのフィードを抽出する方法

特定のURLからRSSやATOMのフィードを抽出する方法をメモ。 流

フィード抽出ツール(RSS1.0、RSS2.0、atom)

任意URL サイト名 サイトURL RSS1.0

格安プラン限定レンタルサーバー機能比較表(2016年)

はじめに  最近新しい共用サーバーをレンタルしようと思い調査およびそ

kindle unlimitedが便利だったのでお勧めの使い方など感想メモ

 kindle unlimitedというサービスが8/3からAmazo

→もっと見る

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