ソーシャル系ボタン（facebook, twitter, はてなブックマーク）の設置
これくらい速攻で10分くらいで出来るだろうと思ったら、案の定僕の必殺スキル「時間見積もり大失敗」が発動して数時間かかり、発動者自身を殺しちゃったので、もうこんな悲劇が起きないように覚書。
やりたいこと
ソーシャル系ボタンの追加。
ボタンが置いてあるページ自身ではなく、別のページをシェアなりブクマさせたい。
（http://www.example.comにボタンを置き、http://www.example.com/exampleをシェアとかさせたい）
twitterのツイートボタン
https://twitter.com/about/resources/buttons#tweetにジェネレータがあるので、それに従えばよい。
例：
<a href="https://twitter.com/share" class="twitter-share-button" data-via="shim0mura" data-lang="ja">ツイート</a> <script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>
aタグのdata属性値に色々付け足すことでカスタム出来るみたい。
- bold;">data-url:ツイートしたい対象のURL（省略時はボタン設置ページ）
- bold;">data-text:ツイートに含めたい文章
- bold;">data-via:入力したユーザー名へ@飛ばす（「@shim0muraさんｎから」）みたいな感じになる
- bold;">data-size:ボタンのサイズ、data-size="large"を指定すると大きくなる
- bold;">data-count:ツイート数の表示有無、data-size="none"を指定すると表示しない
- bold;">data-hashtag:ハッシュタグとしてツイートに含めたい単語・文章
data-url="http://www.example.com/example"としてaタグに含めてやれば、やりたいことは実現できそう。
はてブ
http://b.hatena.ne.jp/guide/bbuttonにジェネレータがあるのでここに従えばよい。
例：
<a href="http://b.hatena.ne.jp/entry/http://www.exmaple.com/example" class="hatena-bookmark-button" data-hatena-bookmark-title="example page" data-hatena-bookmark-layout="standard" title="このエントリーをはてなブックマークに追加"><img src="http://b.st-hatena.com/images/entry-button/button-only.gif" alt="このエントリーをはてなブックマークに追加" width="20" height="20" style="border: none;" /></a><script type="text/javascript" src="http://b.st-hatena.com/js/bookmark_button.js" charset="utf-8" async="async"></script>
data-hatena-bookmark-title属性にブックマークさせたいページタイトルを、href属性はhttp://b.hatena.ne.jp/entry/のあとにブックマークさせたいURLを入れればいい。
facebookのいいねボタン
できれば下のようにかっこ良く表示させたい。
ボタンの設置ページとは違うページをシェアさせたかったんだけど、現在はシェアするボタンはサポートされてなくて、いいねボタンに統合されてる。
http://developers.facebook.com/docs/reference/plugins/like/に手順が書いてある。
html5版とiframe版とxfbml版とがあるけど、xfbmlは今年中に廃止らしい。出典失念。
ボタンを作る
「URL to Like」にいいねさせたいページを入力しておけばいい。
ogpタグ
ogpとはなんぞや。
http://d.hatena.ne.jp/amachang/20110117/1295233078
http://ogp.me/
これもジェネレータがあるので、それに従ってつくる。
上の画像のようにするにはimage,title,site_name,descriptionなどが特に必要。
ただしdescriptionはジェネレータで作ってくれないので、自作。
<meta property="og:description" content="example description" />
このタグをhead内に入れればOK。
