2010年10月25日月曜日

bloggerにソーシャルブックマークdeliciousのボタンを追加する

[したいこと・しりたいこと・目標]

bloggerにソーシャルブックマークdeliciousのボタンを追加する



[したこと]




(01)
deliciousのサイトに行く。

Delicious
http://www.delicious.com/

ページの下の部分にあるtoolsリンクを開く


(02)
"Bookmark this on Delicious" buttons というリンクを開く


(03)
コードをコピーする。


(04)
bloggerのHTMLを編集するタブを開き、ウィジェットのテンプレートを展開をチェックする。

テンプレートの編集画面で、以下のコードを探す。
<div class='post-footer-line post-footer-line-1'>

(05)
(04)で探したコードの下にDeliciousのボタンを表示するコードを追加する。

コピーしたままのコードは正しく保存されない。
<img src="http://l.yimg.com/hr/img/delicious.small.gif" height="10" width="10" alt="Delicious" />
<a href="http://www.delicious.com/save" onclick="window.open('http://www.delicious.com/save?v=5&noui&jump=close&url='+encodeURIComponent(location.href)+'&title='+encodeURIComponent(document.title), 'delicious','toolbar=no,width=550,height=550'); return false;"> Bookmark this on Delicious</a>

onclick="

"> Bookmark this on Delicious
の間にあるHTMLにおける特殊文字を変換しておかないとエラーになる。


変換したコードが以下。
<img src="http://l.yimg.com/hr/img/delicious.small.gif" height="10" width="10" alt="Delicious" />
<a href="http://www.delicious.com/save" onclick="window.open('http://www.delicious.com/save?v=5&amp;noui&amp;jump=close&amp;url='+encodeURIComponent(location.href)+'&amp;title='+encodeURIComponent(document.title), 'delicious','toolbar=no,width=550,height=550'); return false;"> Bookmark this on Delicious</a>

(06)
プレビューで確認する。


テンプレートを保存する。

0 コメント: