I want to stop the comment box from appearing when a user likes something on my page.
Is this possible?
I'm using
<div id="fb-root">
</div>
<script src="http://connect.facebook.net/en_US/all.js#appId=153692861385098&xfbml=1">
</script>
<fb:like href='http://www.domain.com/path/to/page.html'
send="true" layout="button_count" width="0" show_faces="false" font="">
</fb:like>
I've been trying to do the same. It's not pefect, but the only way I've found to work thus far is to use the following CSS:
.fb_edge_widget_with_comment span.fb_edge_comment_widget iframe.fb_ltr {
display: none !important;
}
Credit: https://stackoverflow.com/a/4871240/601299
Related
I am well aware that there are almost 10 duplicates of this question. But solutions of none of them work for me. So here are the details:
I am using carousel from bootstrap. I use carousel to display set of 3 divs on each cycle.
The structure is as follows:
<div id="myCarousel" class="carousel slide">
<div class="carousel-inner">
<div class="active item">
<div class="span4>content along with FB like button </div>
<div class="span4>content along with FB like button </div>
<div class="span4>content along with FB like button </div>
</div>
<div class="item"> <!-- this div has display:none -->
<div class="span4>content along with FB like button </div>
<div class="span4>content along with FB like button </div>
<div class="span4>content along with FB like button </div>
</div>
</div>
<a class="carousel-control left" href="#myCarousel" data-slide="prev">‹</a>
<a class="carousel-control right" href="#myCarousel" data-slide="next">›</a>
</div>
Above is the stripped down version, just to leave out the unnecessary stuff. The problem is, all the Facebook like buttons inside the div which has display:none set have width and height set to 0.
This problem occurs in Firefox(the latest version).
I am using the HTML5 version of like button generated using FB like button configurator.
Below is the resultant like button code in the hidden div:
<div data-show-faces="true" data-width="450" layout="box_count" data-send="false" class="fb-like fb_edge_widget_with_comment fb_iframe_widget" fb-xfbml-state="rendered">
<span style="height: 0px; width: 0px;">
<iframe scrolling="no" style=" height: 0px; width: 0px; class="fb_ltr fb_iframe_widget_lift" src="">
</iframe>
</span>
</div>
The like buttons in the active divs are the only ones visible. Even those in the modals (which are hidden initially) are not visible too.
How do I make it visible when div has display:none?
I had the exact same issue you are having and my code solution is below. The key thing to note is that anytime you see the facebook generated code having a height and width of 0 it means that the facebook button is loaded while the CSS on it is display:none. You can't just force it to be displayed because it is possible that the facebook button hasn't fully loaded by the time the bootstrap carousel has loaded. The trick is to display all your items in the carousel using active on the initial load then once your facebook buttons have loaded you can remove active from your non-starting slide.
<div id="myCarousel" class="carousel slide">
<div class="carousel-inner">
<div class="active item">
<div class="span4>content along with FB like button </div>
<div class="span4>content along with FB like button </div>
<div class="span4>content along with FB like button </div>
</div>
<div class="active item"> <!-- this div also is active for initial load -->
<div class="span4>content along with FB like button </div>
<div class="span4>content along with FB like button </div>
<div class="span4>content along with FB like button </div>
</div>
</div>
<a class="carousel-control left" href="#myCarousel" data-slide="prev">‹</a>
<a class="carousel-control right" href="#myCarousel" data-slide="next">›</a>
</div>
window.fbAsyncInit = function () {
FB.Event.subscribe('xfbml.render', function () {
$('.carousel-inner>.item:not(:first-child)').removeClass('active');
});}
If you set a div to display:none; by default all of the child objects will have display:none which means they wont show up. Same if you set the size to zero.
IMHO it's not the right way to do it, but try setting the child object to display: block; or display: inline; and giving it a defined size.
Put iframe version of Like button in any hidden content and it will work.
worked for me like a charm
I had similar issue but only in IE. I saw that iframe width and height stayed 0. This solved my problem:
.fb-like.fb_iframe_widget iframe{
width:60px !important;
height:60px !important;
}
I have one page with multiple news items. Every item in the list must have own facebook Like button with count.
Is it possible to put multiple Like buttons with count for each news on same page?
Each like button code will have to have it's own unique url.
refer to: http://developers.facebook.com/docs/reference/plugins/like/
I use php to achieve this, by pulling all relative urls needed from a
database, looping them and writing return to the data-href param in
the html5 like button code.
You can manually set these links or set up a dynamic system as i did.
html5 button code.
<div class="fb-like" data-href="'.$thepage[link1].'" data-send="false" data-layout="button_count" data-width="90" data-show-faces="false" data-font="tahoma" style="margin-left: auto; margin-right: auto; text-align: center;"></div>
<div class="fb-like" data-href="'.$thepage[link2].'" data-send="false" data-layout="button_count" data-width="90" data-show-faces="false" data-font="tahoma" style="margin-left: auto; margin-right: auto; text-align: center;"></div>
<div class="fb-like" data-href="'.$thepage[link3].'" data-send="false" data-layout="button_count" data-width="90" data-show-faces="false" data-font="tahoma" style="margin-left: auto; margin-right: auto; text-align: center;"></div>
xfbml button
<fb:like href="http://anotherfeed.com?link=1" send="true" width="450" show_faces="true"></fb:like>
<fb:like href="http://anotherfeed.com?link=2" send="true" width="450" show_faces="true"></fb:like>
<fb:like href="http://anotherfeed.com?link=3" send="true" width="450" show_faces="true"></fb:like>
I want to place a Facebook recommend button on my website. If the user recommends my site, I'd like to show a div with a thank you message. How can I tell if they have clicked the recommend button and that they have actually recommended it on their Facebook wall?
Is there any similar example?
You can use the FB.Event.subscribe event to do this. This event is only called if the recommend action was successful.
<body>
<div id="fb-root"></div>
<script src="http://connect.facebook.net/en_US/all.js#xfbml=1"></script>
FB.Event.subscribe('edge.create', function(response) {
//replace the next line with calling your div
alert('edge.create fired!');
});
</script>
<fb:like href="" send="false" width="450" show_faces="true" action="recommend" font=""></fb:like>
</body>
To create a Facebook recommend Button:
<div class="fb-like"
data-href="http://www.dealdimer.com/"
data-send="true" data-width="450" data-show-faces="true" data-font="verdana"
data-colorscheme="dark" data-action="recommend"></div>
Change "http://www.dealdimer.com" to your Link.
I don't usually deal in exclamation points, but I have hours before this goes live. I have the following page full of FBML for a Facebook tab on a product page:
<fb:fbml version="1.1">
<div id="container" style="width: 520px;">
<fb:visible-to-connection>
<div>
Yay!
<a href="{link}" style="border: 0; display:inline-block;">
<img src="{image link}" style="border: none;" />
</a>
</div>
<fb:else>
<div>
<img src="{image link}" style="border: none;" />
</div>
</fb:else>
</fb:visible-to-connection>
<div class="{a css class I have to censor}">
<img src="{image link}" />
<p class="nopurchase" style="font-family: 'Trebuchet MS Gothic', Arial; font-size: 10px;">
some text.
Click for something.</p>
</div>
</div>
</fb:fbml>
Basically it's a fan gate. To get past it the user has to like the page it resides on. It parses and renders, but for whatever reason both conditions (the div for fans, and the one for non-fans) are drawn. I have no idea why fb:visible-to-connection isn't doing this.
The answer is simple. If you are an admin of the application you are using, visible-to-connection will show you everything, regardless whether you're a fan or not. Normal users will see the expected functionality.
Yep, if you are an admin you get the trap all the time. If you go to the page with an account that is not an admin you can like the page and then see the content as expected. Thanks
Go to ACCOUNT on the top right of your screen
Click USE FACEBOOK AS PAGE
Select another page, then check your functionality - this should work
Is there a way to add an iframe to a facebook page without having to do the onClick functionality?
Right now I am using this code and it works fine except you have to click the link to make it show the iframe?
<!-- Start iframe CODE -->
Like me to show the iFrame link!
<fb:visible-to-connection>
<a onClick="outside_location.setInnerFBML(link_1);" style="cursor: pointer;">Click here to show the iFrame!</a>
</fb:visible-to-connection>
<div id="outside_location"></div>
<fb:js-string var="link_1">
<fb:iframe height="500" allowTransparency="true" frameborder="0" scrolling="no" style="width:100%; height: 1400px; border:none" src="http://apps.ignitesocialmedia.com/php/facebook/sandbox/tabs/iframe.php"></fb:iframe>
</fb:js-string>
<script type="text/javascript" charset="utf-8">
var outside_location = document.getElementById('outside_location');
</script>
<!-- End iframe CODE -->
It seems as though this has been done in a couple places but I cannot figure it out.
http://forum.developers.facebook.net/viewtopic.php?pid=262170#p262170