Implement multiple Facebook Like / Social buttons on a single page

[Robert Chai]

Hi there,

Personally, I'm not really a technical person. I have been thinking
this small little challenge of mine for quite a little while and
haven't got a solution to the problem despite having taken some time
off to do some research and trials.

I would be displaying multiple post entries on a page using ng:repeat,
and my challenge here is to add social buttons such as Facebook or
Twitter, for each individual post. Thus, eventually I would be
displaying multiple posts within a single page, something like http://9gag.com
.

Below is my brief research:

Example:
http://hillarsaare.com/projects/facebook/multi-like/
http://hillarsaare.com/multiple-facebook-like-buttons-on-one-page/
http://www.hyperarts.com/blog/how-to-add-facebook-like-button-social-plugins-to-wordpress-posts/


Usually, the current implementation seems to only work with Wordpress
or PHP codes.

Given my understanding, there is no examples of any implementations
within AngularJS and I was wondering how I can implement it within
AngularJS. Would hope someone can point out how to get it done or
provide an example to assist me in solving the solution.

Appreciate the help! Thanks! =D


Regards,
Robert Chai

[Vojta Jina]

That should be easy, just add the FB code into ng:repeat and bound the href attribute

Something like this:

<div ng:repeat="item in items">

  <fb:like ng:href="{{item.yourUrl}}" layout="button_count"
    show_faces="false" width="240" height="40"
    action="like" colorscheme="light"></fb:like>

</div>

Give it a try and send concrete question + code example (using jsfiddle.net is good way to share code example)...

V.

[Robert Chai]

Hi Vojta,

Thank you for the reply. I do apologize for such a late reply on my
end, as I'm very held up with my work, despite wanting to resolve this
issue. I've tried your above solution prior to creating this question,
I've tried editing a copy on jsFiddle for your preview, as it doesn't
work as I've previously coded, so kinda can't wrap my mind around
what's the main issue.

jsFiddle: http://jsfiddle.net/sgrobert/AkJ5q/

I sincerely appreciate for replying me on the matter! Looking forward
to your valuable feedback. Thanks! =)


--Robert Chai

[Vojta Jina]

http://jsfiddle.net/vojtajina/AkJ5q/7/

But the problem is, that you need to init fb button always, when ng:repeat changes....

That means, this won't work, when you change the blog.entries array (try to append another blog, dynamically during run-time, it won't have the button rendered).

So it's better to use FB JS API for parsing specific DOM and create simple directive, than, you can dynamically change the entries and buttons will be rendered:

http://jsfiddle.net/vojtajina/DQHdk/

Here is the FB docs: http://developers.facebook.com/docs/reference/javascript/FB.XFBML.parse/

V.

[Robert Chai]

Hi Vojta,

Awesome stuff! Kudos for the great help! Hmm. However, I guess on my
end, only using a combination of your 1st and 2nd solution will allow
mine to work, also not too sure why. (http://jsfiddle.net/sgrobert/
AvG39/)

Also, guess I have another query on this matter, I've been refreshing
my page at times, but after every refresh, the social buttons all
disappeared, only after I clear browser cache and refreshed, then it
re-appeared. Is there any way to keep the "disappearing act" from
happening?

Thanks! =D


--Robert Chai

[Robert Chai]

Also, I guess I just found another bug, which I have no idea of how to
show it to you, mainly is when I attempt to install codes for Google+,
it would load when my cache is cleared, and I did a refresh, for the
current page, however, if I were to click to proceed to a specific
page, the similar Google+ link on that page would disappear, when used
within a ng:view.

I was thinking is it because the Google+ link does not get a "forced-
request" to pull the button rendering to the pages that were pre-
loaded within ng:view? I hope someone can help enlighten me on this
matter.

Currently I'm using the following codes: http://jsfiddle.net/sgrobert/xZJ3v/

So, would anyone have any views on this? Appreciate the help! =D


--Robert Chai

[tapan sood]

Hi Robert,

Great stuff..Really helped me.. But i am also facing the same problem that after refreshing social buttons are disappearing. Were you able to find any solution for that?

If yes, can you please share it. Thanks.

[Robert Chai]

Hi Tapan,

Sorry to say, after reviewing the options, I ported my site to wordpress instead. Thus, have not since found any solution to the issue at hand. I wish you well in finding one though, if you do.. Do share with me as well. As at that point of time, have been searching for nearly 3-4 months. But generally, from my understanding, you have to build a custom directive to insert the codes upon loading to make it work. 

Regards,

Robert Chai

--
You received this message because you are subscribed to a topic in the Google Groups "AngularJS" group.
To unsubscribe from this topic, visit https://groups.google.com/d/topic/angular/89nc7dHUosY/unsubscribe?hl=en-US.
To unsubscribe from this group and all its topics, send an email to angular+u...@googlegroups.com.
To post to this group, send email to ang...@googlegroups.com.
Visit this group at http://groups.google.com/group/angular?hl=en-US.
For more options, visit https://groups.google.com/groups/opt_out.