いろんなボタンを動的に仕込める？

html5 jQuery

流行りのボタンを調べてみた

他にも沢山あるけど代表的な3つだけ。
　

どーやって設置するの？

googleの場合
<!-- 次のタグを head 要素内または body 終了タグの直前に貼り付けてください -->
<script type="text/javascript" src="https://apis.google.com/js/plusone.js">
  {lang: 'ja'}
</script>

<!-- 次のタグを +1 ボタンを表示する箇所に貼り付けてください -->
<g:plusone count="false"></g:plusone>

2つ入れないとイカンのか
　

twitterの場合
<a href="https://twitter.com/share" class="twitter-share-button" data-count="horizontal" data-via="kenmituo" data-lang="ja">ツイート</a><script type="text/javascript" src="//platform.twitter.com/widgets.js"></script>

ボタンの場所に貼り付けるだけ。簡単だ。
　

facebookの場合
<!--ページにJavaScript SDKを含めます(理想的には、<body>のすぐ後に配置します)。-->
<div id="fb-root"></div>
<script>(function(d, s, id) {
  var js, fjs = d.getElementsByTagName(s)[0];
  if (d.getElementById(id)) {return;}
  js = d.createElement(s); js.id = id;
  js.src = "//connect.facebook.net/ja_JP/all.js#xfbml=1";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>

<!--プラグインを表示したい場所にプラグインのコードを配置します。-->
<div class="fb-like" data-send="false" data-layout="button_count" data-width="450" data-show-faces="false"></div>

こっちも２つか！
　
調べていると OGP （Open Graph Protocol）というのものがあるらしい。facebook対策は後にしよう。
フェイスブック、ミクシィ、グリーで使われている OGP (Open Graph Protocol) とは何か

どんなふうに設置する？

とりあえずtwitterとGoogle+を設置してみた

<!--headにいれる-->
<script type="text/javascript" src="https://apis.google.com/js/plusone.js">
  {lang: 'ja'}
</script>

<!--bodyの中で設置したいところに入れる-->
<div class="right">
<a href="https://twitter.com/share" class="twitter-share-button" data-count="horizontal" data-via="kenmituo" data-lang="ja">ツイート</a><script type="text/javascript" src="//platform.twitter.com/widgets.js"></script><g:plusone count="false"></g:plusone>
</div>

感想：かんたん、全ページに入れるには置換でいけそう。
　

facebookはどうなる？

http://d.hatena.ne.jp/amachang/20110117/1295233078
そんな中で、今後重要になってくるんじゃないかと思われる OGP （Open Graph Protocol）と言われる仕様があります。今日はそのことについて書いてみたいと思います。

OGP? おーじーぴー？？とはなんでしょうか。

ヘッダーにmetaタグで記述するものらしい。つらつらと読み進めると

<meta property="fb:admins" content=" " />

沢山のページを管理する場合には「fb:app_id」を使うらしい。

facebookのデベロッパー登録するには携帯電話番号を登録しておかないとダメらしいので登録するが何もない。直ぐにはコードがこないので暫く待てる精神が必要だったらしい。

　
こんな工程がわかりにくい
　
App IDを取得してからボタン作成ページに行く。
http://developers.facebook.com/docs/reference/plugins/like/
　
GetCodeで取得する際にHTML5にすると「つぶやく」ボタンとの並びに段差が出来てかっこ悪い。IFRAMEにするのが吉らしく、参考にしているサイトは後者ばかり。
　
とりあえずは「いいね！」ボタンを設置できた。
　

facebookアプリのaccess_tokenを取得する

参考にしているところの記述を見る

# まず、アプリケーションがアプリケーション自身のリソースにアクセスするための認可を取得する
curl -F type=client_cred -F client_id=168986543145706 -F client_secret=アプリケーションの秘密鍵https://graph.facebook.com/oauth/access_token

# 次に、 URL を指定してお知らせを流す
curl -F "access_token=上のコマンドで取得できたaccess_token" -F message="Hey guys" -F id=http://callee.jp/ogp/012.html https://graph.facebook.com/feed
簡単でしょ？

なんだこれ？
よくわからないので代替策として見つけたのがfacebookのアクセストークン(access_token)を手動で取得する方法で学んだが「MY_APP_SECRET」が何かわからず苦労する。APP IDの直ぐ下にかいてあるApp Secretだった。
　
access_tokenを取得したところで次の手順が分からない。Windowのコマンドプロンプトに入れてみた

C:\Users\kenmituo>curl --help
Usage: curl [options...] <url>
Options: (H) means HTTP/HTTPS only, (F) means FTP only
（オプションがズラズラと続く）

( ﾟдﾟ)ﾊｯ!こんなコマンドが入っていたのね！？
　
コマンド打ち込んでエラーになるのでオプションを眺めるとproxyがある。いろいろと試したけど

{"error":{"message":"(#100) http:\/\/www.exsample.com/index.html does not resolve to a valid user ID","type":"OAuthException"}}

プロキシの関係ない芋場でやってもうまくいかない。
　
　
ここまでやってきて、app_idの取り扱いに疑念が出てきたのでアプローチを変更してみます。なので終了！