Bloggerブログ記事のTweetボタンをiframe版にしてみた

Bloggerのブログ記事のテンプレートに追加していたTwitterのTweetボタン。
これをiframeを使ったバージョンへ移行した。

これまでのコードは以下。

<a class='twitter-share-button' data-count='horizontal' data-lang='ja' data-via='Twitterのアカウント' expr:data-text='data:title + &quot;: &quot;+ data:post.title' expr:data-url='data:post.url' href='http://twitter.com/share'>Tweet</a><script src='http://platform.twitter.com/widgets.js' type='text/javascript'/>

これを、以下のiframe版のコードへ変更。

<iframe allowtransparency='true' expr:src='&quot;http://platform.twitter.com/widgets/tweet_button.html?url=&quot; + data:post.url + &quot;&amp;text=&quot; + data:title + &quot;: &quot; + data:post.title + &quot;&amp;related=Twitterのアカウント&amp;lang=ja&amp;count=horizontal&quot;' frameborder='0' scrolling='no' style='width:130px; height:20px;'/>

iframe版ではsrc属性のみexprを使用。


「ブログタイトル：投稿記事のタイトル」という書式は変えていないが、同じことを表現するのに、以前は、

expr:data-text='data:title + ": "+ data:post.title'

としていたが、それを以下のように変更する必要があった。

text=" + data:title + ": " + data:post.title + "

" が複雑につながるので注意深く編集しなくてはならない。


ちなみに、現在のブログ記事フッターのソースコード一覧は以下。

<div class='post-body entry-content'>
  <data:post.body/>
  <div style='clear: both;'/> <!-- clear for photos floats -->

  <!-- Tweet Buttonなど -->
  <div style='float: left; margin-top:2.0em;'>
    <table border='0' cellpadding='0' cellspacing='0'>
      <tr>
        <td align='left' width='130'><iframe allowtransparency='true' expr:src='&quot;http://platform.twitter.com/widgets/tweet_button.html?url=&quot; + data:post.url + &quot;&amp;text=&quot; + data:title + &quot;: &quot; + data:post.title + &quot;&amp;related=Twitterのアカウント&amp;lang=ja&amp;count=horizontal&quot;' frameborder='0' scrolling='no' style='width:130px; height:20px;'/></td>
        <td align='left' width='110'><iframe allowTransparency='true' expr:src='&quot;http://www.facebook.com/plugins/like.php?href=&quot; + data:post.url + &quot;&amp;layout=button_count&amp;show_faces=false&amp;width=90&amp;action=like&amp;colorscheme=light&amp;height=21&quot;' frameborder='0' scrolling='no' style='border:none; overflow:hidden; width:100px; height:21px;'/></td>
        <td align='left' width='90'><g:plusone expr:href='data:post.url' size='medium'/></td>
      </tr>
    </table>
  </div>
  <div style='clear: both;'/>
</div>