Facebook comments plugin - same comments on every page - facebook

Facebook comments on my website work well except the fact when someone comments on one article that same comment shows up on every article on the website. Obviously, I don't want that. What I did is basically copy and paste code offered on developers.facebook.com:
`<div id="fb-root"></div>
<script>(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 = "//connect.facebook.net/en_US/all.js#xfbml=1";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>`
`<div class="fb-comments" data-href="http://example.com" data-num-posts="2" data- width="470"></div>`
What did I do wrong? I would appreciate any help.
Vio

You using same data-href attribute for comments social plugin on all pages (linking comments to http://example.com)
You should either provide URL of your post or leave this attribute empty (current page URL is used by default if this attribute missing or empty) on each page comments social plugin placed.

I have same problem, tried the solution offered by "juicy scripter" and I get "The comments plugin requires an href parameter." Then I found out juicy's solution should work if you use the XFBML version of the plugin.
In any case the solution I implemented on my static php site was to replace the href/URL with this code
<?php echo('http://'.$_SERVER['HTTP_HOST'].$_SERVER['REQUEST_URI']); ?>

Don't use the root url for the data-href. You need to generate the url for each page dynamically. E.g. if this was a WordPress blog, you would use php code data-href="<?php echo(get_permalink()) ?>"

This would work fine, but I found that in one site I could not use PHP. So This worked for me as a javscript solution. Simple replace the comments div with this javascript code...
<script>document.write("<div class='fb-comments' data-href='" + window.location.href + "' data-num-posts='2' data-width='470'></div>");</script>

Try This:
< div class="fb-comments" expr.href='data:post.url' data-width="600" data-numposts="5" data-colorscheme="light">
NOte:
in the above line in between < and div there is no space.
paste this code just above to
class='post-footer-line post-footer-line-3
Check in: http://debaonline4u.blogspot.com

I put the page url after the domain and it's work for me.
MyDomain is the domain I out when I create the code on the Facebook comments.
<div class="fb-comments" data-href="http://MyDomain/Mypage URL" data-numposts="5" data-colorscheme="light"></div>

The problem is data-href.
Use dynamic URL instead.
For eg. If you want Facebook comment for every page separately.
PHP :
data-href="<?php echo 'http://'. $_SERVER['SERVER_NAME'] . $_SERVER['REQUEST_URI']; ?>"
Hope it help someone.

Due to the need to have separation of concerns...."data-href" tag is there to serve...
For example: if you have some page www.example/123.com,,,, your data-href value must be www.example/123.com....
For doing this means is that render and store comments for
www.example/123.com and it will not then appear on other pages....

Use this for for PHP Laravel.
$currentURL = URL::current();//get currnt url
<div class="comment-form-area">
<div class="sharethis-inline-reaction-buttons"></div>
<div class="fb-comments" data-href="{{$currentURL}}" data-width="700" data-numposts="5">
</div>
</div>
if you use in Laravel Blade Templates do this.
#php $currentURL = URL::current(); #endphp
<div class="comment-form-area">
<div class="sharethis-inline-reaction-buttons"></div>
<div class="fb-comments" data-href="{{$currentURL}}" data-width="700" data-numposts="5">
</div>
</div>

Related

How to bypass opengraph tags for Facebook like buttons and use data-href instead

I have the javascript code with the fb-root div installed right after my <body> tag.
There's a like button in the header of my website to like the website.
But there's more buttons on the website, for every article. Sometimes there's more than one on the same page.
So following facebook's docs instructions I added a data-href="" attribute to my fb-like tag. Didn't worked. Then I added a ref="" attribute with the article's slug inside it. Thought it would help.
The button with both data-href and ref attributes shows the same amount of likes as the website header's one. And when I click on them they both like the same url, not the url I specified in data-href. Any button ALWAYS uses data from the opengraph tags and completely ignores what I specify in the tag. (Which should be the opposite)
So the question is: Is there a way to bypass OG tags and force the URL from data-href to be used for a button? (It should work that way but I totally ignore why it doesn't).
Here's the code I use:
Right after :
<div id="fb-root"></div>
<script>(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 = "//connect.facebook.net/en_US/all.js#xfbml=1&appId=MY_API_KEY>";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
Then in the header:
<div class="fb-like" data-send="false" data-layout="button_count" data-width="100" data-show-faces="false" data-font="arial" data-colorscheme="light"></div>
And then in an article:
<div class="fb-like" data-href="URL_OF_THE_ARTICLE" data-send="false" data-layout="button_count" data-width="175" data-show-faces="false" data-font="arial" data-colorscheme="light"></div>
I tried using both fb: and div tags by the way. This should be really simple, as it has been for Twitter and Google+.
Anyone has an idea of what's wrong with that?
Thanks!
The like button's data-href param should point to the URL of the content you want to like/share -
That URL should contain the meta tags telling facebook what title, etc to display and return these tags to Facebook's crawler
You can see what facebook detects at that url with Facebook's Debug Tool - double-check you're not redirecting the crawler by changing the og:url tag, using a canonical meta tag, etc

Can't get Admin access to my sites Facebook Comment Box

I am working on my new site, and I wanted to intergrate the facebook comment box so people could leave authentic feedback.
I've got the box on the site, created my app , got my app ID and my facebook ID. Put them in the meta tags but it still won't let me delete peoples comments. I had a friend put a test comment on for me to try.
The page is www dot bodmaster dot com/product/Bodology/EFX-10%20Oxygenator
I hovered the mouse over my facebook display pic to get my FB ID from the url...
This is how I got my app ID, and shows all my settings...
I've added the following meta tags to the page...
<meta property="fb:admins" content="10150317838260636" />
<meta property="fb:app_id" content="414103721981616" />
Just to be thorough this is the fb script added to the page...
<!-- facebook script -->
<div id="fb-root"></div>
<script>(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 = "//connect.facebook.net/en_US/all.js#xfbml=1&appId=414103721981616";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
<!-- end facebook script -->
and the code for the comment box...
<?php $url = (!empty($_SERVER['HTTPS'])) ? "https://".$_SERVER['SERVER_NAME'].$_SERVER['REQUEST_URI'] : "http://".$_SERVER['SERVER_NAME'].$_SERVER['REQUEST_URI']; ?>
<div class="fb-comments" data-href="<?php echo urlencode($url); ?>" data-num-posts="10" data-width="470"></div>
Facebook did say, "it may take a few moments to update the servers"
It's not working after an hour, am I not waiting long enough?
Any assistance would be greatly appreciated from you wizards.
I see the problem here:
I had a friend put a test comment on for me to try. The page is www
dot bodmaster dot com/product/Bodology/EFX-10%20Oxygenator
Change:
<?php $url = (!empty($_SERVER['HTTPS'])) ? "https://".$_SERVER['SERVER_NAME'].$_SERVER['REQUEST_URI'] : "http://".$_SERVER['SERVER_NAME'].$_SERVER['REQUEST_URI']; ?>
To:
<?php $url = (!empty($_SERVER['HTTPS'])) ? "http://www.".$_SERVER['SERVER_NAME'].$_SERVER['REQUEST_URI'] : "http://www.".$_SERVER['SERVER_NAME'].$_SERVER['REQUEST_URI']; ?>
Reason:
Your **site URL** is: http://www.bodmaster.com (set in your app settings)
Your comments URL is set to: http://bodmaster.com **or** https://bodmaster.com
Change the code as described above and...
Your comments URL is set to: http://bodmaster.com (even if SSL is currently in use)
Let me know if this works.

facebook like box wont except "like" on WordPress site and FB login box keeps popping up

Any assistance will and is greatly appreciated. Thank you in advance!
I used code generated by Facebook Developer and inserted the code into this WordPress site page:http://www.stilehair.com/studio code is below. When I open the page it looks right, BUT when I click on the "Like" button a pop-up appears and asks me to log into FB (even though I am already logged into FB.)
The box shakes and asks me again and never excepts my correct log in info, Nor does it except the "like".
This happens on all my browsers, iphone and ipad.
All software is up to date.
I've cleared the Cache'.
Tried numerous attempts at altering the code and/or method of inserting box.
Ran it through the FB Debugger
Searched the boards for answers and no solution is working.
<div id="fb-root"></div>
<script type="text/javascript">// <![CDATA[
(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 = "//connect.facebook.net/en_US/all.js#xfbml=1";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
// ]]></script>
<div class="fb-like-box" data-href="http://www.facebook.com/Stilehair"
data-width="292" data-colorscheme="dark" data-show-faces="false"
data-stream="false" data-header="false"></div>
I've researched several other questions with no results to help rectify my challenge.
Adding a like box seems like such an easy thing to do from all I've read on Facebook and Forums.
Thank you.
I used this code on my clients wordpress sites.
<div id="fb-root"></div>
<script src="http://connect.facebook.net/en_US/all.js#xfbml=1"></script><fb:like href="<?php echo get_permalink(); ?>" show_faces="true" width="450" send="true"></fb:like>
the above code is working fine on all of my clients wordpress blogs. For example view any post page [link]

Facebook Share button conflict with Facebook JSSDK. How to resolve?

I can't seem to get both scripts working. I am using the jssdk and fb.share to get facebook like box plus facebook share button. But they do not work together. Any idea why? How to fix this?
I have this in header:
<div id="fb-root"></div>
And this code in footer:
<script>(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 = "//connect.facebook.net/en_US/all.js#xfbml=1";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
This is my Fb.share code:
<div class="shr-fb">
<a name="fb_share"></a>
<script src="http://static.ak.fbcdn.net/connect.php/js/FB.Share" type="text/javascript"></script>
</div>
They make conflict with each other and I do not know how to resolve this situation.
Thank you.
Makes sense.
The facebook share is deprecated and no longer supported, as you can read in the docs:
The Share button has been deprecated in favor of the Like button, and
will no longer be supported. Please use the Like button whenever
possible to drive maximum traffic to your apps.
(reference: http://developers.facebook.com/docs/share/)
And:
What happened to the old Share button?
We deprecated the Share Button when we launched the Like button,
because the Like button improves clickthrough rates by allowing users
to connect with one click, and by allowing them to see which of their
friends have already connected.
(reference: http://developers.facebook.com/docs/reference/plugins/like/)
Instead, use the Like button and you won't run into conflicts.
Meanwhile, you can still combine both Like and Share buttons together with FaceBook JSSDK Api and the html snippet for that is;
<div class="fb-like" data-share="true" data-width="450" data-show-faces="true">
</div>
It will display both the Like and Share buttons functioning as required.

Facebook Like Box will not show up on Website

I am trying to load the Facebook like box on my webiste and when I go to get my code, I get a message that says "this content can not be displayed, To help protect the security of information you enter into this website, the publisher of this content does not allow it to be displayed in a frame."
<div class="fb-like-box" data-href="facebook.com/pages/Cohen-Nutrition/…; data-width="292" data-show-faces="true" data-stream="false" data-header="true"></div>
<iframe src="//www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Fwww.facebook.com%2??Fpages%2FCohen-Nutrition%2F153878864726298%3Fref%3Dtn_tnmn%23%21%2Fpages%2FCohen-Nutrition%2F153878864726298%3Fsk%3Dwall&width=292&height=290&colorsc??heme=light&show_faces=true&border_color&stream=false&header=true" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:292px; height:290px;" allowTransparency="true"></iframe>
I then put the code into my website widget and I get the same message mentioned above on my website where the Facebook like box should be.
Please help, I have no idea what to do and how to change this!
I ran into this problem as well. In my case, I was testing a static HTML page, and I was loading it in my browser with file://. I spent a while trying to figure this out, and before I uploaded my file, I tried deploying it as part of a service on http:// localhost (no space, that was just to let the post get through). Then it started working. I guess there's some logic that makes this fail when not behind a server. I hope this helps.
Try using HTML5 version of the code and follow the instructions. Also important is the APP ID.
<div id="fb-root"></div>
<script>(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 = "//connect.facebook.net/en_US/all.js#xfbml=1&appId=<YOUR_APP_ID>";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
<div class="fb-like-box" data-href="..." data-width="292" data-show-faces="true" data-stream="true" data-header="true"></div>
I just had a weird problem with a client's facebook page. The script didn't run and it didn't give any reasons. After looking in the my client's facebook page settings, I noticed he had an extra option saying "18+ yrs old" because he was selling massage oil. And because of that, the facebook box never shows on the website unless you're logged in and 18+.
Hope this can help you