【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のフォロワーが有効かどうか評価するツール

ツイッターの自分のフォロワーがスパムや活動休止中か判定することのできるツールに『Status Peo

記事を読む

【javascript】正規表現文字置換簡易ツール

jQueryで作成した正規表現による文字抽出用スクリプトです。 (使い方) 「正規表

記事を読む

Pocketのソーシャルボタンをブログ・サイトに設置する方法

後で読みたい記事を保存することのできるPocketのソーシャルボタンの設置方法についてです。このボタ

記事を読む

相互RSSサービスのまとめ

ブログやサイトを作ると相互RSSという名前を聞くことがあると思います。相互RSSとはざっくりいうと他

記事を読む

ニコニコ動画のユーザーおよびマイリストのRSSフィード

ニコニコ動画のユーザーページのRSSフィードおよびマイリストのRSSフィードは次のようになっています

記事を読む

FC2ブログからWordPressへの引っ越しについて

今までFC2ブログでメモを残していましたが、WordPressに移行することにしました。理由としては

記事を読む

【ImgToAA】画像をAA化するツール

指定の画像を読み込ませてAA化するツールです。サンプルはこちら。 (使い方) 画像ファイ

記事を読む

関連記事を手軽に表示できるzenbackの導入方法

関連記事を手軽に表示できるZenbackというサービスの紹介です。 関連記事の表示を手助けして

記事を読む

【jQuery】クリックイベントでマウスホイールクリックを検知する

$("a").click(function(){ … }); によりクリックイベントを関連付け

記事を読む

【HTML/CSS】タイトルロゴ画像の設定の方法

自分のブログやサイトのタイトル部分にトップ絵画像を設置する方法です。方法としてはimgタグをHTML

記事を読む

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 ↑