読者です 読者をやめる 読者になる 読者になる

tumblr

tumblr(タンブラー)は、メディアミックスブログサービス。ブログとミニブログ、そしてソーシャルブックマークを統合したマイクロブログサービスである。アメリカのDavidville.inc(現: Tumblr, Inc.)により2007年3月1日にサービスが開始された。

ソーシャル系ボタン(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さんnから」)みたいな感じになる
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。