Maxwell Tech Note

Facebook 提供新的Graph API 可以藉由API跟類似SQL FQL語法取得FB網站上的資料 例如要取得 按讚的數量可以用下面的api link取得 https://api.facebook.com/method/fql.query?format=json&query=select%20%20like_count%20from%20link_stat%20where%20url=%22http://www.yahoo.com%22 結果 [{"like_count":485593}] 其中format參數是設定回應的資料型態 預設是XML 在此我是設定成json Query是使用的FQL語法 查詢的內容 https://developers.facebook.com/docs/reference/fql/ 詳細的FQL使用方法 可以到 Facebook還提供測試環境讓你可以測試 Graph API 測試 https://developers.facebook.com/tools/explorer/145634995501895/ 這個功能不只是可以取得連接的資訊，也可以得到使用者的或FB會員的資料， 當然只有公開的資料可以取得而已 有慶去的可以去測試程式試試看

通常設計好的FB APP要放在fb上的時候 都會因為FB app頁面會出現scroll bar讓畫面變的不好看 其實可以加上setAutoGrow設定 就可以讓 FB app Canvas的頁面沒有Scroll bar 在fbInit上加上 FB.Canvas.setAutoResize . window.fbAsyncInit = function() { FB.init({ appId : 'YOUR_APP_ID', // App ID channelUrl : '//WWW.YOUR_DOMAIN.COM/channel.html', // Channel File }); FB.Canvas.setAutoGrow(); } 不過因為FB dev eloper上面有註明 This method is only enabled when Canvas Height is set to "Fixed at (800)px" in the App Dashboard. 所以記得在FB app設定上 Canvas 高度要設成 Fixed at(800)px 這樣才會正常。

目前FB提供兩種方式可以用JS做到分享資訊到塗鴉牆的方法 FB.api / FB.ui 這兩種方法都很好用 其中FB.api是有很強大的功能方法， 除了可以做分享到塗鴉牆的功能 還可以取得很多FB使用者的個人資訊 而FB.ui純粹只是做FB分享到塗鴉牆的功能 在使用上是不需要使用者先做FBapp的同意授權的 並且還有預覽的功能 兩個的用法有點不一樣 FB.ui是比較容易使用的 用法如下FB.ui( para,callback) function postToFeed() { var obj = { method: 'feed', name: '標題', caption: '子標題', description: '描述', link: 'http://demo.gallerymax.net/FBtest.html', picture: 'http://www.gallerymax.net/upload/TechNoteMV.gif' }; function callback(response) {console.log(response); } FB.ui(obj, callback); } 按下之後會出現以下的確認畫面 然後在塗鴉牆上會呈現這樣的訊息 如果是使用FB.api的話 會比較複雜需要得到使用的同意授權 而且執行分享到塗鴉牆的程式時 是不會有預覽的畫面 就直接分享出去了 FB.api使用的用法如下 function postTofeed(){ var params = {}; params['message'] = 'test'; params['name'] = 'test'; params['description'] = 'test'; params['link'] = 'http://demo.gallerymax.net/FBtest.html'; params['picture...

FB Share Dialog Error On IE 8 在使用FB Share Dialog 的元件時 用FB官方的source Code https://www.facebook.com/sharer/sharer.php?u='+encodeURIComponent(location.href) , 'facebook-share-dialog', 'width=626,height=436'); return false;"> Share on Facebook 在IE8的瀏覽時候會出現錯誤 SCRIPT87: 不正確的引數。 m_index.html, 行 127 字元 1 這個原因是在IE中 window.opne的參數 不得有 "-" 所以原本的source Code要把name的參數 [facebook-share-dialog]改掉就可以了 https://www.facebook.com/sharer/sharer.php?u='+encodeURIComponent(location.href) , ' NewWindowsName ', 'width=626,height=436'); return false;"> Share on Facebook

可以在 fb debug tool 中將丟的網址後面加上rescrape=true這個參數即可 EX： http://www.gallerymax.net/index.aspx?rescrape=true

Use this page like https://graph.facebook.com/?ids=[Your specific Page URL] then get URL infomation by JSON formate EX: https://graph.facebook.com/?ids=http://tw.yahoo.com/ GET: { "http://tw.yahoo.com/": { "id": "http://tw.yahoo.com/", "shares": 132658, "comments": 32 } }

The User object has the following fields: Name Description id The user's Facebook ID name The user's full name first_name The user's first name middle_name The user's middle name last_name The user's last name gender The user's gender: female ormale locale The user's locale languages The user's languages link The URL of the profile for the user on Facebook username The user's Facebook username age_range The user's age range; only returned if specifically requested via the fields URL parameter third_party_id An anonymous, but unique identifier for the user; only returned if specifically requested via the fields URL parameter i...

1.首先要先到 Facebook Developer 中建立一個 Application，取得 App ID: 2.設定App的基本資料 3.由 Auth Dialog 設定App要取得使用者的權限 4. 使用FB的 Javascript SDK  在自己的網站上撰寫code <div id="fb-root"></div> <script> window.fbAsyncInit = function() { FB.init({appId: '1970*******7670', status: true, cookie: true, xfbml: true}); }; function myfbShare(){ var params = {}; params['message'] = 'message'; params['name'] = 'name'; params['description'] = 'description'; params['link'] = 'http://www.yahoo.com'; params['picture'] = 'http://www.yahoo.com/logo.jpg'; params['caption'] = 'caption'; FB.login(function(response) { if (response.authResponse) { console.log('Welcome! Fetching your information.... '); FB.api('/me', function(response) { console.log('Good to see you, ' + response.name + '.'); FB.api('/me/f...

Facebook link debugging http://developers.facebook.com/tools/debug Open Graph Protocol http://ogp.me/