Facebook comment plugin - How can I hide fbConnectWidgetFooter - facebook

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.

Related

Re-rendering Facebook plugins using FB.XFBML.parse

Is there a way to use FB.XFBML.parse without rendering the a Facebook plugin again which cause it to "flicker" (disappear et reappear).
Will be using the Facebook Like button or Facebook Recommandations Bar.
Live example: http://www.gablabelle.com/eve-d
Slide to view the flickering in the lower right corner.
$.address.state(ajax_object.path).crawlable(true).value(whereiam);
$(".fb-recommendations-bar").data("href",whereiamurl);
//$(".fb-like").data("href",whereiamurl);
fburl = $(".fb-recommendations-bar").data("href");
//fburl = $(".fb-like").data("href");
console.log(fburl);
FB.XFBML.parse();
Many thanks for your help.
You can limit the scope of the re-parse by passing in the parent DOM element to FB.XFBML.parse.
Add an opacticy layer over the top of the facebook plugin div when a "page change" is needed. Animate it to fully opaque. Call the FB.XFBML.parse() and give it a few moments to re-render. Animate the layer to non-opaque, then remove the opacity layer from over the top of the facebook plugin div (or leave it there for the next time you need to do a "page change" without actually reloading the page.
This technique will give you a gracefully disappearing/reappearing plugin, rather than a jarringly harsh "flicker".
Cache the Facebook likes of the previous slide + current slide + next slide on a slide change event. So that when you go to the next or previous one and its Facebook like should already be ready/loaded, the user should not see a flickering. Unless he/she goes to fast with the slides.
I've had this recently.
I got around it by wrapping the XFMBL in a variable... don't know why but without it it seemed to flicker... a total hack of a way to stop the flickering but worked for me!!
if(call == 0){
FB.XFBML.parse();
call = 1;
}
DMCS provided what seems to be the only half-proper answer, but it's butt ugly. You don't know how long it'll take on each persons web browser to render the stuff. The callback which supposedly says it's rendered doesn't work either. Also the flicker isn't seen in firefox but only in google chrome.

Facebook like button flyout appears then disappears on a page with no other content

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.

Clean AddThis / Facebook Like / Recommend Button without Social Text?

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.

facebook comment plugin: remove like button

The FB: comment plugin comes with both a like button and comment box. Does anyone out there know how to remove the like button from the facebook comment plugin?
I got it working:
To remove (hide) the like-button that
comes above the comments-box To hide
the Like botton, you will need to add
2 attributes and create a CSS file.
1. simple="1"
2. css="http://yoursitedomainname.com/fb_comments.css"
<fb:comments expr:title='data:post.title'
expr:url='data:post.url'
expr:xid='data:post.id' simple='1'
css='http://yoursitedomainname.com/fb_comments.css'/>
in the css file add this style code:
div.like, div.like div {display:none;}
If you want you can just link to my
hide CSS file:
http://www.fileden.com/files/2006/10/3/258652/hidelike.css
Thanks to Gil Goldshlager, original post # forum.developers.facebook.net/viewtopic.php?id=58903
I've also searched for this answer but found nothing. I guess it's not possible for the moment. But if someone knows anything about this, I would also like to hear about it!
The answer from mctaco/Gil Goldshlager did not work for me. i assume, they only work with the old comments plugin. But i tried around with the tags and this one was working for me, to remove the like button:
<div class="fb-comments" data-href="{{ request.build_absolute_uri }}"></div>
This code comes from django. if you are using another server side language, then you have to replace {{ request.build_absolute_uri }} with the absolute uri from the page, where you want to have the comments plugin installed.
If you omit the data-href attribute, the like button is displayed.

Disabling visible links in UIWebView

I have a number of web views in my app in which I need to be careful about allowing further HTML links.
I disallow links in the delegate method shouldStartLoadWithRequest. This works fine, except for one thing. In the web view, the links are still highlighted in blue. So the user naturally thinks they are active links, but when selected, I disallow the link from the delegate method. This leads to confusion for the user.
Is there a way for me to disable the link color, so text does not show as blue when it contains a link within a UIWebView?
Try injecting Javascript into the UIWebView to change the appearance of the links.
Removing the href from all anchors should clear the formatting.
Here's some Javascript to get you started if you need it:
for(a in document.getElementsByTagName("a")) { a.href= ""; }
This will do it:
self.webView.dataDetectorTypes = UIDataDetectorTypeNone;
For swift 3:
Try removing the types you don't want to show as link from webView.dataDetectorTypes
webView.dataDetectorTypes.remove(UIDataDetectorTypes.all)