2011年3月4日

ツイートする 2

前フリが長いので、お急ぎの方はこちら。

いまやECサイトでも広く利用されているツール「Twitter」をカラーミーショップの「商品詳細ページ」につけようという話題。
Twitterをとりあげた前回記事では「Twitterでつぶやく」とタイトルにしていましたが、Tweet（つぶやく）という言葉も前回から半年経過して、ずいぶん一般化されてきました。
今回のタイトルは「ツイートする 2」として、前回記事を見直そうと思います。

前回記事では以下ページを参照してツイートボタンを実装していましたが、
「Color Me Shop! pro - 助け合い掲示板」をみると、全角文字が文字化けするそうです。
 Escape Codec Library:ecl.jp のライブラリで、EUC-JP→UTF-8変換が必要とのこと。
現在、ライブラリページがデッドリンクになっています
（「EUC-JP→UTF-8変換」が必要な理由は、2バイト文字（かんたんに言い換えると日本語）が文字化けするんですね）。

現在は、こんな風にすると、OKです。
下記コードの内容は「商品名 URL」をTweetするリンクです。
<script type="text/javascript">
<!--
  document.write('<a href="http://twitter.com/home?status=' + encodeURIComponent("<{$product.name|strip_tags}>"+' '+location.href) + '">Tweet <img src="http://twitter-badges.s3.amazonaws.com/t_mini-b.png" alt="Tweet" style="vertical-align:middle;"></a>');
// -->
</script>
以前使用していたライブラリの代わりに、encodeURIComponent()というJavaScriptの関数を利用しています（こんな関数、はじめて知った）。
興味のあるかたは「URIとは」や「encodeURIComponent()」を検索して調べていただくとして、実装するには上記コードを該当箇所に入れれば、リンクが作成されます。

document.writeでなくても良いですし、JavaScriptのonclick イベントを使用しているページもありました。よく分からない場合は、上記コードのコピペで問題なく動作すると思います。
オレンジ部分は公式からボタンを借りています。  

今回のポイントは、
・<{$product.name|strip_tags}>　を””で括る（私を含めたSmarty初心者がひっかかるところ）
・strip_tags（Smartyの機能）でタグを除去する

独自タグを””で括るについては、 以前の記事「独自タグをJavaScriptの関数に渡す」を参照してください。
strip_tagsでタグ除去については、正規表現を取り扱った以前の記事「Smartyサンプル 1」を参照してください。
<{$product.name}> には、Newやオススメ画像など先頭につくことがあります（下記画像は、商品登録ページ内の一部抜粋）。


というのが復習も兼ねた、前フリ。


現在は、Twitter公式サイトでツイートボタンをかんたんに作成してくれます。

「ハブろぐ - 公式Tweet Buttonがリリースされてた」では画像付きで説明されていますのでご参考に。
コードを直接いじる方には「Paroday - Twitter 公式ツイートボタンの設置方法」 （こまかい設定が分かりやすかったです）。

Twitter公式サイトでボタンを作成する場合は、デザイン（画像など）を用意する必要もなく、文字化けもなく、短縮URLまで作ってくれます。シンプル＆スムースにして完璧な機能。
ツイートボタンをよりかんたんに設置できる仕組みになっています。
カラーミーショップにも、そのままコピペすれば設置できます。

「Twitter公式サイト - プロフィールウィジェットをカスタマイズする」では、ツイートの表示をかんたんに行える機能がついている。これを利用すればショップページに表示させることもできる。


と、そんな記事を書いていたら、もっとかんたんにつくようになっていました。機能も公式仕様。
オンラインマニュアル - 【カスタム】追加タグ
Twitter以外にも、「いいね！」など流行りのボタンが多数追加されました。

<{twitter_tweet}>とするだけで、ツイートボタンを押すとページタイトルとページURLを自動で貼ってくれます。特にいじらなくても使えますが、勉強用にほとんど意味のないサンプルを作ってみました。
 商品名にはHTMLタグがつくことがあるので、strip_tagsでタグ除去。商品詳細ページURLは独自タグがないので商品IDからつくる。「cat:」で文字列結合。
<{twitter_tweet text=$product.name|strip_tags url=$home_url|cat:"?pid="|cat:$product.id}>


【関連記事】
・独自タグをJavaScriptの関数に渡す
・Smartyサンプル 1

【追記】
独自タグの記事を追加
ラベル: , , ,