Not working on chaning of view about angular-easyfb HOT 10 CLOSED

Hi @cloudzon-hitesh ,
Can you make a plunk which demonstrate the issue at http://plnkr.co for me?

from angular-easyfb.

Hi @pc035860 ,

Same is happening to me... hard to work into a plunker due to the amount of data pulled in from third party APIs.

I bring in the module like so:

(function () {
    'use strict';

    var id = 'app';
    var app = angular.module(id, ['ngRoute', 'ezfb']);
    app.config(['$routeProvider', '$locationProvider', '$FBProvider', function ($routeProvider, $locationProvider, $FBProvider) {
        $locationProvider.hashPrefix('!');
        $FBProvider.setInitParams({
            appId: '************',
            status: false,
            xfbml: false
        });
    }]);
})();

From what I understand, this is all that is necessary to get the default HTML5 social plugins working, like so: <div class="fb-like" data-href="{{ shareUrl }}" data-layout="standard" data-action="recommend" data-show-faces="true" data-share="true" data-width="273"></div>

Anything in particular to look at? It doesn't appear to render the like button when the "page" changes (no real page change, just a location change in angular).

Thanks.

from angular-easyfb.

Hi @Chaddeus ,

Can you take a DOM screenshot in Chrome DevTools for me?
Try to expand them as detail as you can.

Does it render any error message from Facebook? Or just nothing happend?
Which version of angular-easyfb module are you using?

from angular-easyfb.

@pc035860 ,

Wow, thanks for the quick reply. I'm using version: 0.3.0, build date: 2014-03-02

My code looks like:

<div class="fb-like" data-href="{{ shareUrl }}" data-layout="standard" data-action="recommend" data-show-faces="true" data-share="true" data-width="273" data-colorscheme="light"></div>

On fresh load, it parses like so:

<div class="fb-like fb_iframe_widget" data-href="https://atmybase.com/MilBase/yokota-ab-japan#!/place/4b7ce854f964a520f1a82fe3" data-layout="standard" data-action="recommend" data-show-faces="true" data-share="true" data-width="273" data-colorscheme="light" fb-xfbml-state="rendered" fb-iframe-plugin-query="action=recommend&amp;app_id=474256679336119&amp;color_scheme=light&amp;href=https%3A%2F%2Fatmybase.com%2FMilBase%2Fyokota-ab-japan%23!%2Fplace%2F4b7ce854f964a520f1a82fe3&amp;layout=standard&amp;locale=en_US&amp;sdk=joey&amp;share=true&amp;show_faces=true&amp;width=273"><span style="vertical-align: bottom; width: 273px; height: 47px;"><iframe name="f360bde8e8" width="273px" height="1000px" frameborder="0" allowtransparency="true" scrolling="no" title="fb:like Facebook Social Plugin" src="https://www.facebook.com/plugins/like.php?action=recommend&amp;app_id=474256679336119&amp;channel=https%3A%2F%2Fs-static.ak.facebook.com%2Fconnect%2Fxd_arbiter%2F63KoCqPoniC.js%3Fversion%3D40%23cb%3Dfc1e0a5b4%26domain%3Datmybase.com%26origin%3Dhttps%253A%252F%252Fatmybase.com%252Ff3eb6ab58%26relation%3Dparent.parent&amp;color_scheme=light&amp;href=https%3A%2F%2Fatmybase.com%2FMilBase%2Fyokota-ab-japan%23!%2Fplace%2F4b7ce854f964a520f1a82fe3&amp;layout=standard&amp;locale=en_US&amp;sdk=joey&amp;share=true&amp;show_faces=true&amp;width=273" class="" style="border: none; visibility: visible; width: 273px; height: 47px;"></iframe></span></div>

On "dynamic" load, it parses like so:

<div class="fb-like fb_iframe_widget" data-href="https://atmybase.com/MilBase/yokota-ab-japan#!/place/4b7ce854f964a520f1a82fe3" data-layout="standard" data-action="recommend" data-show-faces="true" data-share="true" data-width="273" data-colorscheme="light" fb-xfbml-state="rendered" fb-iframe-plugin-query="action=recommend&amp;app_id=474256679336119&amp;color_scheme=light&amp;href=https%3A%2F%2Fatmybase.com%2FMilBase%2F%257B%257B%2520shareUrl%2520%257D%257D&amp;layout=standard&amp;locale=en_US&amp;sdk=joey&amp;share=true&amp;show_faces=true&amp;width=273"><span style="vertical-align: bottom; width: 273px; height: 47px;"><iframe name="f65675968" width="273px" height="1000px" frameborder="0" allowtransparency="true" scrolling="no" title="fb:like Facebook Social Plugin" src="https://www.facebook.com/plugins/like.php?action=recommend&amp;app_id=474256679336119&amp;channel=https%3A%2F%2Fs-static.ak.facebook.com%2Fconnect%2Fxd_arbiter%2F63KoCqPoniC.js%3Fversion%3D40%23cb%3Df14b64a%26domain%3Datmybase.com%26origin%3Dhttps%253A%252F%252Fatmybase.com%252Ff3eb6ab58%26relation%3Dparent.parent&amp;color_scheme=light&amp;href=https%3A%2F%2Fatmybase.com%2FMilBase%2F%257B%257B%2520shareUrl%2520%257D%257D&amp;layout=standard&amp;locale=en_US&amp;sdk=joey&amp;share=true&amp;show_faces=true&amp;width=273" class="" style="border: none; visibility: visible; width: 273px; height: 47px;"></iframe></span></div>

Notice the data-href is correct in both cases, but inside the fb-iframe-plugin-query parameter (which must be generated by the FB plugin) the url is simply adding {{ shareUrl }} to my domain url (which is https://atmybase.com)

Is this something you've seen before?

from angular-easyfb.

I'm guessing if it's caused by string interpolation delay, which might not happen on first-time-page-load.

Can you modify your code to

<div class="fb-like" 
  ng-if="shareUrl"
  data-href="{{ shareUrl }}" 
  data-layout="standard" 
  data-action="recommend" 
  data-show-faces="true" 
  data-share="true" 
  data-width="273" 
  data-colorscheme="light"></div>

See if it works or not?
(which just adds an ng-if on the directive)

from angular-easyfb.

@pc035860 ,

Yup, that was it. Working perfectly now. Thanks for the excellent support. You may want to consider adding that information to the readme.

Superb product by the way, I really appreciate your time and effort to create this.

from angular-easyfb.

@Chaddeus ,

Thanks you for the feedback!
I'll try to find a workaround for the interpolation issue (or update the README lol)

from angular-easyfb.

Interpolated support for built-in social plugin directives in v0.3.1

from angular-easyfb.

Demo: http://plnkr.co/edit/gFM1LV?p=preview

from angular-easyfb.

Its working on loading, but when i navigate to another route and come back to this page its coming like this

please suggest

from angular-easyfb.