My comments FB thingo on this page: http://www.kashgar.com.au/articles/RSVP-Sydney-Event-Showcase-Exhibition is showing as the dark style. But my tag doesn't have the style in there as dark, so I don't know why this is happening.
I've tried colorscheme="light" and this does nothing.
Any ideas? I've also tried making the background white of the fb::comments. Still no help there.
What am i doing wrong here?
<fb:comments href="http://www.kashgar.com.au/articles/RSVP-Sydney-Event-Showcase-Exhibition" num_posts="5" width="630"></fb:comments>
Try colorscheme='dark' which means FB will operate against a dark background. If you don't specify a colorscheme, then the default is 'light' which is the scheme used on your site.
I know you're already aware of it but it bears repeating that you can use the facebook configurator on FB to help with stylistic and other choices:
https://developers.facebook.com/docs/reference/plugins/comments/
Related
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!
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.
Is there a way to hide fbConnectWidgetFooter, that text Facebook social plugin + icon, from the bottom.
If you see their example https://developers.facebook.com/docs/reference/plugins/comments/ there is also class hidden_elem and hides it, but in my site it is visible.
Any ideas ? How can I add class hidden_elem ?
This can be done with a CSS override normally:
.fb_iframe_widget{overflow: hidden;}
.fb_ltr{margin-bottom: -20px;} (or -35px, depends)
But keep in mind you're violating Facebook's legal rules and apparently they DO check on this. I've read about people getting in trouble with FB Legal.
i have some styling on the more button http://www.mw-app.cp.thedms.co.uk/thedms.aspx?dms=106 ( http://bit.ly/ArzcYi for faster typing) here, on all browsers and phones it looks how i want.
However on the iPhone its still seems to be pulling default styles (which are internalally set up styles) through and looks like this http://i.imgur.com/Piv3E.jpg and for the life of my i cant figure out why it is overwriting. Hope someone can shed some light on it.
Thanks in advance
You will need this is your CSS for the button.
-webkit-appearance: none;
Think vitamin has a great article on this topic. Cheers
http://thinkvitamin.com/design/styling-submit-buttons-for-mobile-safari/
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.