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>
Related
I always find concrete examples help the most... so here's an example URL:
http://www.humanreligions.info/humanism.html
The comments and like button work as expected. But if I user has clicked on this link to get the the page, or if they click on one of the menu items and then happen to refresh the page, the browser URL is:
http://www.humanreligions.info/humanism.html#Organisations
and none of the likes and comments from the base page show up. Because of the anchor, FB is treating it as a whole new page, which is not what an anchor means nor what I want it to do.
Questions/answers on this (I've been searching for a while, sure that others must have stumbled across this simple bug!) all seem to be where people do want the # to mean something special. This was asked a year ago here facebook comment count url with an '#' anchor tag? but there are no answers,
Here are relevent code snippets from the page:
LIKE BUTTON CODE (simplified):
<iframe src="http://www.facebook.com/plugins/like.php?href=http%3A%2F%2Fwww.humanreligions.info%2Fhumanism.html"></iframe>
COMMENTS:
<div id="fb-root"></div><fb:comments href="http://www.humanreligions.info/humanism.html"></fb:comments>
MISC:
<meta property="og:url" content="http://www.humanreligions.info/humanism.html">
What else does it require to make FB treat one page as one page regardless of (irrevelent) internal anchors?
I know that I'm really late with this, but you can add a the data-href attribute to the facebook like button when you are using the XMLNS version of it, which I can see is being used from the comments section. So for your example you would put:
<fb:like layout="box_count" action="like" show_faces="true" share="true" data-href="http://www.humanreligions.info/humanism.html"></fb:like>
If you want to embed youtube dynamically then it is totally easy. You just replace the video id in the embed code.
<iframe width="420" height="315" src="http://www.youtube.com/embed/<?=$youtubeid;?>" frameborder="0" allowfullscreen></iframe>
I'm struggling to do the same thing with soundcloud. Is it possible? - the embed code is as follows:
<iframe src="http://w.soundcloud.com/player/?url=http%3A%2F%2Fapi.soundcloud.com%2Ftracks%2F57162664&show_artwork=true"></iframe>
It seems to me like you'd need to know this api code to embed the track, and so you'd have to look this up each time.
The 'api code' is just tracks/ followed by the track id (or groups/ with a group id, etc), not too different from YouTube, it's just not as easily accessible as YouTube's, since the id isn't in the URL. You can get the id from looking at the share code on a track, but even easier is to use the oembed service to get the full embedding HTML needed (it also calculates the proper height of the iframe to include), and it only requires the 'permalink' url which you see on a track page.
An updated version of the widget coming in the next few weeks should also support the permalink urls out-of-the-box.
Looks like you have to use the API to dynamically get the embed code:
Here's the documentation:
http://developers.soundcloud.com/docs#playing
I implemented facebook comments across a legacy, custom CMS. I used the XFBML implementation. Everything works as expected except when clicking the links back to the article page from a commenter's facebook feed the comment box does not show any comments. The link is of this form:
{Article URL}?fb_comment_id={comment_id_string}
And if I remove the comment parameter and only go to the article url the comment box renders correctly with the comment and all other comments on the article. So, it's some issue with the fb_comment_id parameter. One weird thing about how I had to implement the comments is, because of how the routing on the site works, I could not use server side code to set the the URL parameter in the <fb:comments> object. So I had to use this jquery code in the <head>:
<script>
// assign current page to comments url
$(document).ready(function() {
$('fb\\:comments').each(function(){
$(this).attr('href', window.location);
});
});
</script>
And used this for the actual <fb:comments> code:
<fb:comments href="{site's root URL}" num_posts="8" width="570"></fb:comments>
So, I figure doing this client side may be causing the issue. Not doing this server side is a hard constraint though, and everything else works so I'm hopeful there may be some way to make this work. If making the comment link work correctly is impossible, a reasonable hack would be to rewrite the link in the facebook feed so that it just points to the article url without adding the comment parameter. Any suggestions? Thanks!
NOTE: I've also tried using the html5 comments implementation and there is the same issue.;
Once facebook has rendered the iframe based upon your fb:comments tag, does it have the correct url? I am thinking it does not. You may have to call FB.XFBML.parse() after you inject the complete
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.
Till yesterday everything was working fine.
In my website's head there was
<script src="http://static.ak.fbcdn.net/connect.php/js/FB.Share" type="text/javascript"></script>
and links like
<a name="fb_share" share_url="http://mysite.com/url"></a>
were transformed to facebook share plugins.
But now there is a problem - i can't see count of shares in plugin. I sniffed requests a little and the error is:
fb_sharepro_render({"error_code":104,"error_msg":"Requires valid signature","request_args":[{"key":"v","value":"1.0"}
I did not change anything on website and problem still occurs. Any hints?
Edit (probably an answer):
This bug is described here: http://bugs.developers.facebook.net/show_bug.cgi?id=19471
Facebook team response:
Thanks for the report. We are looking into this.
We recommend to use the like button instead as we are going to deprecate the
share button soon. The like button provides you with the same functionality and
more ...
http://developers.facebook.com/docs/reference/plugins/like/
Also, works solution with request to http://graph.facebook.com/?ids=*.
For example, while issue is not fixed by facebook, you can use a little modified facebook share widget script, it use a graph.facebook.com instead of api.facebook.com/restserver.php.
You have to introduce access_token also as a parameter. Find what facebook says
GET /fql?q=SELECT+uid2+FROM+friend+WHERE+uid1=me()&access_token=...