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/
Related
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...
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.
I am trying to find a way to embed a share/+1 link for Google+ in a Newsletter, much like the Facebook share and tweeter tweet links can be embedded in a newsletter, which can be achieved with the following two urls:
https://www.facebook.com/sharer.php?u=[URL]&t=[TEXT]
http://twitter.com/intent/tweet?source=sharethiscom&text=[TEXT]&url=[URL]
Is there a similar functionality available for Google Plus?
All I could find on my own, is the Google+ button, which unfortunately uses JavaScript and thus it cannot be used in an email newsletter. I would expect Google to provide a static url fallback, but I cannot find it anywhere.
https://plus.google.com/share?url=http%3A%2F%2Fexample.com
You can share the link on Google+ with the official Google+ share link.
Replace the url parameter with the URL encoded link you want to share.
This one works fine for me :
https://plus.google.com/share?url=your-page-url
The share link allows you to do this. It will work in an email, but it's not quite the same as the +1 button.
To use the share link, add a link element to your email that complies with the Google+ Buttons policy. Set the href attribute to https://plus.google.com/share?url={url encoded share target}
For example, linking to https://plus.google.com/share?url=http%3A%2F%2Fexample.com will allow you to share example.com on Google+: (yes, that is a working demo).
Check out the official docs for more info.
If you use this approach please be aware of the fact that it is not a direct replacement for the +1 button. The link shares the target URL on Google+, but it does not actually +1 the target page. Only the +1 button can +1 a page.
Solution for those who needs custom title, description and image. You should make following changes to target URL:
Step1. add itemscope itemtype="http://schema.org/LocalBusiness" into <html> tag. It will look like <html itemscope itemtype="http://schema.org/LocalBusiness">. More itemtypes here
Step2. Place the follwing meta tags into <head>, change content attributes according your needs:
<meta itemprop="name" content="{Custom title goes here}">
<meta itemprop="description" content="{Custom description goes here}">
<meta itemprop="image" content="{http://www.your_url.com/your_image.png}">
Step3. Add the following link to your newsletter or anywhere you want:
Share it
Tip. To check how google sees your page, you can use this tool http://www.google.com/webmasters/tools/richsnippets. Probably you'll be interested in section Extracted rich snippet data from the page
Good luck, Lauris
I'm using the following.. :)
https://m.google.com/app/plus/x/?v=compose&content=[TEXT]%20[URL]
I personally suggest Google Plus Interactive Posts button
https://developers.google.com/+/web/share/interactive
to use in your apps/websites.Here Google Plus allows many customizations to do according to the requirement. I have used it in my app. Its a better option than Share button.
Maybe this helps. It works (partially) for me.
http://www.stateofsearch.com/share-on-google-plus-any-website/
There has got to be a way to do this by hacking the +1 script.
If you are interested in just changing the apperance you should download and modify this to suit your requirements.
Then, add this to your css:
.Uu .KF {
background: url("your-replacement-image") no-repeat scroll -132px -21px transparent !important;
}
to override the Google icons. However, this is probably very unstable and subject to change.
I have an FBML page tab that has the old fb:comments.
Now I'm trying to build an iframe to replace it.
So I added to my html code this lines:
<div id="fb-root"></div><script src="https://connect.facebook.net/en_US/all.js#xfbml=1"></script>
<fb:comments xid="271917093633" migrated="1">
</fb:comments>
The result are that fb comments box appear, but all of the old comments are gone!
what should I do?
does someone managed to migrate his old comments from fbml to iframe?
Thank you
there is no way to retained the comments if you are doing the migration explicitly.
try to specify the href, instead of xid next time when u create a comments box
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>