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

関連記事

相互RSSサービスのまとめ

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

記事を読む

WordPressの記事内でJavaScriptを動かす

WordPressでは厄介なことにJavaScriptが動かない場合があります。この記事では動かない

記事を読む

ニコニコ動画の検索APIについて調べたのでメモ

ニコニコ動画にはAPIがあり、動画の情報(タイトルとか再生数とか)を取得したり、ランキング情報(RS

記事を読む

Canvasの画像をリサイズする簡単な方法【HTML5・javascript】

調べてみるとCanvasをリサイズするようなjavascriptの関数は存在しないようなので自前で作

記事を読む

【PHP】Twitterのツイート数やはてぶ数を取得する

指定URLのTweet数の取得 Twitterでツイート数を取得するには指定のURLにアクセスする

記事を読む

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

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

記事を読む

Google Maps JavaScript API v3でマップ上に線を引く

GoogleMapsAPIを使って地図上に線を引いたときに気を付けたことなどをメモしておきます。

記事を読む

AmazonのランキングRSSから画像リンクを作る

Amazon RSS Amazonでいい感じのRSSが無いかと探していたのですが実は本家に素晴らし

記事を読む

【javascript】RSSを読み込んで表示させる【Google Feed API】

jQueryで簡単にRSSフィードを表示させる方法としてGoogleFeedAPIを利用するというの

記事を読む

かわいい女の子のアイコンやアバター画像を作れるサイト

TwitterやFacebookなどでアイコンが欲しくなることってあるかと思います。私も色々検索して

記事を読む

NVIDIA DIGITSをSupervisorを使って自動起動する

はじめに 先日Ubuntu14.04にDIGITS 5をGPUなしP

【2017年度】GeForce 1080 Ti搭載BTOパソコン比較

はじめに 最近ディープラーニング用にGPUのないPCにDIGITSを

Windows用のシンプルなストップウォッチソフト紹介

Windows(10)でも使える使いやすいKAZAMITimerという

MNISTをDIGITS 5のCPUのみで試す(GPUなし)

はじめに DIGITSを使えばGUI操作で簡単にディープラーニングが

Windowsユーザが初めてMacBookを購入したときの注意点や感想

最近12インチのMacBookを購入しました。今までWindowsしか

Redmine3.2をUbuntu14.04にインストールして躓いた所についてメモ

はじめに Ubuntu14.04 ServerにRedmine3.2

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

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

→もっと見る

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