So-net ブログに Google +1 ボタンのスニペットを追加する [So-net ブログカスタマイズ]

So-net ブログ

前回は So-net ブログの Facebook OGP タグを修正しました が、今回は新たに『Google +1 ボタン』のスニペットを So-net ブログに追加してみようと思います。

スニペットの取得

まずは +1 ボタン用の meta タグを拾ってきます。

+1 Your Website - Google

ページの種類に応じて変更するのはページの「タイプ」、「タイトル」、「概要」ですね。「タイプ」は html 要素の属性に追加します。画像の URL を固定する場合は itemprop="image" を追加します。

<!-- Update your html tag to include the itemscope and itemtype attributes -->
<html itemscope itemtype="http://schema.org/Article">

<!-- Add the following three tags inside head -->
<meta itemprop="name" content="Title of your content">
<meta itemprop="description" content="This would be a description of the content your users are sharing">
<meta itemprop="image" content="">

So-net ブログ用カスタマイズ

html 属性

記事ページとそれ以外で出力される URL が変わります。

記事ページ
http://schema.org/Article
記事ページ以外
http://schema.org/Blog

<head>〜</head> 内

Facebook の OGP タグで使った変数と関数をそのまま使っています。改行コードは自動的に取り除かれます。画像の URL は So-net ブログのプロフィール画像を埋め込むようにしていますが、ページ内の画像を使う場合は消しておきます。<% if %> または <% unless %> を使って記事ページ以外では画像を固定するのもいいかもしれません。文字数を変更する場合は text_summary() の値を変更します。

記事ページ
記事タイトル/記事の概要/プロフィール画像
記事ページ以外
ブログタイトル/ブログの概要/プロフィール画像

あとは HTML タグと JavaScript を設置すれば最適な状態?で +1 ボタンが使えるはず。

でもよく考えたら So-net ブログに標準で +1 ボタン機能ついてたね。