Movable Type 備忘録

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

  • Jul162007
  • Vote:
    http://bizcaz.com/archives/2007/07/16-231412.php
  • Categories: JavaScript
  • Tags:
  • Social Bookmark

こんばんわ^^

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

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

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

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

カスタマイズ

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

    その際、ファイル名は任意で構いませんが、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. };
    21.  
    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. }
    29.  
    30. function bookmarks_list(url, title)
    31. {
    32.     var encode_title = escapeHTML('<$MTBlogName$> - ' + title);
    33.     var encode_url = encodeURIComponent(url);
    34.     var result = ' ';
    35.  
    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);
    41.  
    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.     }
    45.  
    46.     document.writeln(result);
    47. }

    青い字の部分は、各アイコンの URL となります。
    各自のサイトに合わせて変更してください。わたしのでよければ、bookmark-icon.zip をお持ちください。

  2. 次に個別エントリアーカイブのテンプレートを変更します。
    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>

    一通り変更したら、保存して再構築します。

以上で完了です。

 Trackback Pings(0)

No trackbacks found.

 Comments(0)

No comments found.

 Post a Comment

 

コメント用フィード