Movable Type 備忘録

ブックマークレットを外部ファイルとして管理する(JavaScript版)

Jul162007
Author: bzbell
Categories: Customize
Tags: Bookmarklets, Customize, JavaScript, MovableType

Next Page: IE6 で min-width、max-width を実装する２
Prev Page: Ajaxによる投票をやってみる - 補足 -

こんばんわ^^

以前ご紹介した、ブックマークレットを外部ファイルとして管理するの JavaScript 版作ってみました。

WIN / IE6.x、IE7 そして Firefox2.0 で確認済みです。
Opera9.2 だとどうしても文字化けしてしまいます (´Д｀；)

原因がよく分からないんです。
エンコード絡みなんだろうけど、何で Opera9.2 だけダメなのかが理解できなくて、しょうがなく放置しちゃいました (;￣∇￣A はは

スキルアップ & 気が向いたらまた TRY してみます。

カスタマイズ

まずブックマークレット用のインデックス・テンプレートを作成します。
以下のコードをコピペして、インデックス・テンプレートを新規作成してください。

その際、ファイル名は任意で構いませんが、JavaScript のファイルとして保存(たとえば、bookmark.js)してください。
また、保存先はお好きなところ(たとえば、mt-site.js と同じ場所)で構いません。
bookarmk.js
1. var bookmarks_lst = {
2. 'Hatena::Bookmark' : 'http://b.hatena.ne.jp/add?mode=confirm&is_bm=1&url=%url%&title=%title%',
3. 'del.icio.us' : 'http://del.icio.us/post?v=4&url=%url%&title=%title%',
4. 'Livedoor Clip' : 'http://clip.livedoor.com/clip/add?link=%url%&title=%title%',
5. 'Yahoo Bookmark' : 'http://bookmarks.yahoo.co.jp/action/bookmark?fr=ybm_livedoor&r=my&u=%url%&t=%title%',
6. 'Google Bookmark' : 'http://www.google.com/bookmarks/mark?op=add&hl=ja&bkmk=%url%&title=%title%',
7. 'POOKMARK. Airlines' : 'http://pookmark.jp/post?url=%url%&title=%title%',
8. 'nifty Clip' : 'http://clip.nifty.com/create?url=%url%&title=%title%',
9. 'Buzzurl' : 'http://news.ecnavi.jp/config/add/confirm?url=%url%&title=%title%'
10. };
11. var bookmarks_img = {
12. 'Hatena::Bookmark' : '<$MTBlogURL$>image/bookmark/btn_hatena.gif',
13. 'del.icio.us' : '<$MTBlogURL$>image/bookmark/btn_delicious.gif',
14. 'Livedoor Clip' : '<$MTBlogURL$>image/bookmark/btn_livedoorclip.gif',
15. 'Yahoo Bookmark' : '<$MTBlogURL$>image/bookmark/btn_yahoo.gif',
16. 'Google Bookmark' : '<$MTBlogURL$>image/bookmark/btn_google.gif',
17. 'POOKMARK. Airlines' : '<$MTBlogURL$>image/bookmark/btn_pookmark.gif',
18. 'nifty Clip' : '<$MTBlogURL$>image/bookmark/btn_niftyclip.gif',
19. 'Buzzurl' : '<$MTBlogURL$>image/bookmark/btn_buzzurl.gif'
20. };
22. function escapeHTML(str)
23. {
24. var div = document.createElement('div');
25. var text = document.createTextNode(str);
26. div.appendChild(text);
27. return div.innerHTML;
28. }
30. function bookmarks_list(url, title)
31. {
32. var encode_title = escapeHTML('<$MTBlogName$> - ' + title);
33. var encode_url = encodeURIComponent(url);
34. var result = ' ';
36. for (var name in bookmarks_lst)
37. {
38. var value = bookmarks_lst[name];
39. value = value.replace('%url%', encode_url);
40. value = value.replace('%title%', encode_title);
42. result += '<a href="javascript:window.open(\'' + value + '\',\'_blank\', \'width=520,height=600,resizable=1,scrollbars=1\');undefined;" title="' + name + 'に追加">';
43. result += '<img src="' + bookmarks_img[name] + '" width="22" height="21" alt="' + name + '" /></a>' + "\n";
44. }
46. document.writeln(result);
47. }
青い字の部分は、各アイコンの URL となります。
各自のサイトに合わせて変更してください。わたしのでよければ、bookmark-icon.zip をお持ちください。
次に個別エントリアーカイブのテンプレートを変更します。
HTML ヘッダ(<head>～</head>)内に以下を追加します。
HTML ヘッダ(<head>～</head>)内に追加
1. <script type="text/javascript" src="<$MTBlogURL$>bookmark.js"></script>
青い字の部分を各自の環境に合わせて変更します。
そして、ブックマークレットを表示したい場所に以下を追加します。
任意の場所に追加
1. <script type="text/javascript">bookmarks_list('<$MTEntryPermalink$>', '<$MTEntryTitle$>');</script>
一通り変更したら、保存して再構築します。