Why different facebook plugins using the same div id name? - facebook

We want to integrate the facebook login button plugin, facebook like button, facebook comments with in one page for different purpose.
But we found that they all using the same div id #fb-root. As we know, one div id should be used only time for one page...
How to solve it?

You only need one fb-root. The like button, login, etc will generate where you put the "like", "login", etc tags.
<div class="fb-like" data-send="true" data-width="450" data-show-faces="true"></div>
"Include the JavaScript SDK on your page once, ideally right after the opening tag."
This contains fb-root
Then, Place the code for your plugin wherever you want the plugin to appear on your page.

Related

Want the facebook comment box url dynamically assigned according to posts

I am working to create a website using wordpress. There are a number of posts in my web site. I am to add the facebook comment button that appears below every single posts in my site. For this purpose I used the facebook social plugin.
I added the codes generated at facebook developers site to my single post page file. Now the problem is: The same comments appear in every page in my posts everywhere. how can I make this a specific one .
<div class="fb-comments" data-href="http://rabindraadhikari.com" data-width="600" data-numposts="3" data-colorscheme="light"></div>
I want to change the data-href part of the code so that it assigns the url according to the page where it is displayed.
The format of the posts url belonging my site is www.domain-name.com/post-id
How can it be done??
Somewhere, I found it can be done like this but it didnt work
<div class="fb-comments" data-href="+location.href+" data-num-posts="3" data-width="470"></div>
location.href is a property from javascript, so
<script>
document.write('<div class="fb-comments" data-href="'+location.href+'" data-num-posts="3" data-width="470"></div>');
</script>

Fb Like in Ember App

In my ember app I am trying to add fb like button. I have this flow.
index -> select Image -> pay -> thank you page
In my thank you page I am trying this fb like code
<div class="fb-like" data-href="https://www.facebook.com/Postify.Postcards" data-layout="button_count" data-action="like" data-show-faces="false" data-share="false"></div>
The problem is when I am coming the above mentioned flow it doesn't show a like button. But when I am on thank you page and the refresh then it shows the fb like button.
Any thoughts?
Facebook parses the page on page load for instances of Facebook items, since you're dynamically adding it after page load it doesn't catch it. You'll just need to re-parse the page, or re-parse that item when you hit a template where that applies.
https://developers.facebook.com/docs/reference/javascript/FB.XFBML.parse/
Something like this would be the way to solve it.
App.ThankYouView = Ember.View.extend({
setupFbLike: function(){
FB.XFBML.parse();
}.on('didInsertElement')
})

Why is my facebook like button applying to the "social plugins" page?

I have added a facebook like button to my site at http://forkmyreligion.com. I have triple checked all the settings for the app on my developers.facebook page and I'm pretty sure its all correct - the domain is correct, the website url is correct and I have the correct app id for the application.
The problem though is that clicking on the like button results in the user liking the facebook social plugins page rather than my page.
Any ideas what the problem might be?
Thanks
The Like button on your page is Liking the social plugins page because the Like button on your page has a data-href parameter which is explicitly configuring the like button to like that URL:
You have this:
<div class="fb-like" data-href="https://developers.facebook.com/docs/plugins/" data-colorscheme="light" data-layout="standard" data-action="like" data-show-faces="true" data-send="false"></div>
You need to set the data-href to the URL you want the button to display and increment the like count of.
This parameter is mentioned on the Like button documentation and the example in the documentation is the URL https://developers.facebook.com/docs/plugins/

Facebook like/recommend button on facebook iFrame tab

I want to add a like/recommend button to a facebook tab.An example of facebook tab is this.
The problem with using facebook like/recommend is that if we have done fan gating and the user has to like the page before he/she can view the content of the tab, then the like/recommend will always be greyed out, since the page has been liked.
So in particular I want the user to like a section of the page not the complete page.
I have gone through the net and found out some hacks for it like this and this.
I don't want to use fb:comments or fb:share as they have been deprecated. Is there any other way around.
Place this code inside your page:
You need to specify data-href to your particular link.
Leaving it empty gets facebook to like the current page.
<div class="fb-like" data-href="http://www.google.com" data-send="true" data-width="450" data-show-faces="true"></div>

facebook like button displaying incorrectly (debug shows empty href)

I'm having an issue with the facebook like button on website:
according to the facebook lint tool my like buttons are:
<div class="fb-like" data-href="" data-send="false" data-layout="button_count" data-show-faces="false"></div>
however my page has:
<div class="fb-like" data-href="<?=$value['actions'][1]['link'];>" data-send="false" data-layout="button_count" data-show-faces="false"></div></p><hr />
and I'm 100% sure that $value['actions'][1]['link'] actually contains a valid facebook URL
(when looked at my page without re-rendering, it also shows this URL)
-
With this output you'd expect the like not to function, however it does:
if I like a status message, it tells on the page that I liked it, and it is the first like for that item;
however if I go to facebook, it states that I liked it, and also states that there are x other likes.
If I refresh the page, it's again like I didn't like the item yet; altough it's the same item
-
I hope you understood my problem, isn't that easy to explain...
First, remove the loading of the Facebook scripts and check your view source to ensure the data-href is populating correctly prior to the Facebook parser getting to it.