I am trying to integrate facebook comments into my website (I tried to do it several months ago but there didn't seem much support about and I couldn't fathom it). The comments are showing and I managed to get the comment to show on my facebook wall under the individual post/item they were meant for but unfortunately it is posting the same comment under every post. You can see the box working here: http://www.roomfor5.co.uk/item/6726
The website is php based and the code I am using is: " title="" url="" width="600" publish="true" >
I have also used this code without success: " width="600" publish="true" >
I know it's something to do with the xid attribute but I am stumped as to why it is duplicating:(
Hi when looking at the view source of your page I see this:
<fb:comments
xid="http://www.roomfor5.co.uk-<?=str_replace('/','-',$_SERVER['REQUEST_URI']);?>"
num_posts="2"
width="600"
publish="true" >
</fb:comments>
So the fb:comments tag is not getting rendered out fully.
Also on the rendered page, it says you haven't specified the url. while there is a malformed xid= attribute, you really should have a url= attribute. See https://developers.facebook.com/docs/reference/plugins/comments/
Warning: this comments plugin is operating in
compatibility mode, but has no posts yet.
Consider specifying an explicit 'href' as
suggested in the comments plugin documentation
to take advantage of all plugin features.
EDIT:
For http://www.roomfor5.co.uk/item/6726, you have
<div
class="fb-comments"
data-href="http://www.roomfor5.co.uk"
data-num-posts="5"
data-width="600">
</div>
The data-href attribute should be http://www.roomfor5.co.uk/item/6726 not http://www.roomfor5.co.uk
If you click 'View source' you'll see the rendered HTML:
<fb:comments xid="http://www.roomfor5.co.uk-<?=str_replace('/','-',$_SERVER['REQUEST_URI']);?>" num_posts="2" width="600" publish="true" >
It looks like you're trying to specify a unique xid for the page but the server-side script is behaving like plain text.
Related
I am trying to create a Facebook share option for my blog articles, and it works but it doesn't take the article text or image, but the first image and text on the (single page) website. How can I change my share code so that it will use the article's image and text from where I click the FB share button?
This is the template for the blog article, with the FB share code included:
<div class="contentLeft">
<div class="roundimage">
<a href="[[+roundImage:phpthumbof=`h=750&zc=1`]]" class="colorbox" title="[[+roundImageCaption]]"><img class="round"
src="[[+roundImage:phpthumbof=`w=170&h=170&zc=1&q=95`]]" alt="[[+roundImageCaption]]" /></a>
</div>
<script type="text/javascript">function fbs_click() {u=location.href;t=document.title;window.open('http://www.facebook.com/sharer.php?u='+encodeURIComponent(u)+'&t='+encodeURIComponent(t),'sharer','toolbar=0,status=0,width=626,height=436');return false;}</script>
<h4 class="blue" style="margin-bottom:10px; margin-top:0;">[[+articleHeadline]]</h4>
<p class="datetext">[[+datetimeText]]</p>
<p class="readmoretext">[[+articleText]]</p>
<div class="divider"></div>
</div>
I hope you can help! Thank you!
It should be enough to make sure that the article page, ie the link that you are sharing, embeds the correct og:image and og:description. You only share the link with the share button, and facebook will embed the link and look in it for the proper data.
Update:
I guess you're not using the articles package to create the blog? If you are you already have individual pages even if you're not using them =) If you're not i assume you're using some sort of resource loop to create your entries.
After looking around in the facebook docs it seems you can specify the image (https://developers.facebook.com/docs/opengraph/using-actions/v2.0#params) when creating your share button using the javascript sdk (https://developers.facebook.com/docs/sharing/reference/share-dialog). Each article will need to call something like this instead of the current javascript share url functionality.
FB.ui({
method: 'share_open_graph',
action_type: 'og.likes',
action_properties: JSON.stringify({
image: "YourImageForThisRespectiveShare",
})
}, function(response){});
If you prefer to explore the method i mentioned in the comments it would go something like this:
Look in your code at u=location.href;, you'd want to try modifying that to u=location.href+'?articleid=[~[*id*]~]';. When you share you should hopefully see the appended article ID for each article.
You'll then need to make sure you can specify og:image and description for each article, i assume you somehow have resources set up that represent each article, in that case just create a couple of template variables for that resource type.
In your header you could then use the getResourceField package for example to retrieve the correct TV from the correct resource, as specified by the ?articleid= parameter in your URL.
To retrieve the parameter you'll need a simple snippet like return (!empty($_GET['articleid']) ? $_GET['articleid'] : $default);. Lets name the snippet: "getArticleId". I left the option to decide a default image when there is no &articleid specified.
You're using modx evolution from the look of your [~[*id*]~] tag, but there should be some equivalent of the getResourceField package for evolution. This is the revolution version of the code needed:
<meta property="og:image" content="[[!getResourceField?
&id=`[[!getArticleId? &default=`[[*id]]`]]` //Take the blog page's own image as a default
&field=`imageTV` //you'll of course have to change "imageTV" to whatever you call it
&isTV=`1`
]]" />
Repeat for og:title and og:description, with their respective TV names.
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...
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/
I am using the facebook comment plugin on my site.
<div id="fb-root"></div><script src="http://connect.facebook.net/en_US/all.js#xfbml=1"></script><fb:comments style="background-color:#131514;" href="http://kablammo.com.au/news_article.php?&newsID='.$i.'" num_posts="3" width="500" ></fb:comments>
I saw in a post that you could effect the backgound colour by putting in:
style="background-color:#131514;"
However to get it to work you have to remove the colourscheme colorscheme="dark" and in doing so the comment text returns to black.
How can I change the comment text colour?
I tried putting in color:#FFF but no such luck.
Thanks Guys.
You need to create an external stylesheet and reference that in your <fb:comments> call.
Eg: <fb:comments numposts="4" title="My Blog Comments" css="http://www.yourwebsite.com/css/comments.css?1234" simple="1"></fb:comments>
Please read the following for reference:
Official Facebook docs: https://developers.facebook.com/docs/reference/fbml/comments_(XFBML)/
Tutorial on how to target elements in the Facebook comment box: http://www.daddydesign.com/wordpress/how-to-customize-the-facebook-comments-social-plugin-on-a-static-fbml-tab/
Is it possible to implement the Facebook like and share functionality for "liking" the comments of other users on a website? Does every comment has to have a permalink?
I have asked the question on Facebook developers forum, and they have come back to me with this response. Basically, the functionality that is required is not available.
http://forum.developers.facebook.net/viewtopic.php?pid=316205#p316205
Intro:
You will need individual like buttons for every comment, and as #Fnatte says you can then reference them to the comment by giving it an ID like #com1,#com2etc...
The best way to achieve this is through a for loop (I imagine you are pulling from a DB) that will iterate through and add the relevant code for the like button and implement the URL based on the comment it is pulling,
The Code:
You have 2 options, <iframe>:
<iframe src="http://www.facebook.com/plugins/like.php?href=http%3A%2F%2Fexample.com%2Fpage%2Fto%2Flike&layout=button_count&show_faces=false&width=90&action=like&font=segoe+ui&colorscheme=dark&height=21" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:90px; height:21px;" allowTransparency="true"></iframe>
This is VERY slow, especially if you have a lot of comments loading at the same time, it does mean you don't need to import their JS library though,
Then there is the FB JS SDK:
<script src="http://connect.facebook.net/en_US/all.js#xfbml=1"></script><fb:like href="http://example.com" layout="button_count" show_faces="false" width="90" font="segoe ui" colorscheme="dark"></fb:like>
This I would argue is a more eficcient way of doing things, but it does require a bit more time and effort - but will be well worth it.
The script of course can be imported only once in the head and then used multiple times throughout the page (perfect for what you need).
The URL to like is based on both the URL in the address bar and the ID that you have assigned to the code (e.g. #comment1) so the URL you are liking looks like this: http://mypage.com/page#comment1
Further Reading:
http://developers.facebook.com/docs/reference/plugins/like/
http://developers.facebook.com/docs/reference/javascript/
http://developers.facebook.com/docs/plugins/
Good luck and I hope this helps!
DEMO & SOURCE http://so.devilmaycode.it/facebook-like-button-on-comments/
updated, hope this help
I have never done it myself but you should probably check out http://developers.facebook.com/docs/guides/web#plugins.
It looks like you would need a unique link for each comment.
You could try including a fragment identifier in every URL like:
http://domain.com/article1#comment1
http://domain.com/article1#comment2
Facebook has rolled out a new version of the comments plugin which supports advanced functionality such as "liking" and replying to other comments. In addition, replies to a comment made on Facebook.com are now pushed back to the comments plugin (hosted on another site.)
How to enable:
Add the migrated attribute:
<fb:comments xid="YOUR_XID" migrated="1"></fb:comments>
OR use the href attribute instead of xid for future comments boxes
<fb:comments href="YOUR_CANONICAL_URL"></fb:comments>
References:
New <fb:comments>
Legacy <fb:comments>