Google +1ボタンを付けてみようかと検討中。（まだ実装はしていません）
以下のページよりコードを取得して
カスタマイズをしなければ以下のようなコードとなる。
<!-- 次のタグを head 要素内または body 終了タグの直前に貼り付けてください -->
<script type="text/javascript" src="https://apis.google.com/js/plusone.js"></script>
<!-- 次のタグを +1 ボタンを表示する箇所に貼り付けてください -->
<g:plusone></g:plusone>ボタンを表示する部分の記述を以下のように書き換えてみた。
<div class="g-plusone">Google +1</div>サンプルで作ったページがこれ。Untitled
実際にクリックしていただいたのですが、動いているようです。ただし、本当に正常な動作なのかよくわかりません...
数日前から、Yahooからレイオフされた社員にはDeliciousチームの全員が含まれているという噂が流れている。
Del.icio.usデータの移転先に適当なところがない。良く考えてみるとソーシャルではなくともオンラインであれば良い。そこでクイックポストを利用したMTベースのブックマーク用ブログを作成することにした。
標準のクイックポストでは不足なので、以下のようにブックマークレットを作り替えてみた。
javascript:d=document;w=window;t='';if(d.selection)t=d.selection.createRange().text;else{if(d.getSelection)t=d.getSelection();else{if(w.getSelection)t=w.getSelection()}}void(w.open('【mt.cgiのURL】?__mode=view&_type=entry&blog_id=1&qp=1&title='+encodeURIComponent(d.title)+'&text='+encodeURIComponent('<ul>\n<li><a%20href="')+encodeURIComponent(d.location.href)+encodeURIComponent('">')+encodeURIComponent(d.title)+encodeURIComponent('</a></li>\n</ul>\n<blockquote>')+encodeURIComponent(t)+encodeURIComponent('</blockquote>'),'_blank',''));【mt.cgiのURL】部分は書き換えてください。blog_id=1もかな？
既にDel.icio.us上にある600位のデータはhtmlでエクスポート。Yahoo!Bookmarksにインポートしてみるとタグがすっかりなくなっていた。さらにエクスポートしてタグがない状態ではあるがCSVに変換ができた。
現在CSVにタグとカテゴリを追加している。整理ができ次第、Movable Typeのブログ記事インポートフォーマットに変換する。
先日より作業を行っている「HTML5のMovable Type 5テーマ」はこんな感じ。
現在、マークアップはほとんど終了した。テンプレートの構成はブログ向けとしたためにシンプルになった。
HTMLヘッダーは、ウェブサイトとブログで共通化できないこともないが、一部区別したいところがあったので別になっている。レイアウトや細かいデザインはこれから。
MovableType 4.2 無料テンプレート 2Column HTML5は、リリースから約1ヶ月経過し少しずつダウンロードして頂いております。
HTML5は初めてという方もいらっしゃるようなので、数回にわたって（簡単に）解説し（ていきたいと思い）ます。
まずは基本形。
<!DOCTYPE html>
<html lang="<$MTBlogLanguage$>">
<head>
<meta charset="<$MTPublishCharset$>">
<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<script src="http://ie7-js.googlecode.com/svn/version/2.1(beta4)/IE9.js"></script>
<![endif]-->
<script src="<$MTLink template="javascript"$>"></script>
<link rel="stylesheet" href="<$MTLink template="Reset_Stylesheet"$>">
<link rel="stylesheet" href="<$MTLink template="styles"$>">
<title><$MTBlogName encode_html="1"$></title>
</head>
<body>
<header>
<hgroup>
<h1><a href="<$MTBlogURL$>" accesskey="1" title="<$MTBlogName encode_html="1"$>"><$MTBlogName encode_html="1"$></a></h1>
<mt:If tag="BlogDescription"><h2><$MTBlogDescription$></h2></mt:If>
</hgroup>
</header>
<div id="content">
<div id="main">
<ol>
<MTEntries lastn="5">
<li>
<$mt:include module="ブログ記事の概要"$>
</li>
</MTEntries>
</ol>
</div><!-- / main -->
<div id="sub">
<div class="inner">
<$MTWidgetSet name="サイドバー"$>
</div>
</div><!-- /sub -->
</div><!-- /content -->
<footer>
<p><small>Copyright © 2010 yourdomain, All Rights Reserved.</small></p>
</footer>
</body>
</html>
主要なところだけ抜き出していますが、XHTMLから比べると非常にシンプル。
http://html5shiv.googlecode.com/svn/trunk/html5.jsはIEでHTML5の新要素section要素やarticle要素をブロック要素として振るまえるようにし、http://ie7-js.googlecode.com/svn/version/2.1(beta4)/IE9.jsでCSSを少しまともに解釈出来るようにします。IE9に期待を込めて<!--[if lt IE 9]>としました。
header要素とfooter要素でコンテンツ部分との分離を行います。今までaddress要素でマークアップしていたCopyrightはfooter内のsmall要素に変更。
＊HTML5でsmall要素は、見栄えをコントロールするプレゼンテーションモジュールからセマンティックな「細目を表す注釈」へと変更になったので注意が必要です。
次回に続く（はず）
以前からブログのサイドバーにTwitterのつぶやきを表示してみようかなと思ってましたが、標準のウィジェットだと出力されるソースがおかしいので躊躇していました。
「Twitterをサイトに組み込むチュートリアル＆サンプル集:phpspot開発日誌」の中で、JavaScriptで出力される一番シンプルな「Add Twitter to your blog (step-by-step)」を実装してみました。
やり方は、twitter.jsをダウンロードしてソースを記述するだけ。
ちなみに当ブログではスクリプト部分を以下のように記述しました。
getTwitters('tweet', {
id: 'atstyle',
count: 5,
enableLinks: true,
ignoreReplies: true,
clearContents: true,
template: '%text%（<a href="http://twitter.com/%user_screen_name%/statuses/%id_str%/">%time%</a>）'
});ローディング画像を用意し、サンプルのhtmlを少し編集。ブログのメインページだけに表示したかったので、以下のようにサイドバーに記述。
<MTIf name="main_index">
<div id="tweet">
<p>Please wait while my tweets load <img src="<$MTBlogURL$>webimg/indicator.gif" alt="" width="16" height="16" /></p>
<p><a href="http://twitter.com/atstyle">If you can't wait - check out what I've been twittering</a></p>
</div>
</MTIf>後はhead部分からスクリプトへリンク。
JavaScriptなのでサーバーに負担をかけることもありません！
追記：専用ページに移動しました。ソーシャルアクティビティ