2011年02月16日

HTMLのサイトにソーシャルボタンを付ける

Wordpressのプラグインとかになってるのはよく見かけるので
ふつーのHTMLページに貼るのって面倒なのかなーと思ってましたが
全然そんなことなかった。
どこのサービスも手軽にボタンを自分のサイトに導入できるように作ってくれてます。
そりゃそうか。

今回触ってみたものを備忘録として。


■ ツイッター

・Twitter / ツイートボタン
http://twitter.com/about/resources/tweetbutton

もろもろ設定して、生成されたコードをHTML内に貼ればOK。
やだ・・・かんたん・・・。

でもIE7で見たらエラーになっていた。
そうだよそうこなくっちゃ!(何

で、調べてみたら文字コードがUTF-8じゃない時に起こるらしい。
scriptタグに「charset="utf-8"」って入れてあげると解決。

カウンター表示にしてあると、数字を押したときにツイート一覧が表示される。
誰が押したかチェックできるんですね。
じゃあテストツイートは消しときます!<社内の人に知られたくないアカウントでテストw
ツイートを削除するとボタン側のツイート数も戻ってました。へぇぇ。



■ Facebook

・Like Button - Facebook開発者
http://developers.facebook.com/docs/reference/plugins/like
・日本語の解説
http://www.facebook-japan.com/iine.html

iframe版とXFBML版のコードが出てきてどっちかを使えばいいんだけど
XFBMLにした場合出てきたコードHTMLにコピペ、以外にいろいろやらなきゃいけないことがあるようです。

・iframeは嫌なあなたへ…XFBMLでFacebookのLikeボタンをつけるのに必要な事前準備メモ | 適宜覚書-Fragments
http://f.daccot.com/2010/10/14/4527/

じゃあとりあえずiframeでいいや・・・w
と貼り付けてみましたがFacebookのこれはコード生成画面で入力したURLのみしか対応しないようなので
ページ毎に「いいね!」してもらいたい場合は工夫が必要なようです。



■ mixiチェック

・技術仕様 << mixi Developer Center (ミクシィ デベロッパーセンター)
http://developer.mixi.co.jp/connect/mixi_plugin/mixi_check/spec_mixi_check

mixiチェックもこのページのコードをHTML内に貼ればOK!

なんですが事前に「デベロッパー登録(個人)」または「パートナー登録(法人)」が必要です。
そのうえで許可するURLの登録と、mixiチェックキーの発行をしないといけない。
貼ること自体は簡単ですが前段階が多少手間です。


登録のレベルがいくつかあるみたいなんですが
mixiチェックを使いたい場合、個人はクレカ登録なし、法人の場合「一般パートナー」で問題なし。

・mixi Platform 利用登録の概要 << mixi Developer Center (ミクシィ デベロッパーセンター)
http://developer.mixi.co.jp/about-platform/overview

mixiチェックは「mixi Plugin」の中の一つなので。


今回仕事で試しに使おうってことになって試しているので
「一般パートナー」として登録しました。
オンラインで申し込んですぐに使えます。

技術仕様ページにあるコードはaタグ内に必須の「data-key」属性がないので
自分で追加しましょう。

posted by 「いまさらきんぐ」 at 11:23| 静岡 ☁| Comment(0) | TrackBack(0) | 日記 | 更新情報をチェックする
この記事へのコメント
コメントを書く
お名前: [必須入力]

メールアドレス:

ホームページアドレス:

コメント: [必須入力]


この記事へのトラックバック
×

この広告は1年以上新しい記事の投稿がないブログに表示されております。