$(function(){
  $("body").prepend('<div id="fb-root"></div>');
  $("設置場所").after('<div class="fb-like" data-href="*URL to Like*" data-send="false" data-layout="button_count" data-width="300" data-show-faces="false" data-colorscheme="dark" data-font="arial">&nbsp;</div>');
});
(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'));

備考：

※Open Graph protocolを設置したい場合は別の設定が必要です。

facebook DEVELOPERS > Open Graph

http://ogp.me/

参考サイト：
Facebook・Twitterなどソーシャルボタン設置方法まとめ | Design Spice

2012-09-08

HTML5カンファレンスを見ながらまとめ「JQMで良いサイトをつくる」

今日開催された HTML5 Conference 2012 をLIVEでみながら書いてみた。

ルームB　開発者系

jQuery Mobileカスタマイズ自由自在

受講内容の言葉を引用しています

●jQueryMobileバレしないサイトをつくる。

●クリエイティブではないページにはたくさんつかう。

●同じWEBサイトに、複数のフレームワークを使うことを気にしない。

1.デザインのカスタマイズ

　1.大まかなデザイン：ThemeRollerでカスタマイズ

　2.細かなデザイン：個別に適用するスタイルを上書き指定

　3.細かなデザイン：全体のスタイルを上書き指定

2.オリジナルUI

　1.JQMの装飾や動作から除外する領域を指定

　　Ajaxを無効、装飾を無効　ブロック要素にdata-role属性で指定

　2.　サードパーティ製のライブラリやツールを利用

　　覚えておくべきイベント

　　pageinit

　　・最初に初期化する際に発生するイベント

　　・同じページえお再表示する場合は発生しない

　　・loadイベントの代わりに利用するイベント

　　注意点：座標計算やサイズ計算があるライブラリだと正常に動作しない

　　pageshow

　　・ページを表示するたびに発生するイベント

　　・Gアナリティクスなどのページビューをカウントするようなツールに利用

　　・座標計算やサイズ計算などを行うライブラリに利用

　　注意点：1回だけ初期化を行う場合もキャッシュが消えたあとに再表示すると正常に動作しない

3.セキュリティフィックス　情報へアンテナ

　・alpha版には脆弱性

　・最新版1.2.beta版は問題なし

3ルームあるので、

全部の見れないのが残念です。

Tool & Snippet

WEB系／３DCG・映像系に関すること

Trust-formをカスタマイズするためのメモ

WPギャラリー機能とjQueryプラグインを使ってスライダーを実装してみた

テーブル要素をドット罫線でコーディングする方法

記述条件

できなかったこと

GoogleMapsをホームページに表示する方法を考える

facebookのLikeボタンをとりあえず設置する方法

HTML5カンファレンスを見ながらまとめ「JQMで良いサイトをつくる」