2010/12/15

Tweetボタンの強制カスタマイズ（Blogger）

■jsファイルを設置

<script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script>

このコードをhead要素
</head>直前に追加。


■ボタンを作る（設定）

http://twitter.com/about/resources/tweetbutton　で

「ツイート内テキスト」に【data:post.title】
「URL」には【data:post.url】
を入れる。
※この2つはblogger用テンプレートタグなので他のブログ等では使えません

その後出てきたコードの中の
data-text=とdata-url=の前にそれぞれ【expr:】を追加
↓
expr:data-text='data:post.title'
expr:data-url='data:post.url'

で、完成

<a href="http://twitter.com/share"
   class="twitter-share-button"
   expr:data-url="data:post.url"
   expr:data-text="data:post.title"
   data-count="none">Tweet</a>

挿入は記事内でもいいけど毎回の追加は面倒だし、
タイトルの右側（記事の右端）に設置したいので

<div style='text-align:right;margin-bottom:1em;'>
と
</div>
で挟み

<h3 class='post-title entry-title'>の中
【</h3>】の直前にいれてみました。

■他のボタン■
＜tweet＞（英語）

<a href="http://twitter.com/share"
  class="twitter-share-button"
  expr:data-text="data:post.title"
  expr:data-url="data:post.url"
  data-count="none">Tweet</a>

＜ツイートする＞（日本語）

⇒「 data-lang="ja"」を追加
<a href="http://twitter.com/share"
   class="twitter-share-button"
   expr:data-url="data:post.url"
   expr:data-text="data:post.title"
   data-count="none"
   data-lang="ja">Tweet</a>


＜tweet＞（垂直方向にカウント数表示）

⇒「data-count="vertical"」に変更
<a href="http://twitter.com/share"
  class="twitter-share-button"
  expr:data-text="data:post.title"
  expr:data-url="data:post.url"
  data-count="vertical">Tweet</a>

＜tweet＞（水平方向にカウント数表示）

⇒「data-count="horizontal"」に変更
<a href="http://twitter.com/share"
  class="twitter-share-button"
  expr:data-text="data:post.title"
  expr:data-url="data:post.url"
  data-count="horizontal">Tweet</a>

tweetした人にフォローを勧める場合は
「data-via="○○○"」をclass=に追加
○○○に自分のtwitterアカウントを入れる（＠は不要）

＜ツイートする＞（日本語）(フォロー希望Ver.)

<a href="http://twitter.com/share"
  class="twitter-share-button"
  expr:data-text="data:post.title"
  expr:data-url="data:post.url"
  data-count="none"
  data-via="ts_sr"
  data-lang="ja">Tweet</a>

↑のフォロー希望はツイート後に表示されます。



実は「topsy」の設置を試みたのですが
[retweet]で文字化けすることがあったので…

topsyのツイート数（topsyへのリンク）と
公式ボタンを組み合わせた形にしてしまいました。

だから「強制」なんつって。
ただ組み合わせただけですの。

■TOPSYの設定

基本の形は
<script type='text/javascript'>
     var topsy_nick = "アカウントID";
     var topsy_theme = "blue";
     var topsy_style = "big";
     var topsy_order = "tweet,count,badge";
     var topsy_tweet_text = "tweets";
     var topsy_retweet_text = "tweet";
</script>
<script src='http://cdn.topsy.com/topsy.js?init=topsyWidgetCreator'
 type='text/javascript'/>

「var topsy_style = "big";」を
シンプルに小さくしたかったので「"small"」に変更
「var topsy_order = "tweet,count,badge";」を、
公式ツイートを使用するので「tweet」を排除。
で↓↓に変更

<script type='text/javascript'>
     var topsy_nick = "ts_sr";
     var topsy_theme = "blue";
     var topsy_style = "small";
     var topsy_order = "count,badge";
     var topsy_tweet_text = "tweets";
     var topsy_retweet_text = "tweet";
</script>
<script src='http://cdn.topsy.com/topsy.js?init=topsyWidgetCreator'
 type='text/javascript'/>
　　これを</head>直前に追加。


その後、表示したい箇所に
<div class='topsy_widget_data' style='float:right;'><!--
    {
        "url": "<data:post.url/>",
        "title": "<data:post.title/>"
    }
--></div>
を、公式ボタンと並べる為に同様の
<h3 class='post-title entry-title'>の中【</h3>】の直前に追加

で今日のところはおしまい。


強制っていうか、いろいろ組み合わせてみただけですね。

twitter公式のボタンを
通常の方法でコードつくって→貼りつけ
で充分機能するのですが

表示しているページのURLが
「ブログorHPのURL/記事URL」じゃない場合

トップページ表示の時や
一覧（アーカイブ/ラベル）表示の時などは
表示されているURLがそのまま投稿されるので要注意です。

※トップ表示の時にツイートしてもらうと
新しく書いた記事はツイートされてないのに数があがっちゃうetc...

それを回避したかったんです。

ちなみにツイートされるまでは数字は表示されません（苦笑）

0 件のコメント:

コメントを投稿

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