Adding like button

[itaibaruch]

hi,

if i understand right, after the SDK finish loaded i shouldn't have any problem to adding "LIKE" button to my page, but its doesn't work... how can i add "LIKE" button to my site?

thanks.

[AlmogBaku]

@itaibaruch you can add "like button" without any angular plugin.. it's not necessary.

[AlmogBaku]

Todo: [ ] build like directive

[ajbraus]

I added a like button and the directive breaks it. Its the like button or the login, not both.

[AlmogBaku]

@ajbraus can you please explain more about your bug? it's sound really weird..

[ajbraus]

If I include this thing then none of my like buttons work. Actually neither do my tweet buttons! But if I remove this and add it to my application template, then the like buttons work, but my facebook login button doesn't work. Its either or.

  .run(['$rootScope', function ($rootScope) {
// Load the facebook SDK asynchronously
(function(){
   // If we've already installed the SDK, we're done
   if (document.getElementById('facebook-jssdk')) {return;}

   // Get the first script element, which we'll use to find the parent node
   var firstScriptElement = document.getElementsByTagName('script')[0];

   // Create a new script element and set its id
   var facebookJS = document.createElement('script'); 
   facebookJS.id = 'facebook-jssdk';

   // Set the new script's source to the source of the Facebook JS SDK
   facebookJS.src = '//connect.facebook.net/en_US/all.js';

   // Insert the Facebook JS SDK into the DOM
   firstScriptElement.parentNode.insertBefore(facebookJS, firstScriptElement);
 }());

}])

[ajbraus]

Fixed! I think if you included a more complete example in the docs it would be more clear. Thanks!

[ajbraus]

So I fixed it but the like button disappears when I navigate away (changing state in angular-ui-router). Any ideas?

            <div class="fb-like" data-href="https://www.facebook.com/coride.co" data-layout="" data-action="like" data-show-faces="true" data-share="true"></div>

[AlmogBaku]

We used both login and like-btn with one of @GoDisco product.

The login btn used: $facebook.login(). The btn:

app.directive('fbLikebox', ['$timeout', function($timeout) {
    return {
        restrict: 'E',
        templateUrl: templates_url + "app/views/_fbLikebox.html",
        scope: { fbid: '='},
        link: function($scope, $element, $attrs) {
            $timeout(function() {
                return FB.XFBML.parse($element[0]);
            }, 15, false);
        }
    };
}]);

<div class="fbLikebox">
    <div class="fb-like"
         data-href="{{ fbid }}"
         data-layout="button"
         data-action="like"
         data-show-faces="true"
         data-share="false">
         </div>
</div>

then on the view:

<fb-likebox fbid="ctrl.facebook_page_id"></fb-likebox>

[AlmogBaku]

ill try to push it to the repo asap..

(btw, sorry.. I was completely forgot that we've faced this issue :O)

[angelxmoreno]

using $timeout in the link function fixed my parsing issues. thanks @AlmogBaku we should add this to the docs. the directives must be set to wait for FB to be loaded

[urkh]

the line on @AlmogBaku example return FB.XFBML.parse($element[0]); where does it come from?

[angelxmoreno]

FB.XFBML.parse is part of the Facebook SDK lib. I interpret the solution as putting a delay on the actual parsing of the fbml due to the fact that directives get loaded AFTER the page has loaded and all fbml on the page. Thus, the fbml code is not parsed when in a directive.

[urkh]

Thanks for reply @angelxmoreno

I understand that FB.XFBML is part of the SDK, but what I see is how to calling FB.XFBML from my directives, as the facebook sdk comes bundled with ngFacebook lib, then, the FB.XFBML.parse line ($ element [0]); from directive, I get an undefined

sorry for my very bad english

[AlmogBaku]

@urkh try to use $facebook.promise.then(function(FB) {...}); in order tog get the FB object.

[urkh]

thanks @AlmogBaku. that way can access to FB object

:beers:

[AlmogBaku]

awesome! If you have the time- you're more than welcome to submit PR

• http://www.SocialBelong.com[image: Like us on facebook] https://www.facebook.com/SocialBelong[image: follow us on linkedin] https://www.linkedin.com/company/socialbelong*

Almog Baku, CEO

Call me: +972-50-2288-744Give me a reply: almog@SocialBelong.com almog@SocialBelong.comAdd me to your: [image: facebook] http://www.facebook.com/AlmogBaku [image: linkedin] http://www.linkedin.com/in/almogbaku Q: Why is this email five sentences or less? A: http://five.sentenc.es

On Mon, Apr 27, 2015 at 4:28 AM, Gustavo León Tramontin < notifications@github.com> wrote:

thanks @AlmogBaku https://github.com/AlmogBaku. that way can access to FB object

[image: :beers:]

— Reply to this email directly or view it on GitHub https://github.com/GoDisco/ngFacebook/issues/29#issuecomment-96458011.

[mpeguero]

This component does not work on mobile devices.

[AlmogBaku]

Actually, again- it shiuld work. This whole bundle designed for mobile(at GoDisco).

Please provide more information

On Friday, June 5, 2015, mpeguero notifications@github.com wrote:

This component does not work on mobile devices.

— Reply to this email directly or view it on GitHub https://github.com/GoDisco/ngFacebook/issues/29#issuecomment-109167378.

• http://www.SocialBelong.com[image: Like us on facebook] https://www.facebook.com/SocialBelong[image: follow us on linkedin] https://www.linkedin.com/company/socialbelong*

Almog Baku, CEO

Call me: +972-50-2288-744Give me a reply: almog@SocialBelong.com almog@SocialBelong.comAdd me to your: [image: facebook] http://www.facebook.com/AlmogBaku [image: linkedin] http://www.linkedin.com/in/almogbaku Q: Why is this email five sentences or less? A: http://five.sentenc.es