I'm trying to properly align the Facebook like button's comment popup. I'm using box count layout so that I can align all the Facebook/Twitter/Google+/Whatever buttons on the right side.
Here is my actual page layout. It looks like I want.
But once I click the Like button, the comment popup appears anchored from the left and is out of the window. Bummer.
What I want is simply have the popup anchored from the right instead of the left
I tried all versions of the button. IFRAME version does not show the comment box but can't be properly aligned. HTML5 and XFBML are properly aligned but they both show the popup out of the window.
I don't see any parameter in Facebook's documentation to adjust the alignment of the comment popup or to force the comment popup to be opened in a real browser popup. BTW, this can't be adjusted by CSS since the damn popup is inside a damn IFRAME, even when I'm using HTML5 and XFBML markup.
Is there a clean way to:
Anchor this popup to the right
Open the popup in an actual browser popup (window.open())
Hide the popup
Is there a way to achieve that? Google +1 button does the job perfectly without needing to add a lot of code.
Of course, the easy solution would be to move my buttons on the left side but it sucks.
Any help will be appreciated. Thanks :)
Try this
<center>
<div id="fb-root"></div><script src="http://connect.facebook.net/en_US/all.js#xfbml=1">
</script><iframe src="//www.facebook.com/plugins/like.php?href=https%3A%2F%2Fwww.facebook.com%2FID_HERE&layout=standard&show_faces=false&colorscheme=light&width=50&height=80" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:50px; height:30px;" allowtransparency="false"></iframe>
Replace ID_HERE with your page id
I have a page hosted on, say, www.domainX.com. In my page there is an iframe, src attribute of which is set to www.domainY.com (so it's on another domain). There are some links on the page served from www.domainY.com (so they show up in the iframe). When I click one of these links there happens the navigation inside the iframe. Now, when I move the cursor on iframe, right-click and select 'Back' on the appearing menu, it makes a back in the inner iframe. If I do the same thing again, it does a back on the main window, as if I pressed the back button of the browser (or I right-clicked out of the iframe and selected 'Back').
My problem is: I am OK with back navigations in the iframe, but I do not want them to bubble up to the main window. I can alter the source code of the page on www.domainX.com, but I don't have access to the source code of the page on www.domainY.com . I tried attaching an 'onback' handler on the iframe element, which stops the event propagation; but it did not work. Any pointers will be appreciated.
Thanks
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 a problem with the flyout generated by the Facebook Send button. After clicking the "Send" button the flyout is generated and displayed behind some elements. Obscuring the buttons in the flyout.
I read that this is because of a parent element with the overflow:hidden style. However, I cannot remove this attribute since it will mess up the rest of my sites layout.
I tried to dynamically remove the overflow:hidden attribute upon clicking the Send button (Accepting the layout mess if someone actually uses the send button). Using the following code:
FB.Event.subscribe("message.send", function(response) { //Remove the
overflow:hidden styling here });
Unfortunately this event only fires upon actually sending the flyout form, which is too late as need to take action as soon as the button is pressed that shows the flyout.
Could anyone tell me how to bind an onclick event to the "Send" button or how to reposition the flyout completely. Or perhaps there is an alternate solution I have not yet considered.
Thanks in advance
Fixed position might work for some, but for most it will mess up your layout.
What worked for me is to take off any overflow: auto higher up in your CSS.
I did that and it works great!
Here is my problem:
I have successfully included the Facebook Like button on my test page. There are several items per page and there is a facebook like button per item. I am using the XFBML version.
Everything runs fine if the buttons are present in the page on load. However, Now I want to show the buttons per item only on mouseover on the container element having the item and the button.So, the fblike button html is hidden on page load and I added some code like this to show them on mouse-hover:
$(content).mouseenter(function(){
$(this).find('.fblike').show(); // toggle the display of the button
FB.XFBML.parse( this ); //re-parse xfbml
});
The button shows up perfectly on mouse-hover on the container now but never works. Clicking the button doesn't do anything.
Has anyone run across this problem before ?
EDIT:
.fblike is a class on a div containing the fb:like tag.
Re-parsing is required because on page-load, each div with the class .fblike is hidden. The Facebook JavaScript SDK doesn't parse the xfbml tags inside elements which are hidden.
I think you problem is in this variable scope. Try this:
FB.XFBML.parse($(this));
Because you don't need this (anonymous function being called) but element (on which this anonymous function was called).