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

関連記事

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

幅固定サイトでのスマホ回転時Webサイトの横幅を合わせる方法のメモ。 下記2点の設定が必要です。

記事を読む

【javascript】privateのメソッドからpublicなメンバを呼ぶ

javascriptでのクラス定義 javascriptではいわゆる正確なクラスは作れませんが、そ

記事を読む

【javascript】RGB⇔カラーコード変換ライブラリ

RGBをカラーコードに変換、または、カラーコードをRGBに変換したい場合が出てきたのでどういうも

記事を読む

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

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

記事を読む

【jQuery UI】タブの初期状態を選択するとエラーがでて失敗する

jQuery UIでタブをプログラム側から選択させるには以下のようなコードを書けばいい…といったこと

記事を読む

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

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

記事を読む

【jQuery】hasClass is not a functionエラー

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

記事を読む

ニコニコ動画のRSSをjavascriptで読み込んで表示させる

ニコニコ動画のランキングRSSをjQueryで読み込んで表示するプログラムを作成しました。RSSの読

記事を読む

AAアニメーション

javascriptでAAアニメーションしました。AAは以下のところから参照しました。(AAアニメー

記事を読む

PHPでページリロードをしようと思ったができなかったので

header("Location: ".$_SERVER); とすればページをリロードでき

記事を読む

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 ↑