Facebook SDK integration : Display Page Plugin

cordova
1

Hi all,
I am new Ionic Framework. I just integrated Facebook SDK using tutorial http://ccoenraets.github.io/ionic-tutorial/ionic-facebook-integration.html.

Now I want to display Facebook Page inside tab template. I just trying to integrate page using javascript shown in facebook tutorial https://developers.facebook.com/docs/plugins/page-plugin. But it only work on browser but not in actual application when run in andaroid.

Any one have solution for this.

2

Directive:

.directive('fbPost', function($document) {
      return {
        restrict: 'EA',
        replace: false,
        link: function($scope, element, attr) {
          (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 = "https://connect.facebook.net/en_US/sdk.js#xfbml=1&version=v2.4&appId=1652034465042425 ";
            fjs.parentNode.insertBefore(js, fjs);
          }(document, 'script', 'facebook-jssdk'));
        }
      }
    })

Template:

<div fb-post class="fb-page" data-href="**{{Your Page Link}}**" data-small-header="false" data-adapt-container-width="true" data-hide-cover="false" data-show-facepile="false" data-show-posts="true">
      </div>
2 Likes
3

I have the same problem. The posted solution does not work. It loads fine when using ionic run --livereload but not when doing ionic run.

I can use use Chrome’s web inspector and see that the content is downloaded from Facebook, but it’s never rendered when doing Ionic run. I have no idea what the problem is.

Does anyone have any suggestions?

1 Like
4

Does it works now? I am also get stuck with the blank screen error in page plugin now