はてなダイアリーにGoogle「+1」ボタン（プラスワンボタン）をつける方法
※2011/8/16 追記
以前の内容だと+1ボタンをクリックしてもgoogleガジェットのページが+1されるだけでしたので、ちゃんとガジェットを置いたページが+1されるように修正しました。
google+のアカウントを持って無かったので確認できてなかったです。すみません・・・
尚、修正にはmd2takさんのhttp://md2tak.info/828 のページを参考にさせていただきました。ありがとうございます。
GoogleのSNS「Google+」が立ち上がったのもあり、Google +1 ボタンをはてダにつけようかと思ったら、残念ながらまだ対応していない模様。しょうがないので無理矢理つけてみた。
なお、amachangさんの下記エントリが大変参考になりました。というか、丸パクリです。こっちを参考にした方がいいかも。
http://d.hatena.ne.jp/amachang/20110108/1294523433
※IEだとなんかうまく表示されない模様・・・FireFoxとChromeは表示されました。はてなさん早く標準対応して！
※2011/8/16 追記 IE7,8でもうまく表示されるようになりました。
「ゴタクはいいからさっさと貼り付けさせろカス」という方は・・・
下記コードをコピーして、お好きな場所に貼り付けて下さい。
ただ、スタイルシートでレイアウト調整もした方がいいので、それは下の方のレイアウト調整の項を参照して下さい。
※2011/8/16 追記 内容修正しました。
<script src="http://www.gmodules.com/ig/ifr?url=http://warehouse-magicbox.appspot.com/xml/plusone.xml&synd=open&w=106&h=30&title=google+plusone+button&border=%23ffffff%7C3px%2C1px+solid+%23999999&output=js"></script>
小
<script src="http://www.gmodules.com/ig/ifr?url=http://warehouse-magicbox.appspot.com/xml/plusone-small.xml&synd=open&w=70&h=15&title=plusonebutton&border=%23ffffff%7C3px%2C1px+solid+%23999999&output=js"></script>
大
<script src="http://www.gmodules.com/ig/ifr?url=http://warehouse-magicbox.appspot.com/xml/plusone-tall.xml&synd=open&w=50&h=65&title=plusonebutton&border=%23ffffff%7C3px%2C1px+solid+%23999999&output=js"></script>
なお、made by itaosan というリンクが勝手にでてくるので、ウザイ方は以下詳細手順を参照して下さい。
自分で作りたい方は以下詳細手順を参照して下さい。
XMLファイルを作成＆アップロード
こんな内容のxmlファイルを作成
※2011/8/16 追記 内容修正しました。
<?xml version="1.0" encoding="UTF-8"?> <Module> <ModulePrefs title="plusonebutton" author="hogehoge" width="106" height="24" /> <Content type="html"><![CDATA[ <div id="gplusone" class="g-plusone" data-size="standard" data-count="true"></div> <script type="text/javascript"> gplusone.setAttribute('data-href', document.referrer); org_gadgets = window.gadgets; window.gadgets = false; </script> <script type="text/javascript" src="http://apis.google.com/js/plusone.js"> {lang: 'ja'} </script> <script type="text/javascript"> window.gadgets = org_gadgets; </script> ]]></Content> </Module>
google +1 ボタンのページ
http://www.google.com/intl/ja/webmasters/+1/button/index.html
で生成できるコードだとIEで表示できないのでHTML5版のコードを使う必要があります。
XMLファイル中のdivの data-size="standard" の部分をサイズに応じて変更して下さい。
小の場合は data-size="small" 大の場合は data-size="tall"
<div id="gplusone" class="g-plusone" data-size="standard" data-count="true"></div>
あと、ModulePrefsの箇所も適時変更
小の場合は width="70" height="15" 大の場合は width="50" height="60" です。
<ModulePrefs title="plusonebutton" author="hogehoge" width="106" height="24" />
XMLファイルが出来たら、そのXMLファイルをどっかにアップロードします。
はてなダイアリープラスに入っていれば 管理 > ファイル よりファイルアップロードしてそれを使ってもいいですね。
google ガジェットを作成
XMLファイルが出来たらそれを元にgoogle ガジェットを作成すると、そのガジェットがはてなダイアリーに貼り付けることができます。
google gadgetの
http://www.gmodules.com/ig/creator?url=(uploadしたXMLのアドレス)
にアクセスします。
たとえばこんな感じ
http://www.gmodules.com/ig/creator?url=http://d.hatena.ne.jp/itaosan/files/plusone.xml?d=y
はてなダイアリーのファイルアップロードの場合はパスの最後に ?d=y をつける必要があります。
で、幅と高さをXMLファイルで指定したサイズと同じにしてコード取得。出来たコードを任意の場所に貼り付けて完成！
レイアウト調整
google ガジェットだと、余計な罫線など入っているので、スタイルシートで調整します。
はてなダイアリーの管理メニュー 管理 > デザイン編集 で詳細モードにして、スタイルシートに下記コードを追加
table.gadget { margin: 0 10px !important; } table.gadget tr:nth-child(1), table.gadget tr:nth-child(2), table.gadget tr:nth-child(4) { display: none; } table.gadget a, table.gadget span { display: none; } table.gadget * { border: none !important; }
これで完成！
