[Webryblog]はてなスターとブックマークボタンについて（レイアウト変更） ☆★進学実績に見る高校評価★☆/ウェブリブログ

[Webryblog]はてなスターとブックマークボタンについて（レイアウト変更）

<< 作成日時： 2007/12/20 00:52 >>

記事ページのレイアウト変更（ブックマークボタン）について。
作成日時の右側に、ソーシャルブックマークの追加ボタンをつけてみました。
ウェブリブログの場合、ページのカスタマイズにあまり向いていないので、
以下のブログを参考に足りない部分は自作しました。

ウェブリブログにブックマークボタンを取り付ける方法 dearborn/ウェブリブログ
http://dearborn.at.webry.info/200702/article_4.html
ウェブリブログにもはてなスターがほしくって。徒然冩眞館/ウェブリブログ
http://turedureweblog.at.webry.info/200709/article_3.html

はてなスターは、上記の記事公開時はウェブリブログに標準搭載できなかったようですが、
今はフリースペース３にjsファイルのパスと認証トークンをつければ全ページに
つくようになっているようですので、ページ内にはソースは記載していません。
記事名の横についているはずです。

ブックマークボタンは以下のソースをjsファイルにまとめて、
忍者ブログのファイルアップロード機能を使って忍者ブログ上に格納してあります。
ウェブリブログでは画像ファイルか音声ファイルしかアップロード出来ないようですので。
ウェブリブログの記事ページにscriptタグを使って直接記載してもいいんですけど、
１記事毎にソースの文字数を消費してしまうのがもったいないので、
jsファイルにまとめるようにしました。
このブログはデータ中心で、１記事２万文字の制限にひっかかって記事を
分離することが多いので、できるだけ文字数を節約するようにしておきたいからです。

addClip();

// ブックマーク
function addClip(){

var outputText = "";

//要素取得
var obj = document.getElementById('blog-head');
if(obj==null) return;
var node = obj.getElementsByTagName('p');
if(node==null) return;
node=node.item(0);
var nd = document.createElement('span');
//var s = document.selection.createRange().text;
//if(s){s=s.replace(/(|)+/g,'');}
nd.setAttribute('id','clip1','clip2','clip3','clip4','clip5','clip');

outputText += "<a href='http://b.hatena.ne.jp/append?" + location.href + "' target='_blank'><img src='http://userdisk.webry.biglobe.ne.jp/008/087/36/N000/000/000/add.gif' width='16' height='12' style='border: none;' alt='このエントリーをはてなブックマークへ追加' title='このエントリーをはてなブックマークへ追加' /></a> <a href='http://b.hatena.ne.jp/entry/" + location.href + "' target='_blank'><img src='http://b.hatena.ne.jp/entry/image/" + location.href + "' border='0'></a> ";

outputText += "<a href='http://bookmarks.yahoo.co.jp/bookmarklet/showpopup?t=" + encodeURIComponent(document.title) + "&u=" + encodeURIComponent(location.href) + "&opener=bm&ei=UTF-8'+'&fr=ybm_blog' target='_blank'><img src='http://userdisk.webry.biglobe.ne.jp/008/087/36/N000/000/000/ybm16.gif' width='16' height='16' style='border: none;' alt='Yahoo!ブックマークに登録' title='Yahoo!ブックマークに登録' /></a> ";

outputText += "<a href='http://clip.nifty.com/create?title=" + encodeURIComponent(document.title) + "&url=" + location.href + "' target='_blank'><img src='http://userdisk.webry.biglobe.ne.jp/008/087/36/N000/000/000/addclip_icn.gif' width='17' height='14' style='border: none;' alt='ニフティクリップへ追加' title='ニフティクリップへ追加' /></a> ";

outputText += "<a href='http://del.icio.us/post?url=" + encodeURIComponent(location.href) + "&title=" + encodeURIComponent(document.title) + "' target='_blank'><img src='http://userdisk.webry.biglobe.ne.jp/008/087/36/N000/000/000/delicious_ico.gif' width='14' height='15' style='border: none;' alt='このエントリーをdel.icio.usへ追加' title='このエントリーをdel.icio.usへ追加' /></a> ";

outputText += "<a href='http://bookmark.corich.jp/bookmark/public_html/marklet.php?url=" + escape(location.href) + "' target='_blank'><img src='http://userdisk.webry.biglobe.ne.jp/008/087/36/N000/000/000/corich_add.gif' width='17' height='15' style='border: none;' alt='CoRichブックマーク！へ登録する' title='CoRichブックマーク！へ登録する' /></a> ";

outputText += "<a href='http://bookmark.fc2.com/user/post?url=" + encodeURIComponent(location.href) + "&title=" + encodeURIComponent(document.title) + "&description=' target='_blank'><img src='http://userdisk.webry.biglobe.ne.jp/008/087/36/N000/000/000/b-button.gif' width='18' height='18' style='border: none;' alt='FC2ブックマークに追加' title='FC2ブックマークに追加' /></a> ";

outputText += "<a href='http://clip.livedoor.com/clip/add?link=" + location.href + "&jump=myclip' title='livedoorクリップへ追加' target='_blank'><img src='http://userdisk.webry.biglobe.ne.jp/008/087/36/N000/000/000/add_livedoor.gif' width='16' height='16' alt='livedoorクリップへ追加' style='border: none;' /></a> <a href='http://clip.livedoor.com/page/" + location.href + "' target='_blank'><img src='http://image.clip.livedoor.com/counter/" + location.href + "' border='0'></a>";

nd.innerHTML = outputText;
node.appendChild(nd);
}

今のところは
「はてな」「Yahoo!」「ニフティ」「del.icio.us」「CoRich」「FC2」「livedoor」
だけなんですけど、ソーシャルブックマークは２０以上あるみたいなので、
今後はもっと増やしたいです。
AddClipsの提供しているテンプレートを使えばそういう手間はいらないはずなんですけど、
ワンクッション（AddClipsのサイト表示）を置きたくないので、AddClipsは使わない予定です。
たぶんブックマークレットを提供しているソーシャルブックマークは全部JavaScriptで
自作で実装できるはずです。

ただ、FC2はログイン周りに問題があるようで、FC2にログインできる場合とできない場合とが
あるようです。さらにここの様に外部ブログではなくて、
FC2のブログ内についているFC2ブックマークボタンでもログインに失敗することがあるようです。
キャッシュの問題なのでしょうか？

あと、フリースペース３にjsファイルのパスを書けば全記事に反映されるかもしれないんですけど、
それは完成してから試すことにしようと思っています。

もちろん、はてなスターやブックマークボタンはJavaScriptで実装していますので、
JavaScriptを切れば表示されなくなります。
別に記事そのものの閲覧には問題はないと思います。
ただ、実はJavaScriptを切るとウェブリブログのテンプレートも消えてしまって、
平坦なレイアウトになってしまいますので、
以下の記事を参考にcssを読ませるかどうか検討中です。

[Webryblog]トップページにJavaScriptオフ状態のときのスタイルをつける徒然冩眞館/ウェブリブログ
http://turedureweblog.at.webry.info/200703/article_2.html

以上です。

タグ：ウェブリブログブログ Webryblog JavaScript
はてなスターソーシャルブックマークブックマークはてな
Yahoo! ニフティ del.icio.us CoRich
FC2 livedoor 忍者フリースペース
css レイアウト AddClips ブックマークレット

<< 前記事（2007/12/17）

トップへ

後記事（2007/12/22）>>

月別リンク

トラックバック（1件）

タイトル（本文）	ブログ名／日時
livedoor ブログで好きな文字数だけ記事を表示する方法 livedoor ブログで好きな文字数だけ記事を表示する方法そんな方法が欲しかったので探してみました。 ...続きを見る	中江が月63239円稼いだアフィリエイト... 2008/01/03 14:44

コメント（0件）

内容	ニックネーム／日時

<< 前記事（2007/12/17）

トップへ

後記事（2007/12/22）>>

☆★進学実績に見る高校評価★☆