This question already has answers here:
Closed 10 years ago.
Possible Duplicate:
Facebook Like Button - how to disable Comment pop up?
I have a Facebook Like button on my site like so:
<fb:like href="http://www.facebook.com/myurl" colorscheme="light" send="false" width="450" show_faces="false" font="" ref="top_like_button"></fb:like>
When the user clicks it, I need to refresh the page. I have seen various posts on how to do this using the 'edge.create' event, and it works fine.
But my problem is when they click Like, it shows a popup saying "Post to Facebook".
So I really need to refresh my page after they have closed the popup. Is this possible?
An alternative acceptable solution would be to disable the popup completely, so that when they click Like the popup doesn't appear.
Thanks
You can avoid this flyout being displayed by using iframe version of Like Button social plugin.
When will users have the option to add a comment to the like?
If you are using the XFBML version of the Like button, users will always have the option to add a comment. If you are using the Iframe version of the button, users will have the option to comments if you are using the 'standard' layout with a width of at least 400 pixels. If users do add a comment, the story published back to Facebook is given more prominence.
Beware, this will make impossible to subscribe to edge.create/egde.remove events.
Iframe it or simply have the like box in a tight div with overflow: hidden.
div#like_box {
height: 20px;
overflow: hidden;
padding: 0;
}
If you can't remove it; hide it! :)
Related
I want to hide the comment popup that comes up when a facebook like is done. I've tried with giving css
.-cx-PRIVATE-pluginCommentFlyout__fullButton {
display: none !important;
}
but that doesn't seems to work as the css is added dynamically through jquery I assume.
How can I hide this comment box?
The comment box do not appear anymore after clicking like button.
Go to Facebook Like Plugin
Enter details for your implementation of the Like button
Click on "Get Code" button
There are 4 sections you can choose from (HTML5, XFBML, IFRAME, URL),
choose IFRAME and copy the plugin code from IFRAME section.
Summary: Instead of copying the plugin code from HTML5 section copy
the one from IFRAME section.
This has already been answered in some other threads:
Facebook Like Button - how to disable Comment pop up box?
Facebook Like Button - how to disable Comment pop up?
Some answers might already be deprecated, but it´s worth a try. One solution that worked for me some months ago was to use the iframe-version and a width of less than 400px.
It seems that none of the older versions is working anylonger. That comment box always appears on my fb like buttons.
I've HTML5 version of facebook like button on my site since almost an year now but yesterday it stopped showing up.
Check it here: http://www.maximum-tech.net/intel-ivy-bridge-processors-coming-one-week-early-april-23-11577/
The one in the sidebar is the iframe version, its working but there should be a button next to the twitter and G+ button. Its not showing up.
I've posted a bug report on FB too: https://developers.facebook.com/bugs/380662258621504
It looks like you're missing the #fb-root div tag.
Add this to the top of your page, in the section:
<div id="fb-root"></div>
I have created a custom Facebook like button.
How do make it that when I click the button, it will trigger the like button provided by Facebook like the one below?
According to facebook policy on Social Plugins point 4 states:
"Don’t obscure or cover elements of social plugins."
You can't change the image directly because it's provided by Facebook.
The Facebook button is in an iFrame with a source that is on a different domain, Facebook’s domain, and so you can't change the button as it's protected by the same-origin policy.
Also, Facebook’s policy prohibits changing their buttons and logos when using embedded content from Facebook, like social buttons.
So, you're not suppose to be able to change the FB buttons, and even if you could it would be against the Facebook Terms of Service.
But... if you still want to do it, you can use the native Facebook button and lay your own image on top or below the Facebook button to fake a custom button.
Laying your image on top is only possible if you use CSS3 pointer-events, wich will make your image click-through and the click event will work "through" your image and actually click the Facebook button.
This only works in newer browsers that support Pointer Events.
Another option is to lay the image behind the FB button and set the FB button's opacity to zero.
I have used this several times myself, and with a little digging around in the Facebook code you can attach hover events and everything else to make it look like a custom button. You would have to find what elements to set opacity : 0 on.
Have never spent any time trying to figure out how to make the unlike function of the original button work on a custom button, but it's probably possible.
All my attempts to actually trigger the FB button with javascript or jQuery trigger() have failed, but maybe someone else has figured out how to do it?
When you create a html element with fb-like class, facebook javascript SDK convert it with a like button when document loaded. You can make a custom element and trigger click event of like button when user click your custom button.
For example :
<input type="button" id="mycustombutton" value="Like">
<div style="display:none" class="fb-like" data-send="false" data-layout="button_count" data-width="450" data-show-faces="false"></div>
jQuery code:
$("#mycustombutton").click(function(){
$(".fb-like").find("a.connect_widget_like_button").click();
// You can look elements in facebook like button with firebug or developer tools.
});
Update
Facebook SDK has been creating like button in an iframe and browsers not allowing to intervention to the iframe in the page. I think add event listener to element in iframe does not possible anymore.
This is not allowed for the obvious reason that it would lead to fraud. Imagine if each time you clicked an image on the web you don't know if it's an actual image or if it will result in a like and show up in your FB feed. It would be disastrous.
If you do want to do this legitimately, you will need to create an app and have the user authorise the app when he visits your site. This will open a popup where the user agreed to let the app access his FB account. Once that is done you can then send the like request on behalf of the user via a server-side script. In other words, it's not worth the effort.
If on the other hand you just want to get the like count for a page and display it however you want, you can do so via a request to "http://graph.facebook.com/#{url}" which will return a JSON payload with the number of likes. In jQuery it would be:
$.getJSON("http://graph.facebook.com/#{url}", function(data) { alert(data.shares); });
I think that facebook goes through great lengths to make sure people can't trigger the "Like" button. This is to prevent scripts from automatically clicking the "Like" button when someone visits the site.
You may be able to override the style of it using CSS and have your image show instead.
You can overlay your button on top of the Facebook like button and use css to hide the Facebook button.
Not sure on the legalities of this however.
You could try to trigger an Ajax request like this
FB.api(
'me/og.likes',
'post',
{
object: "http://samples.ogp.me/226075010839791"
},
function(response) {
// handle the response
}
);
https://developers.facebook.com/docs/reference/opengraph/action-type/og.likes
http://sharingbuttons.io/ allows to make social media share buttons with no javascript at all (Not a like button like in the question…). For Facebook, it just uses a link like this:
<a href="https://facebook.com/sharer/sharer.php?u=http%3A%2F%2Fsharingbuttons.io"
target="_blank" aria-label="Share on Facebook">Share on Facebook </a><br>Here on Stackoverflow, you have to cmd + click to open the link in a new window.
Customize it with your own CSS and, to mimic the share button, just open the url in a popup instead of a target="_blank".
I have generated facebook like code for the site Geoflake from this facebook url
http://developers.facebook.com/docs/reference/plugins/like/
When i click like in the "facebook test page", the count disappears.
Any one having same problem ?
While this isn't a strict answer, I can agree that there is a problem. What is the 'facebook test page.'
When I click on the 'like' button on the URL provided the usual 'share' prompt appears and quickly disappears. How did you generate the code? And, I know this is usually kind of offensive, but did you read through all of the instructions? From the end of that page
"When I click the Like button, the popup window (or "flyout") doesn't show. Why?
If the Like button is placed near the edge of an HTML element with the overflow property set to hidden, the flyout may be clipped or completely hidden when the button is clicked. This can be remedied by setting setting the overflow property to a value other than hidden, such as visible, scroll, or auto."
It looks like you are missing the quotes around the href attribute:
<fb:like href=http://geoflake.com/DLZ4d0b7a8 send="true" layout="button_count" width="50" show_faces="false"></fb:like>
Try fixing that first.
(Also, it seems like your site is redirecting to the mobile site on Safari -- at least on my Mac. Perhaps you are testing for generic Webkit instead of mobile webkit?)
I had two js scrips that are in my web page , one is with my app_id and another without app_id. I have removed one which doesn't have the app_id and it worked.
I added a like button in a facebook application (not iframe in order to capture the liked evenment...),
and when a user click on like, then he has the possibility to add a comment to the like.
I want to hide/remove this possibility to adda comment when he click on like.
Do you know if it's possible and how to do that?
Thanks
Set a fixed height and overflow hidden on the div that contains your like button so that it is hidden after the user clicks 'like'.
I added these CSS classes to my css file and it got rid of the comment box for me.
.fb_edge_widget_with_comment .fb_edge_comment_widget .fb_ltr {
display: none !important;
}