BloggerでGoogle+のコメント

Blogger で Google+ のコメントが見られるようになりましたということなので、さっそく有効にしてみた。

blog デザインをかえた

妻が Google Analyticsの勉強をはじめるためにここに埋め込んでみたので、ついでにデザインも新しくしてみた。broken linkになってたのとかもなおしたつもり。
ぼちぼちと去年の分も補完していこうと思う。

404 Server Not Found

なんか、いつの間にか bloggerの構成(?)がかわっていたみたいで 404 Server Not Found になってしまっていた。
blogger-helpで聞いてみたところ

• blogger.ukai.org IN CNAME ghs.google.com だけじゃなく www.blogger.ukai.org IN CNAME ghs.google.com も登録しろ。
• 登録したら、一旦 blogspot.com に戻して、custom domainを設定しなおせ

ということらしい。
そんなことHelpHow do I use a custom domain name on my blog?に書いてないじゃん…
あと、CNAMEのTTLは短めにしといたほうがよいという話も。
というわけでこんなかんじで

blogger.ukai.org.       3600 IN CNAME ghs.google.com.
www.blogger.ukai.org.   3600 IN CNAME ghs.google.com.

Blogger in Draft

Blogger in Draftの新機能をためしてみた。

Star Ratings: Star Ratings codeは次のようなかんじみたいだ。

 <p class='post-footer-line post-footer-line-3'>
 <span class='star-ratings'>
  <b:if cond='data:top.showStars'>
   <div expr:g:background-color='data:backgroundColor'
           expr:g:text-color='data:textColor'
           expr:g:url='data:post.absoluteUrl'
           g:height='42'
           g:type='RatingPanel'
           g:width='180'/>
  </b:if>
 </span></p>

Embedded Comment Form: ついでにOpenID とかでもコメント書けるようにしておいた

blogger に Google Calendar

bloggerの sidebar に google calendar のイベントを表示。 Google Embeddable Calendar Helperを使えばカレンダーを埋めこめるけど、sidebarに表示するのには大きすぎる。 いろいろ調べてみるとpublic calendarならGoogle Calendar API JSON Output使うのが簡単そうだったので、ちょろっと作ってみた。

こんな感じに使う

<div id="gcalevent"><p>Loading...</p>
</div>

<script type="text/javascript"><!--
var gcal_list_id = "gcalevent";
var gcal_lists = [ 
  // FSIJ
  "atbere3p9bqsq48pvqht2ks1b0@group.calendar.google.com",
  // Debian
  "bq4u4851nqgnuu2soi1l6eeaqc@group.calendar.google.com",
  // JLA
  "i8aboqfuvj9d9ondgiv2jkju4c@group.calendar.google.com",
  "japanese__en@holiday.calendar.google.com"
];
// --></script>
<script type="text/javascript"
 src="http://ukai.jp/js/gcal_list.js" >
</script>

元のサンプルとはちょっと違って、複数のcalendarをロードして時間順に表示することができる。 9/16 13:45 インターフェースを変更

bloggerにdel.cio.us

del.icio.us対応もしてみた。とりあえずメモ。

<span class='post-delicios-add'>
 <a href="http://del.icio.us/post"
  expr:onclick="'window.open('
   + '\'http://del.icio.us/post?'
   + 'v=4&amp;noui'
   + '&amp;jump=close&amp;url=\'+encodeURIComponent(\'' 
   + data:post.url + \'')+\'&amp;'
   + 'title=\'+encodeURIComponent(\'' 
   + data:post.title + \''), \'delicious\','
   + '\'toolbar=no,'
   + 'width=700,height=400\'); return false;'">
    <img src="http://.../delicious.small.gif"
      alt="Save to del.icio.us" />
 </a>
</span>

注意すべき点は、& を & とエンコードすること、' のエスケープに気をつけること かな。 それから、これを post-footer-line のあたりに追加。

<b:if cond='data:blog.pageType == "item"'>
<script type="text/javascript">
 if (typeof window.Delicious == "undefined") 
    window.Delicious = {};
 Delicious.BLOGBADGE_DEFAULT_CLASS =
   'delicious-blogbadge-line';
</script>
<script 
src="http://images.del.icio.us/static/js/blogbadge.js">
</script>
</b:if>

こちらは対象が今みているページみたいなので item を表示している時だけに表示 ついでに Read more! ぽくできるようにしてみた。 これを参考に。 spanじゃなくてdivにしてみる。 labalに readmore がある時だけ "Read more!"リンクを表示。

bloggerではてぶ

テンプレートのHTMLを編集すればOKぽい。

テンプレート->HTMLの編集で、まずテンプレートをすべてダウンロード。 ダウンロードしてきたXMLに次を加える。<span class="'post-backlinks">と <span class="'post-icons'"> に間に加えました。

 
 <span class='post-hatena-bookmark-icon'>
   <b:if cond='data:post.link'>
    <a 
      expr:href='"http://b.hatena.ne.jp/entry/"
                 + data:post.link'>
     <img src="http://.../b_entry.gif"
        width="16" height="12"
        style="border: none;"
        alt="このエントリを含むはてなブックマーク"
     title="このエントリを含むはてなブックマーク" />
    </a>
   <b:else/>
    <b:if cond='data:post.url'>
     <a
       expr:href='"http://b.hatena.ne.jp/entry/"
                  + data:post.url'>
      <img src="http://.../b_entry.gif"
           width="16" height="12"
           style="border: none;"
           alt="このエントリを含むはてなブックマーク"
       title="このエントリを含むはてなブックマーク" />
     </a>
    </b:if>
   </b:if>
 </span> <span class='post-hatena-bookmark-users'>
   <b:if cond='data:post.link'>
    <a
      expr:href='"http://b.hatena.ne.jp/entry/"
               + data:post.link'>
     <img
        expr:src='"http://b.hatena.ne.jp/entry/image/"
            + data:post.link' />
    </a>
   <b:else/>
    <b:if cond='data:post.url'>
     <a
        expr:href='"http://b.hatena.ne.jp/entry/"
            + data:post.url'>
       <img
         expr:src='"http://b.hatena.ne.jp/entry/image/"
             + data:post.url' />
      </a>
     </b:if>
    </b:if>
 </span>

修正したXMLをアップロードでOK。あんまり素人にはおすすめできないな。 テンプレート->ページ要素でブログの投稿を編集したりすると消えるのかな? data:post.link と data:post.url はどういう時にどっちになるんだろ?