locked
Embedding Facebook Like button in Metro apps RRS feed

  • Question

  • Has anyone succeeded embedding Facebook like button in metro app page?

     

    I picked up the iframe source for a like button from here

    http://developers.facebook.com/docs/reference/plugins/like/

     

    <iframe src="//www.facebook.com/plugins/like.php?href=http%3A%2F%2Fbing.com&amp;send=false&amp;layout=button_count&amp;width=450&amp;show_faces=true&amp;action=like&amp;colorscheme=light&amp;font&amp;height=21" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:450px; height:21px;" allowTransparency="true"></iframe>

     

    This shows up correctly in metro app page BUT when i click it to actually "Like" it, it opens up metro-IE full screen for fb auth and from there whole experience does not work.

     

    How can i make it work?


    Amit Kumar
    Saturday, December 31, 2011 5:03 AM

All replies

  • You need to use the HTML5 version, not the IFrame version.

    <div id="fb-root"></div>
    <script>(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/en_US/all.js#xfbml=1&appId=142780635831896";
      fjs.parentNode.insertBefore(js, fjs);
    }(document, 'script', 'facebook-jssdk'));</script>

    <div class="fb-like" data-href="http://www.bing.com" data-send="true" data-width="450" data-show-faces="true"></div>

    I didn't test it but it should get you closer.


    Check out my new C# 2010 All In One for Dummies book at Amazon!
    Monday, January 2, 2012 2:32 PM
  • I tried HTML5 version as well and it also doesn't work. It fails somewhere in fb js file so even Like button is not getting rendered. IFrame approach atleast was able to render Like button with like count.
    Amit Kumar
    Monday, January 2, 2012 6:33 PM