ソーシャルブックマークアイコンを設置してみる

はてなブックマークなどの、ソーシャルブックマークのアイコンを JavaScript を使用して設置してみたので、その方法について記述しておきます。

この方法では、JavaScript は外部にあるものとして記述していますので、<head> 内で読み込んでください。

ブックマークアイコンの設置方法

ソーシャルブックマークは、オンライ上のブックマークを個人だけでなく不特定多数で共有できるサービスのことで、利用するにはそのサイトでのIDによるログインが必要です。

ただ、登録用のアイコンの設置は各ソーシャルブックマークの提供サイトに登録していなくても可能です。

提供サイト側で設置方法も置いてありますが、リンクURLにページのURLとタイトルが必要になるので、そこは JavaScript で取得するように書き直してみました。

とりあえず、今のところ設置しているブックマークサイトの設置方法のみ記述しておきます。

HTMLへの記述

リンク先は外部ファイルから呼び出した JavaScript で設置するので、HTMLでの記述は onclick,onkeypress の値と画像URL以外は、以下のようにほぼ共通となります。(img の title 属性と alt 属性については追記してください。)

(例:はてな)
  • <a onclick="h_url()" onkeypress="h_url()"><img src="アイコンのURL" /></a>

外部 Javascript への記述

UTF-8 で作成している場合は、そのままでも動作するはずですが、他の文字コードのため文字化けする場合は、encodeURIComponent() で、location.href と document.title を囲んでください。

はてなブックマーク
  • function h_url(){
    • var url;
    • url = 'http://b.hatena.ne.jp/entry/' + location.href;
    • window.open(document.links.href = url);
  • }
Yahoo!ブックマーク
  • function y_url(){
    • var url;
    • url = 'http://bookmarks.yahoo.co.jp/bookmarklet/showpopup?t=' + document.title + '&u=' + location.href + '&ei=UTF-8';
    • window.open(document.links.href = url);
  • }
delicious
  • function d_url(){
    • var url;
    • url = 'http://del.icio.us/post?url=' + location.href + '&title=' + document.title;
    • window.open(document.links.href = url);
  • }
Google Bookmarks
  • function d_url(){
    • var url;
    • url = 'http://www.google.com/bookmarks/mark?op=edit&bkmk=' + location.href + '&title=' + document.title;
    • window.open(document.links.href = url);
  • }
Livedoor クリップ
  • function d_url(){
    • var url;
    • url = 'http://clip.livedoor.com/clip/add?link=' + location.href + '&title=' + document.title + '&jump=ref';
    • window.open(document.links.href = url);
  • }

呼び出した外部 JavaScript により、登録したいアドレスを location.href で、タイトルを document.title で取得し url を並び替えて変数の中に入れ、その変数をリンク先となる document.links.href に入れて飛ばしています。(window.open() は、別ウインドウを開くものです。)

最後に、私が使用させていただいている前に使用していたブックマークアイコンを配布しているサイトを紹介しておきます。

外部サイト無料ソーシャルブックマークアイコン|sbm-garden

スポンサードリンク

inserted by FC2 system