2011年12月24日土曜日

はてブボタンの追加と Tweet カウントの表示 on Blogger

以下を実施。

  • はてブボタンの追加
  • Tweet カウントの表示(Tweet ボタンの Twitter 公式化)
  • レイアウト調整

↓ diff の位置、行数は正しくない。上側は </head>の直前に追加。前のコンテキストは SyntaxHighlighter 用追加分なので実際にはテンプレートにはない。下側は改行を追加していてテンプレートでは1行になっている。

はてブ公式の Blogger へのボタン追加、users 表示追加の説明は古いので適当に修正。他のアイコンと同じように CSS スプライトを使って hover で色付けというのもちらっと考えたが、Google+ のアイコンだけがカラーになるのが気に入らないのでやめ(狭量)。

Twitter 側は元のボタンを殺して公式ボタンを追加。デフォルトテキストはブログタイトル（「や」の字）と記事タイトルが入るようにしている。

後は、上にずれたり、折り返されたりするので、CSS による強制レイアウト調整。

更新(2012/01/01)

Chrome でしか位置が合っていなかったので、IE、Firefox、Opera でも合うように修正。

diff --git a/blogger-template.xml b/blogger-template.xml
--- a/blogger-template.xml
+++ b/blogger-template.xml
@@ -2,7 +2,6 @@
 <!DOCTYPE html>
 <html b:version='2' class='v2' expr:dir='data:blog.languageDirection' xmlns='http://www.w3.org/1999/xhtml' xmlns:b='http://www.google.com/2005/gml/b' xmlns:data='http://www.google.com/2005/gml/data' xmlns:expr='http://www.google.com/2005/gml/expr'>
   <head>
-    <meta content='IE=EmulateIE7' http-equiv='X-UA-Compatible'/>
     <b:if cond='data:blog.isMobile'>
       <meta content='width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0' name='viewport'/>
     <b:else/>
@@ -669,7 +662,39 @@
  SyntaxHighlighter.config.bloggerMode = true;
  SyntaxHighlighter.all();
 </script>
 <!--  end  syntax highlighter -->
+<!-- begin Hatena button -->
+<style type='text/css'><!--
+.hatena-button {
+  height: 20px;
+}
+.hatena-button-image {
+  vertical-align: middle;
+}
+.hatena-users-image {
+  vertical-align: middle;
+}
+.share-button {
+  vertical-align: middle;
+}
+--></style>
+<!--  end  Hatena button -->
+<!-- begin Twitter button -->
+<script src='http://platform.twitter.com/widgets.js' type='text/javascript'/>
+<style type='text/css'><!--
+iframe.twitter-share-button {
+  vertical-align: middle;
+  width: 90px !important;
+}
+--></style>
+<!--  end  Twitter button -->
+<!-- begin adjust Google+ -->
+<style type='text/css'><!--
+div.dummy-container {
+  width: 220px;
+}
+--></style>
+<!--  end  adjust Google+ -->
 
   </head>
 
@@ -920,7 +944,7 @@
   <div class='clear'/>
 </b:includable>
 <b:includable id='shareButtons' var='post'>
   <b:if cond='data:top.showEmailButton'><a class='goog-inline-block share-button sb-email' expr:href='data:post.sharePostUrl + &quot;&amp;target=email&quot;' expr:title='data:top.emailThisMsg' target='_blank'><span class='share-button-link-text'><data:top.emailThisMsg/></span></a></b:if><b:if cond='data:top.showBlogThisButton'><a class='goog-inline-block share-button sb-blog' expr:href='data:post.sharePostUrl + &quot;&amp;target=blog&quot;' expr:onclick='&quot;window.open(this.href, \&quot;_blank\&quot;, \&quot;height=270,width=475\&quot;); return false;&quot;' expr:title='data:top.blogThisMsg' target='_blank'><span class='share-button-link-text'><data:top.blogThisMsg/></span></a></b:if>
-  <b:if cond='data:top.showTwitterButton'><a class='goog-inline-block share-button sb-twitter' expr:href='data:post.sharePostUrl + &quot;&amp;target=twitter&quot;' expr:title='data:top.shareToTwitterMsg' target='_blank'><span class='share-button-link-text'><data:top.shareToTwitterMsg/></span></a></b:if>
+  <!-- disabled for Twitter own button <b:if cond='data:top.showTwitterButton'><a class='goog-inline-block share-button sb-twitter' expr:href='data:post.sharePostUrl + &quot;&amp;target=twitter&quot;' expr:title='data:top.shareToTwitterMsg' target='_blank'><span class='share-button-link-text'><data:top.shareToTwitterMsg/></span></a></b:if> -->
   <b:if cond='data:top.showFacebookButton'><a class='goog-inline-block share-button sb-facebook' expr:href='data:post.sharePostUrl + &quot;&amp;target=facebook&quot;' expr:onclick='&quot;window.open(this.href, \&quot;_blank\&quot;, \&quot;height=430,width=640\&quot;); return false;&quot;' expr:title='data:top.shareToFacebookMsg' target='_blank'><span class='share-button-link-text'><data:top.shareToFacebookMsg/></span></a></b:if><b:if cond='data:top.showOrkutButton'><a class='goog-inline-block share-button sb-orkut' expr:href='data:post.sharePostUrl + &quot;&amp;target=orkut&quot;' expr:title='data:top.shareToOrkutMsg' target='_blank'><span class='share-button-link-text'><data:top.shareToOrkutMsg/></span></a></b:if>
+  <!-- begin AddHatena -->
+    <a class='goog-inline-block hatena-button' expr:href='&quot;http://b.hatena.ne.jp/entry/add/&quot; + data:post.url'>
+      <img class="hatena-button-image" src="画像URL" width="16" height="12" alt="このエントリーをはてなブックマークに追加" title="このエントリーをはてなブックマークに追加" />
+    </a>
+   
+    <a class='goog-inline-block hatena-button' expr:href='&quot;http://b.hatena.ne.jp/entry/&quot; + data:post.url'>
+      <img class="hatena-users-image" 
+       expr:src='&quot;http://b.hatena.ne.jp/entry/image/&quot; + data:post.url'
+       expr:alt='&quot;はてなブックマーク - &quot; + data:post.title'
+       expr:title='&quot;はてなブックマーク - &quot; + data:post.title' />
+    </a>
+  <!-- end AddHatena -->
+  <!-- begin Twitter button -->
+    <a href="https://twitter.com/share" class="twitter-share-button"
+     expr:data-url='data:post.url' expr:data-text='data:blog.title + &quot; &quot; + data:post.title'>
+      <data:top.shareToTwitterMsg/>
+    </a>
+  <!-- end Twitter button -->
   <b:if cond='data:top.showDummy'><div class='goog-inline-block dummy-container'><data:post.dummyTag/></div></b:if>
 </b:includable>
 <b:includable id='threaded_comment_js' var='post'>
   <script defer='defer' expr:src='data:post.commentSrc' type='text/javascript'/>
投稿者 時刻: 10:45
このエントリーをはてなブックマークに追加 はてなブックマーク - はてブボタンの追加と Tweet カウントの表示 on Blogger

0 件のコメント:

コメントを投稿

登録: コメントの投稿 (Atom)