Articles

スポンサーサイト

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

facebookのWelcomeページの作り方

金持ち父さんになる男、おーちゃんです。

さて本日は、facebookページのWelcomeページを作成するときに使うJavaScriptコードをご紹介。
自由にパクってご使用ください。
HTMLを知っている事が一つベースになります。
が、facebookページを作成しようと言う方がHTMLを知らないなって事は無いでしょう。
次のコードを利用するにはBODYタグ中にコピーください。

機能としては次の二つの状態をチェックして表示するページを切り替えるコードになります。

 1.ログインしていないまたはログインしているがイイネボタンを押していない。
 2.ログインしていて且つイイネボタンを押している


 <div id="fb-root"><!-- facebookのプレースホルダー --></div>
 <script type="text/javascript" src="http://www.google.com/jsapi"></script>
 <script type="text/javascript"><!--
  // おまじない
  google.load("jquery", "1.6.1");
  google.load("jqueryui", "1.8.13");
 //--></script>
 <script language="javascript" type="text/javascript" ><!--
  window.fbAsyncInit = function(){
   FB.init({
     appId: '<APPID>', // アプリケーションID
     status: true,
     cookie: true,
     xfbml: false
   });
   FB.getLoginStatus(function(response){
    var url=(response.session==null?'<ログインまたはイイネを押す前に表示するページ>':'<ログインしていて且つイイネを押した後に表示するページ>');
    $('#fb-root').load(url).ready(function(){
     FB.Canvas.setSize(); // Canvasのサイズを合わせる
    });
   });
  };
  (function(){
   var e = document.createElement('script');
   e.src = document.location.protocol + '//connect.facebook.net/ja_JP/all.js';
   e.async = true;
   document.getElementById('fb-root').appendChild(e);
  }());
 //--></script>



このコードを利用するには開発者登録が必要になります。

facebookアプリを見ているとiframe対応のアプリがあるけど、
みんなやたら重たい。
理由はよくわからないけどね。
なので、こうやって作ってみました。
是非、ご活用ください。

このコードを利用するにはご自身でホスト先を見つける必要があります。
裏技的にEvernoteとかあるみたいですね。

よく知らない下手なサーバを通さない分、早く表示が出来ると思います。

さて、是を利用して、facebookアプリにしてみようかなぁ。

トラックバック一覧

コメント一覧

コメント投稿フォーム

管理者にだけ表示を許可する

Navigations, etc.

Navigations

プロフィール

Oちゃん

ブログ内検索

ブロとも申請フォーム

この人とブロともになる

管理者ページ


FC2Ad

Template by Yuma's FC2ブログテンプレート

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