I'm creating a blog on Blogger and I would like to include a Facebook Like button in the right column (width:280px). I'm using Blogger's HTML/JavaScript gadget. I got the HTML5 code which displays the button properly.
<div class="fb-like" data-href="http://myblogaddress.blogspot.com" data-send="false" data-layout="box_count" data-width="60" data-show-faces="true"></div>
When I click on it a popup shows up with option to add a comment but it disappears almost immediately. I figured out that this behavior is caused by overlapping with the < div > edge. I have tried to set various parameters which I thought might resolve the issue but it didn't work.
<div style="position:relative;overflow:auto;z-index:1;" class="fb-like" data-href="http://myblogaddress.blogspot.com" data-send="false" data-layout="box_count" data-width="60" data-show-faces="true"></div>
When I was searching for a solution I came across this blog which also has the Facebook Like button in the right pane and it works like a charm, the popup window overlaps the edge and displays on top of everything else. Do you know how to achieve this behavior?
I had the same issue but I realized it was a Chrome issue. IE and Firefox was working fine. Maybe check your Settings -> Advanced Settings > Privacy -> Content Settings -> Popups to ensure that Chrome doesn't prohibit the popup.
I know it is an old post but I'll just leave an answer anyway :) I had the same issue and when trying to open the link in IE I get this error: "href+is+not+properly+formatted#" so I fixed my Url and now it works.
I was having the same problem.
Turns out facebook closes the popup when there are mistakes in your opengraph declarations on the shared URL
in my case,
og:image lacked the domainname
cheers!
Related
On the « Like Button » developer page, i can only get code for these 4 combinations :
1) like
2) recommend
3) like + share
4) recommend + share
source : https://developers.facebook.com/docs/plugins/like-button
I just want to have a share button. Is it possible ?
I've tried this but it does'nt work of course :
<div class="fb-like" data-layout="button" data-action="share" data-show-faces="false" data-share="false">
I’ve seen in the past that share button was deprecated but it seems that i can still use it :
https://developers.facebook.com/docs/plugins/share-button
But the design of the share button seems to be old and not up to date.
so, we are in 2014 july.
Is it possible to have a share button with the same design of the like button ?
I know this type of question have been posted on stackoverflow but facebook API is constantly changing so we need a recent answer.
One solution would be to use the Share Dialog of the JavaScript SDK with a custom Share Button: https://developers.facebook.com/docs/sharing/reference/share-dialog
You can use any Button/Image you want for that.
You could also try changing the layout parameter, it looks like the default is "icon". Try with "button" instead.
Edit: I just tried changing the layout parameter, it is definitely the problem. The default is not "button_count" as mentioned in the docs, it is "icon".
Here´s a working example with "button" as layout:
<div class="fb-share-button" data-href="https://xxx" data-type="button"></div>
I´ve filed a bug for this on Facebook.
I have added a facebook like button to my page, however when it is clicked the flyout appears, and then disappears.
At first I thought it was other elements on the page hiding it, but the problem persisted even on blank pages.
Tried both the iframe and html 5 codes that were generated by facebook and neither seems to work.
iframe - http://jsfiddle.net/aDK95/1/
Html 5 - http://jsfiddle.net/L9nZZ/1/
In both cases it seems to been hidden by the hidden_elem class:
#facebook .hidden_elem {
display: none !important;
}
It seems very similar to this bug reported at FB that was reported in May. However there doesn't seem to be much movement on it.
Has anyone else come across this? Know of any work arounds?
I came across this bug and it flummoxed me for quite a while. The steps I took to rectify it are as follows:
Ensure that you have put in the Javascript SDK initialization
Make sure that the #fbroot div is not inside a hidden div
In the Open Graph tags on the page, the og:url has to be set to a https protocol
and not a http protocol
Run your page through the Facebook Debugger at https://developers.facebook.com/tools/debug to check for any errors. Another interesting point which helped me resolve this was that when you put in your "URL to Like" value in the Like configurator, the dynamic like button generated shows whether that url would work well or not.
I encountered a problem on facebook where my like button does not appear sometimes and in iframe the chance that it won't appear is higher.
Well, I just added the script for fb like using xfbml declared xmlns:fb="http://ogp.me/ns/fb# part and etc. Then used this code for my like button:
<fb:like href="MY_URL_HERE_1" send="false" layout="button_count" show_faces="true"></fb:like>
and then I used the same code with different a URL for another like button 4 times. My other work works fine which has only one button, but on the page where I used 5 like buttons the problem then happens.
Anyone knows how to solve this?
You should try to use the like code you can find here: https://developers.facebook.com/docs/reference/plugins/like/
Or you can try this: http://forum.developers.facebook.net/viewtopic.php?pid=354148#p354148
Has anyone seen this before. It works perfectly in Chrome, Safari, FF etc. It's like it's a background image that does not recognise the constraints of it's containing div. I put the div around it to constrain it but no difference.
http://nicerworld.com/static/images/ie_error.png
<div style="width:200px;height:25px;"><fb:login-button registration-url="http://nicerworld.com/fb_reg_step_1/" on-login="fb_login(arguments);">{% trans "login with Facebook" %}</fb></div>
I hate IE so much it's not funny!
Hope one of you can stop me doing something silly!
The </fb> on the end was the problem. It should have been </fb:login-button>!!
It worked in all other browsers. As usual, MS cost me loads of time.
Rich
I've been desperately seeking a way to disable the facebook social text right next to the "Recommend" button. Is it possible, to simply render a "Recommend" button, without anything else (no counter, no text, JUST the button)?
The problem is, CSS wont be applied since all the elements are inside the iframe, so I cant just hide the element itself using CSS (which in this case would be a td).
Also, I cant just put everything in a div and give it overflow:hidden and a fix width, since the pop up which appears when actually clicking the "Recommend" Button would then not be fully visible.
My current implementation comes via AddThis:
<a class="addthis_button_facebook_like" fb:like:size="small" fb:like:layout="none" fb:like:action="recommend" fb:like:width="10"></a>
Any ideas?
Thanks
Alex
Facebook polcy IV 4 d:
You must not obscure or cover elements of our social plugins, such as the Like button or Like box plugin.
So if you can't do it by using their like button creation tool you shouldn't do it.
Using the Add This Facebook Like button you can avoid the count using this attribute
fb:like:layout="button"
So in your case you would have
<a class="addthis_button_facebook_like" fb:like:size="small" fb:like:layout="button" fb:like:action="recommend" ></a>
"Recommend" with a counter comes closest to your request. I too don't like the social text (e.g. "57 people like this. Be the first of your friends"), yet I do like the naked counter. The code that I use is:
<a class="addthis_button_facebook_like" fb:like:layout="button_count" fb:like:action="recommend" fb:like:width="135"></a>
See AddThis own documentation here.