locked
How to integrate with Facebook JavaScript SDK

    Question

  •  

    Is it possible to use Facebook JavaScript SDK in Metro Mode with JavaScript based application?

    First, I use iframe to load facebook.html file in default.html with

    <iframe id="facebookIframe" src="ms-wwa-web:///facebook.html"></iframe>
    
    and add
    <script src="http://connect.facebook.net/en_US/all.js"></script>
    

    in facebook.html file.
    (According to this post Load remote .js file into app )

    When application running, JavaScript Console said
    * Windows Web Applications supports a limited set of ActiveX controls.
    * JavaScript runtime error: Unable to get value of the property 'length': object is null or undefined. File: http://connect.facebook.net/en_US/all.js, line: 7 column: 1313

    Then I download all.js from Facebook and add it into Visual Studio project.

    Load it by

     

    <script src="/js/all.js"></script>
    

    And modify the part of error occur in all.js from
        if(navigator.mimeTypes.length>0)
    

    to

        if(navigator.mimeTypes && navigator.mimeTypes.length>0)
    

    But there are still other errors occur in
        InsertIframe: function (e)
    

    because the variable "e.root" is undefined.

    Update: I've found the root cause. Because that I forgot to add

    <div id="fb-root"></div>

    into facebook.html .

     

    How to solve this issue if we use Facebook JavaScript SDK in Metro Mode, or modify Facebook JavaScript SDK to fit with Metro Mode?

    Is there any concepts or configurations i forget?

    Note: The part of Web Authentication with OAuth 2.0 mentioned in How to integrate with Facebook is workable.
    But I hope that I could use JavaScript SDK rather than use Graph API directly.

    Thanks for replying in advance.

    Sars

    • Edited by Sars C Thursday, November 10, 2011 4:18 AM
    Wednesday, November 09, 2011 5:28 PM

Answers

  • Hi Sars,

    No there is nothing you forgot.  This is specific for the script you are importing.  You should be able to debug the jscript and find out what parts of the Facebook jscript is having trouble and change those parts of the script.  The people that will be familiar with the script are the ones that are developing and supporting it.  You could use their forums to help you narrow this down: http://forum.developers.facebook.net/  I am sure they would be interested in developing a script that works with Metro Style applications as well.

    -Jeff 

     


    Jeff Sanders (MSFT)
    Wednesday, November 09, 2011 6:55 PM
    Moderator

All replies

  • Hi Sars,

    No there is nothing you forgot.  This is specific for the script you are importing.  You should be able to debug the jscript and find out what parts of the Facebook jscript is having trouble and change those parts of the script.  The people that will be familiar with the script are the ones that are developing and supporting it.  You could use their forums to help you narrow this down: http://forum.developers.facebook.net/  I am sure they would be interested in developing a script that works with Metro Style applications as well.

    -Jeff 

     


    Jeff Sanders (MSFT)
    Wednesday, November 09, 2011 6:55 PM
    Moderator
  • Thanks Jeff.

    I found the root cause and it seems to work now.

    I forgot to add

    <div id="fb-root"></div>

    into facebook.html .

    I've asked the first question at Facebook section of Stack Overflow due to forum of Facebook was read-only after September 1, 2011.

    A little issue that use Facebook JavaScript SDK in Metro Mode of Windows 8 with JavaScript based application

     



    • Edited by Sars C Thursday, November 10, 2011 4:16 AM
    Thursday, November 10, 2011 3:33 AM
  • Here is a simple tutorial explaining how to retrieve complete facebook friend list using Javascript SDK and display them as an image grid: http://bit.ly/zIet9k
    Regards, Joby (Please mark as Answered, if i could help you)
    www.dotnetcomplete.com
    Wednesday, January 18, 2012 11:07 AM
  •  

    Is it possible to use Facebook JavaScript SDK in Metro Mode with JavaScript based application?

    First, I use iframe to load facebook.html file in default.html with

    <iframe id="facebookIframe" src="ms-wwa-web:///facebook.html"></iframe>
    
    and add
    <script src="http://connect.facebook.net/en_US/all.js"></script>
    

    in facebook.html file.
    (According to this post Load remote .js file into app )

    When application running, JavaScript Console said
    * Windows Web Applications supports a limited set of ActiveX controls.
    * JavaScript runtime error: Unable to get value of the property 'length': object is null or undefined. File: http://connect.facebook.net/en_US/all.js, line: 7 column: 1313

    Then I download all.js from Facebook and add it into Visual Studio project.

    Load it by

     

    <script src="/js/all.js"></script>
    

    And modify the part of error occur in all.js from
        if(navigator.mimeTypes.length>0)
    

    to

        if(navigator.mimeTypes && navigator.mimeTypes.length>0)
    

    But there are still other errors occur in
        InsertIframe: function (e)
    

    because the variable "e.root" is undefined.

    Update: I've found the root cause. Because that I forgot to add

     

    <div id="fb-root"></div>
    

    into facebook.html .

     

     

    How to solve this issue if we use Facebook JavaScript SDK in Metro Mode, or modify Facebook JavaScript SDK to fit with Metro Mode?

    Is there any concepts or configurations i forget?

    Note: The part of Web Authentication with OAuth 2.0 mentioned in How to integrate with Facebook is workable.
    But I hope that I could use JavaScript SDK rather than use Graph API directly.

    Thanks for replying in advance.

    Sars

    Sars can you please tell me how your facebook.html page look like. I tried it but it displays a blank page. I was expecting some errors atleast :)
    Saturday, February 04, 2012 2:54 PM
  • how to get all the notifications using graph api. I am able to get only unread notifications using" https://graph.facebook.com/me/notifications?access_token="

    but if it try with "https://graph.facebook.com/me/notifications?include_read=1?access_token=" I am not getting the data though The app has manage_notifications permissions..

    Wednesday, June 13, 2012 6:32 PM
  • Notice to all posters... If you have a new question, please post a new question in the forum.  This will help separate out each question and prevent a single post with multiple questions in it.

    Jeff Sanders (MSFT)

    Thursday, June 14, 2012 5:26 PM
    Moderator