FaceBookのメモ、サンプルアプリ

| Windows7(x64) | 2012/03/17 Sat 22:45
�� タイムラインから戻す。（ウォールに）

2012/3/24からFaceBookのウォールが廃止になり、タイムラインになる。
厄介なのは、一見、試験運用中と思わせるタイムラインのプレビューをつついてしまうと、2度と、ウォールに戻れなくなることだ。
これは、IE8以降が該当するらしい。

現状の回避策としては、IE起動後、F12でIEの開発Viewを表示して、
メニューの「ブラウザモード」をIE7に変えるしかないらしい。

3/24にははっきりしますが
新インタフェースはIE8以降しか対応しないのだろうか。
MSも、3月からのWindowsUpdateで無条件にIE8化をするらしいので、
これに併せたということだろうか。


-------
�� Win7＋IE9で信頼済みサイトに設置した「いいねボタン」がうまく機能しない。

一般的には
http://developers.facebook.com/docs/reference/plugins/like/
で、Likeボタンのひな型を作成して、HPに張り付けます。

ネットワーク条件は種々様々であるので一概に言えませんが、
Win7+IE9の組み合わせで、信頼済みサイトに設置した「いいねボタン」を押すと
http://www.facebook.com/connect/connect_to_external_page_widget_loggedin.php?social_plugin=like&external_page_url=<指定のurl>#_=_
のブランクページが開いてしまう。
通常なら、コメント入力が現れるはずだ。

駄目な場合には上で書いた、F12でIE7互換に変えても失敗する。
http://developers.facebook.com/tools/lint/
でも特に問題は検出されない。

ベータ版のWin8CP+IE10だと少し複雑で
・メトロ版・・・ブランクページが開く。
・DeskTop版・・・ブランクは出ず、いいねも押せるが、コメントが開かない。

少なくとも、イントラ環境下では「いいね」を使わない方が良さそうだ。


-------
�� FaceBookサンプルアプリ javaScript SDKでuser情報の表示

(2012.8)現在、この方法でuser情報は表示できなくなりました。

ログオンしていることが条件になるが、
ログオンしていなくても、「いいね」を押すとログオンが要求される。
この時に再度、FB.init()を呼び出してuser情報を取得できた。

いずれにしても、ユーザーに気づかれずに、
FaceBookのuser情報が取得できてしまうことは、とても危険だ。

Deveropper登録してアプリIDを取得すれば、FaceBookのSDKを使ったページが好きなHP上に構築できる。
FaceBookキャンバスは、https:のアドレスが必要だが、
FaceBookキャンバスを利用しないのであれば、どこにでも置ける。
つまり、野良アプリである。
忘れそうなのでメモ。

一般的な「いいねボタン」を配置する、次のようなhtmlを用意する。


<!DOCTYPE html>

<!--- xmlnsは、IE不具合のおまじない、ほとんど効果はない --->
<html xmlns:fb="http://www.facebook.com/2008/fbml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

<!--- ここのメタ部は、いいねボタンでのみ必要なものです。 --->
<meta property="og:title" content="xxxxxx" />
<meta property="og:type" content="xxxxx" />
<meta property="og:url" content="http://www.xxxxxxxxxx.xx.xx/" />
<meta property="og:image" content="http://www.xxxxxxxxx.xx.xx/xxxx.gif" />
<meta property="og:site_name" content="xxxxxx" />
<meta property="fb:admins" content="nnnnnnnnnnnnnnn" />
<!--- いいねメタ ここまで。 --->

</head>
<body>

<!--- FaceBookアプリ --->
<div id="fb-root"></div>
<script script type="text/javascript" src="http://www.xxxxxxxxxxx.xx.xx/core.js"></script>
<!--- FaceBookアプリ ここまで。 --->

<!--- ようこそ：ｘｘさん --->
<div id="username"></div>

<!--- ユーザー情報表示部 --->
<div id="userinf"></div>

<!--- 友人情報表示部 --->
<div id="friendinfo"></div>
<br />

<!--- いいねボタン --->
<div id="iinebutton"></div>

</body>
</html>


channel.htmlは、
https://developers.facebook.com/docs/reference/javascript/
にある通り、

<script src="//connect.facebook.net/en_US/all.js"></script>
の一行だけ。

続いて、FaceBookアプリのcore.jsを次のように書く。


// Copyright(C) Hundredsoft Corporation 2012 All rights reserved. 
//
//  FaceBookアクセスサンプル (javascript SDK)  core.js
//
//   2012.3 時点で意味があって、かつBasic Permissionで引けそうな項目を並べた
//

var m_login = false;

window.fbAsyncInit = function() {
   FB.init({
      appId      : 'xxxxxxxxxxxxxxx', // App ID
      channelUrl : 'channel.html', // Channel File
      status     : true, // check login status
      cookie     : true, // enable cookies to allow the server to access the session
      xfbml      : true  // parse XFBML
   });

   // Additional initialization code here

   // Asyncの場合、いいねはSDK読み込み後に作らないと日本語にならない
   document.getElementById("iinebutton").innerHTML = '<div class="fb-like" data-href="http://www.xxxxxxxxxxx.xx.xx/" data-send="true" data-width="450" data-show-faces="true"></div>';

   FB.getLoginStatus(function(response){
      if (response.status === 'connected') {
         // Logged in
         m_login = true;
         showUser();
      }
      else{
         //本来はここでFB.loginでログインWindowを出させる。
         //今回はユーザの別操作でログインさせるため、無処理。
      }
   });

   // いいねを押したとき呼ばれる
   FB.Event.subscribe('edge.create', function (response) {
      if (!m_login){
         //ちょっと無理させます。
         FB.init({
            appId      : 'xxxxxxxxxxxxxxx', // App ID
            channelUrl : 'channel.html', // Channel File
            status     : true, // check login status
            cookie     : true, // enable cookies to allow the server to access the session
            xfbml      : true  // parse XFBML
         });

         FB.getLoginStatus(function(response){
            if (response.status === 'connected') {
               // Logged in
               m_login = true;
               showUser();
            }
         });
      }
   });
};

function showUser(){
   FB.api('/me', function(response){
      //日本語名称は,userテーブルではなく,profile。しかし権限追加が必要。
      document.getElementById("username").innerHTML = '<h2>ようこそ：' + response.name + ' さん</h2>';

      var query = FB.Data.query('select uid, name, profile_url, sex, email, current_location, hometown_location, work_history, education_history, hs_info, pic_small from user where uid={0}', response.id);
      query.wait(function(rows) {
         var name_e = (rows[0].name!= undefined ?        rows[0].name : "");
         var url =    (rows[0].profile_url!= undefined ? rows[0].profile_url : "");
         var email =  (rows[0].email!= undefined ?       rows[0].email : "");
         var pic_e =  (rows[0].pic_small!= undefined ?   rows[0].pic_small : "");

         var current_loc = "";
         if (rows[0].current_location!= undefined){
             current_loc = (rows[0].current_location.city!= undefined ? rows[0].current_location.city : "") + "," +
                           (rows[0].current_location.state!= undefined ? rows[0].current_location.state : "") + "," +
                           (rows[0].current_location.country!= undefined ? rows[0].current_location.country : "");
         }
         var hometown = "";
         if (rows[0].hometown_location!= undefined){
             hometown = (rows[0].hometown_location.city!= undefined ? rows[0].hometown_location.city : "") + "," +
                        (rows[0].hometown_location.state!= undefined ? rows[0].hometown_location.state : "") + "," +
                        (rows[0].hometown_location.country!= undefined ? rows[0].hometown_location.country : "");
         }
         var highsc = "";
         if (rows[0].hs_info!= undefined){
             highsc = (rows[0].hs_info.hs1_name!= undefined ? rows[0].hs_info.hs1_name : "");
         }
         var edname = "";
         if (rows[0].education_history!= undefined){
             if (rows[0].education_history[0]!= undefined){
                edname = (rows[0].education_history[0].name!= undefined ? rows[0].education_history[0].name : "");
             }
         }
         var wkname = "";
         if (rows[0].work_history!= undefined){
             if (rows[0].work_history[0]!= undefined){
                wkname = (rows[0].work_history[0].company_name!= undefined ? rows[0].work_history[0].company_name : "");
             }
         }

         var jsex = "";
         if (rows[0].sex!= undefined){
            if (rows[0].sex == "female"){
               jsex = "女性";
            }else{
               jsex = "男性";
            }
         }
         document.getElementById('userinf').innerHTML =  
            '名前: '   +  name_e                                                    + "<br />" +
            '性別: '   +  jsex                                                      + "<br />" +
            'URL : '   +  '<a href="' + url + '" target="_blank">' + url + '</a>'   + "<br />" +
            'Mail: '   +  (email!= undefined ? email : "")                          + "<br />" +
            '住所: '   +  current_loc                                               + "<br />" +
            '田舎: '   +  hometown                                                  + "<br />" +
            '会社: '   +  wkname                                                    + "<br />" +
            '大学: '   +  edname                                                    + "<br />" +
            '高校: '   +  highsc                                                    + "<br />" +
               '<img src="' +  pic_e + '" width="50" />' + "<br /><br /><br />";
      });

      showFriend();
   });
}


function showFriend(){
   FB.api('/me/friends', function(response){
      var users = "";
      var i;
      for(i=0;i<response.data.length;i++){
         var f_id = (response.data[i].id!= undefined ?   response.data[i].id : "");
         var f_name = (response.data[i].name!= undefined ?   response.data[i].name : "");
         users = users + '<a href="http://www.facebook.com/profile.php?id=' + f_id + '" target="_blank"><img src="http://graph.facebook.com/' + f_id + '/picture" width="50" />' + f_name + '</a>&nbsp;&nbsp;&nbsp;&nbsp;';
      }
      document.getElementById("friendinfo").innerHTML = '現在の友人は、' + i + ' 人です。<br />' + users;
   });
}

// Load the SDK Asynchronously
// ja-JPに変えないと,いいねが日本語にならない
//
(function(d){
   var js, id = 'facebook-jssdk', ref = d.getElementsByTagName('script')[0];
   if (d.getElementById(id)) {return;}
   js = d.createElement('script'); js.id = id; js.async = true;
   js.src = "//connect.facebook.net/ja_JP/all.js";
   ref.parentNode.insertBefore(js, ref);
}(document));


この３つのファイルを適当なHPに置けば、FaceBook情報を表示してくれる。

こちらにサンプルを置いておきます。
IEだと「いいね」を押してログオンしても情報が表示されないときがあるので、
その時はリロード(再読み込み)してください。



Tags: プログラムメモ　VirtualPC関連　Windows7(x64)関連
author : HUNDREDSOFT | - | -
1/1
| TOP |