code up

スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

ソーシャルブックマークボタン

ソーシャルブックマークボタンを本ブログにも設置した。

今回設置したのはTwitter, Facebook, Google +1, はてなブックマーク, del.icio.us, LinkedIn。

Evernoteの設置も試みたが、Firefox以外(Chrome, IE)ではXSSのエラーが出てうまく開かなかったので断念した。request/responseを見た感じだと、JavaScriptでそのページのコンテンツを取得してEvernoteに送りつけて(post)るようだ。なんか危険そうだぞってことで、ブラウザによってはXSSやXSRFと認識されたのかもしれない。

Twitterのボタン

特に難しいことなく、簡単に設置できた。

Facebookのボタン

iframe版は特に難しいことなく、簡単に設置できる。HTML5版は結局中身がiframeになるようで、かつ上部に7pxほどの余白が出来てしまった。cssで対処(正解かは定かではないが、私の場合は.fb-like iframe { vertical-align: top; }で上部の余白が無くなった。)できるが、特にiframe版で問題ないためiframe版を設置した。XFBMLは試さず。

widthの部分はサイトに合わせて変更する。Facebookのサイトでも変更できるが、出来上がったコードを修正することでも可能。

Google +1のボタン

他のボタンがだいたい高さ20pxほどなので、中を選択。出来上がったコードを貼り付ける箇所が2カ所に分かれる。head内か、bodyの終了タグ手前にスクリプトを貼り付け、+1タグ(g:plusone)を表示させたい位置に配置する。非同期で読み込ませる等、応用編はGoogle Developersの+1 Buttonのドキュメントに記載がある。

はてなブックマークのボタン

このエントリーをはてなブックマークに追加

作成したコードをそのまま設置しただけ。

deliciousのボタン

Delicious

ヘルプに書いてあるコードだとアイコンが小さく(10px)、アイコンにリンクが張られていないので少しだけ改造(画像参照先を変更。aタグをimgタグを囲うように変更)。

LinkedInのボタン

生成したコードをそのまま設置するだけ。ただし、アイコンを複数設置する場合、http://platform.linkedin.com/in.jsの読み込みを1回だけにしないと押せないボタンが発生した(ブラウザによる。アイコン2つで最初のボタンが反応しなくなる)。

まとめ

AddClipやAddThisなども一気に作成できて便利だが、余計なボタンが付いていたりオプションが最新でなかったりするためこのブログでの利用は見送った。

このくらいの設置数だったので、そんなに時間も取らず楽に設置できた。

関連記事
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。