How to insert multiple Facebook comment boxes on one page? - facebook

I am looking for a way to integrate several Facebook Comment Boxes on one page, but with different comments. i have an image grid view and inserted in the lightbox overlays the code from the Facebook comment box generator. With an random number at the end of the URL i tried to fix it, but there comes the error:
Warning: https://URL/#2087943573 can not be opened.
Any ideas?

You just have to add an anchor to the absolute URL, like it is explained in another thread:
Multiple facebook comment boxes on a single page?
You can even test this in the plugin generator:
https://developers.facebook.com/docs/reference/plugins/comments/
...try changing "http://example.com" to "http://example.com#test" and you will see that some other people already commented on that one too.
edit: After a small chat, we found out that the problem might be with the https. So, maybe it just doesn´t work with SSL, i´ve also tried with another server and it only works with the http link.

Try to make "fake" pages for each article that you have with GET variable. For the example:
example.com?fb_share=article1, example.com?fb_share=article2, etc.
Then here you must put the URL:
<div class="fb-comments" data-href="http://example.com?fb_share=article1" data-numposts="5" data-colorscheme="light"></div>
and
<div class="fb-comments" data-href="http://example.com?fb_share=article2" data-numposts="5" data-colorscheme="light"></div>
You don't need to use these pages, but you need it because when someone commenting, the FB comment will be posted on the wall with backlink to your article and for data-href attribute.

By doing these code, it works for my site. Using $_SESSION while looping and echoing data from MySQL database.
<div id= "area_post">
<?php
$query= mysql_query("select * from promo_diskon");
$url_id=0;
while($data= mysql_fetch_assoc($query)){
$textpromo = nl2br($data['deskripsi']);
$_SESSION["url_id"]="http://localhost/xampp/kerjapraktik/promo_diskon.php?posting=".$url_id."";
echo
"<div id='posting'>
<div id='layer'><div class='judul'>".$data['judul']."</div><div class='tanggal'>".$data['tanggal']."</div>
<br/ ><br /><p id= 'deskripsi1' class='deskripsi1'>".$textpromo."</p></div>
<a href=''><img class= 'img-thumbnail' src= ".$data['url_foto']." width= '440px' alt=''></a>
</div>";
//echo '<div class="fb-comments" data-href="http://localhost/xampp/kerjapraktik/promo_diskon.php?posting="'.$url_id.'"" data-width="956" data-numposts="5" data-colorscheme="dark"></div>';
echo '<div class="fb-comments" data-href="'.$_SESSION["url_id"].'" data-width="956" data-numposts="5" data-colorscheme="dark"></div>';
$url_id++;
}
?>
</div>

Related

Facebook Comments: get all comments URL under a domain?

I'm trying to figure out how to get all the fb-comments URLs registered/created under a domain.
imagine various developers create new comments urls (relative to individual topics):
div class="fb-comments" data-href="http://www.example.com/kb1001" ...
div class="fb-comments" data-href="http://www.example.com/kb321" ...
div class="fb-comments" data-href="http://www.example.com/faq/001"
...
div class="fb-comments" data-href="http://www.example.com/faq/002" ...
div class="fb-comments" data-href="http://www.example.com/about" ...
I wish to allow authors to create these without "governance", but want to have visibility of all URLs created.
Note: I'm looking for the URLs, not the comments or whatever, as I can get that via other api services
This is not possible in the API. There is no such documentation either.

How to use facebook share plugin using bootstrap button?

I am trying to use facebook share button to my wordpress theme. I have use this code for that
<div class="fb-share-button btn btn-default" data-href="<?php the_permalink(); ?>" data-type="button_count"></div>
It is showing the share button. You can check the result here http://www.racecarwow.com/crazy-crash-v2-0/ . But my goal is , the share button will be look like the share button of this site http://blog.petflow.com/bravo-heroic-little-girl-saves-a-trapped-puppys-life/ .
I think, http://lipis.github.io/bootstrap-social/ will be a good solution for me. But i could not understand how can i use <div class="fb-share-button btn btn-default" data-href="<?php the_permalink(); ?>" data-type="button_count"></div> to that button. Please help me.
Yes ! i have got the solution by combining following the two site
http://ostr.io/code/html-social-like-share-buttons-no-javascript.html
http://lipis.github.io/bootstrap-social/
Hope it will be helpful for other person.
Well, it appears, that you have a slight mistake in your code, there is no function like the_parmalink() in Wordpress so far, but the correct one is the_permalink().
This function retrieves the permanent link to the post currently being processed in The Loop (as you can guess from it's name).
This tag must be within The Loop, and is generally used to display the permanent link for each post, when the posts are being displayed. Since this template tag is limited to displaying the permalink for the post that is being processed, you cannot use it to display the permalink to an arbitrary post on your web site.
Refer to get_permalink() if you want to get the permanent link for a post, given its unique post id.
So fix your code and try again:
<div class="fb-share-button btn btn-default" data-href="<?php the_permalink();?>" data-type="button_count"></div>

I want to display a FB comment box on every page but have their own comments specific to that page

I recently coded my own blog for a site im making. I want to use facebook to handle the comment on posts, so i integrated the plugin. I noticed something odd however. If i comment on one blog post, then go to a different one, my comment is on the other blog posts as well. How do i make it so each post has its own set of comments?
You have to set a different data-href attribute for each post. Here's an example of how I do it in Yii:
<div class="fb-comments" data-href="http://domain.com/post/view/<? echo $model->id; ?>" data-num-posts="4" data-width="695"></div>
The point is the data-href value has to be unique for each post.
Assuming you are using html5 comments box.
Refer to: https://developers.facebook.com/docs/reference/plugins/comments/
data-href="" // data href sets the url "object id" for the box, you need to use a dynamic system with php, or javascript or what ever language you coded in.
<div style="padding-left:5px; min-height:500px" class="fb-comments" data-href="'+newUrl+'" data-num-posts="20" data-width="380"></div>
"i use" EXAMPLE:
the following examples works for pages with dynamic urls
example.com?id=thisid&thisarticle=article-name
<div id="thecomments"></div>
<script>
function changeCommentsUrl(newUrl){
// should refresh fb comments plugin for the "newUrl" variable
document.getElementById('thecomments').innerHTML='';
parser=document.getElementById('thecomments');
parser.innerHTML='<div style="padding-left:5px; min-height:500px" class="fb-comments" data-href="'+newUrl+'" data-num-posts="20" data-width="380"></div>';
FB.XFBML.parse(parser);
}
var thisurl = document.write(document.URL);
changeCommentsUrl(thisurl);
</script>
You could simply place that kind of snippet in your footer :
<script>
$(".fb-comments").attr("data-href", window.location.href);
</script>
It does the job...

Facebook comment box with data-href using anchor issue

Currently I have 3 comment boxes on a single page. The page has three tabs that display different content, and each tab content has its own comment section, differing from the other two.
To make sure unique comments are loading for each tab, I am currently using something similar to:
<div class="fb-comments" data-href="http://webpage.com/index.html#tab1"
data-num-posts="2" data-width="470"></div>
<div class="fb-comments" data-href="http://webpage.com/index.html#tab2" ...
<div class="fb-comments" data-href="http://webpage.com/index.html#tab3" ...
This works in displaying the relevant content. However, when someone replies to one of these comments, the original commentor receives a link on their fb profile that appears as:
http://webpage.com/index.html?fb_comment_id=fbc_26547577547547_477747457_3745757457435737#4574575475
The problem is that this link the user is given does not show the relevant comment thread, or even the anchor based data-href comment box. Perhaps the end anchor is tripping up the display? If so, is there a paradigm for having different facebook comment boxes on a single page?
Thanks for any help solving this annoying issue.
I implemented something similar using this code
<div class="fb-comments" data-href="http://stabmail.com/study-groups-tutoring/#comm-enl" data-width="880" data-num-posts="20"></div>
<div class="fb-comments" data-href="http://stabmail.com/study-groups-tutoring/#comm-esl" data-width="880" data-num-posts="20"></div>
<div class="fb-comments" data-href="http://stabmail.com/study-groups-tutoring/#psyc" data-width="880" data-num-posts="20"></div>
Perhaps your issue could be solved by simply removing 'index.html', as Facebook would then treat the '#tab' as the page, and not a link to a different part of the page
My solution can be seen working here http://stabmail.com/study-groups-tutoring/

How to link facebook comments widget to the current url?

I've got a bit of a problem with facebook comments box on my website. I can't figue out a way for it to link the comments to the url they are on. For example a fb comment to Post 1 on my site is shared between all of my post wich can be a bit misleading for the users. I post about hundred posts a day (pics mainly), there's no way I can make a new box for each and every one of them.
Here's the piece of code that's troubling me:
<div class="fb-comments" data-href="funshit.ru" data-num-posts="5" data-width="530" data-colorscheme="dark"></div>
If only there was a way to make it link to the current url the problem'd be solved.
Any help is appreciated m8s.
Because the CMS I was coding in didn't reliably return the current URL and leaving it blank or omitting it failed, I wrote the div tag in Javascript:
<script>
document.write("<div class='fb-comments' data-href='" + window.location.href + "' data-num-posts='2' data-width='400'></div>");
</script>
Of course, this will include the data in the query string but you should be able to exclude that if that's what you want.
You can omit data-href (or leave it blank) so current URL will be used.
Update:
As of Sep 2012 the method above is working only for first version of the Facebook Comments box.
To use newer version of Comments social plugin you will need to specify current URL explicitly.
This one seems to be foolproof and vastly simple:
// In the next line, you must grab the parent element of the div with class fb-comments.
var oComments = document.querySelector("#CONTAINER-OF-COMMENTS-BOX");
oComments.innerHTML = '<div class="fb-comments" data-href="http://www.whatever.com/" data-num-posts="NUMBER OF POSTS TO SHOW" data-width="WIDTH OF CONTENT"></div>';
FB.XFBML.parse(oComments);
You can alternatively select the parent element with jQuery like so:
var oComments = $(".fb-comments").parent().get(0);
Make sure to alter the data-href attribute of the fb-comments div to change the URL for which the comments are about. You should also adjust data-num-posts for the number of posts to show and data-width for the width of the content. That ought to do it!
Use check below script, which is working for me.
<script type='text/javascript'>
var postUrl = '<data:post.url/>';
document.write("<div class="fb-like" data-href='" + postUrl + "' data-layout="standard" data-action="recommend" data-show-faces="true" data-share="true"></div>");
</script>
Its give link of each post accordingly.
I am a blogger, I Used below script in my blog, which is working for me.
<script type='text/javascript'>
var postUrl = '<data:post.url/>';
document.write("<div class="fb-like" data-href='" + postUrl + "' data-layout="standard" data-action="recommend" data-show-faces="true" data-share="true"></div>");
</script>
Its give link of each post accordingly. It might help full for you also.