How come the Share and Like button have the same count?
I just implemented the Like button today and should only have around 2-3 likes.
You can see my problem here: http://www.norwegianfashion.no/news/ofw-forbids-fur-on-the-catwalk/
The code I use is this:
<div class="share">
<div class="face_share">
<a name="fb_share" type="button_count" href="http://www.facebook.com/sharer.php">Share</a><script src="http://static.ak.fbcdn.net/connect.php/js/FB.Share" type="text/javascript"></script>
</div>
<div class="face_like">
<iframe src="http://www.facebook.com/plugins/like.php?href=<?php echo urlencode(get_permalink($post->ID)); ?>&layout=button_count&show_faces=false&width=130&action=like&colorscheme=light&font=arial" scrolling="no" frameborder="0" allowTransparency="true" style="border:none; overflow:hidden; width:130px; height:20px;"></iframe>
</div>
<div class="twitter">
Tweet<script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script>
</div>
</div>
Both functions are doing the same thing now:
Share is still an option, however we merged the external count so that
the count represents total
interactions with the URL.
Additionally, ‘like’ still gives you the ability to publish an image
when a comment is added (through the
XFBML version).
Source.
Related
I'm adding social buttons for every post link in a web site where some post links are shown at once.
The problem is that sometimes some buttons are not shown and keep waiting for a response. I've tried with some browsers and computers and it's happening sometimes with any of them.
I'm adding the buttons like this:
<div class="social">
<div class="twitter">
Twittear
</div> 
<div class="facebook"><iframe src="http://www.facebook.com/plugins/like.php?href=<?php the_permalink() ?>&layout=box_count&action=like&colorscheme=light&locale=es_ES" scrolling="no" frameborder="0" style="height:62px; width:74px" allowtransparency="true"></iframe></div>
<g:plusone size="tall" href="<?php the_permalink() ?>"></g:plusone>
</div>
This is the web page: http://nosabesnada.com/ultimas-noticias/
Any idea of why it is sometimes happening and how to solve it?
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 wanted to make a facebook app with an image which has 2 buttons and under the image there would be a video from youtube. But since coding is new to me I need your help. I tried different codes but none of them worked. the video is not appearing at all.
And heres the final code I came up with:
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:fb="http://www.facebook.com /2008/fbml">
<script type="text/javascript">
function framesetsize(w,h){
var obj = new Object;
obj.width=w;
obj.height=h;
FB.Canvas.setSize(obj);
}
</script>
</head>
<body onload="framesetsize(520,3300)"> <!--specify the height and width for resize-->
<div id="fb-root">
<div align="center"><img src="http://fb.joma-sport.hu/jomafiuk4.jpg" width="520" height="390" border="0" usemap="#Map" /></p>
<map name="Map" id="Map">
<area shape="rect" coords="133,74,246,335" href="2.htm" target="_self" alt="Total fit" />
<area shape="rect" coords="248,43,414,339" href="3.htm" target="_self" alt="Aluminio" />
</map></div>
</div>
<iframe title="YouTube video player" width="650" height="390" src="http://www.youtube.com/watch?v=wUaxZLJ0-28" frameborder="0" allowfullscreen></iframe>
</div
</div>
<!--this div is required by the Javascript SDK--><script type="text/javascript" src="http://connect.facebook.net/en_US/all.js"></script>
<script type="text/javascript">
swfobject.registerObject("FlashID");
</script>
</body>
</html>
<body>
</body>
</html>
Any help would be appreciated!!!!
12minutes later.....BAAAAAH got the answer..Thanks anyway.. :)
The solution:
On youtube click the Share button (which is under your video), than click the Embed button. After that you'll get the code which you write in your HTML. I also checked Use old embed code, and I used that code in my HTML. Sorry if this wasn't clear. My first language is not English..but I hope I could help/
I would like to integrate FB Fan-Box on my website. Everything works fine, except the height is not correct. For me, the important thing is not displaying the faces, but the stream. When I adjust the height parameter the whole frame gets bigger, but the layer with the stream in it remains still 300px. How can I set this to 900px, since I would like my visitors to see more activities on the stream?!
Here is my code:
<iframe
src="http://www.facebook.com/plugins/likebox.php?href=http%3A%2F
%2Fwww.facebook.com%2Fapps%2Fapplication.php%3Fid%3D200876329955648&width=800&
amp;colorscheme=light&show_faces=false&border_color&stream=true&
amp;header=false&height=900"
scrolling="no"
frameborder="0"
style="border:none; overflow:hidden; width:800px; height:900px;"
allowTransparency="true"></iframe>
Thanks for the help!!!!
Try the HTML5 version, it may work better:
<div
class="fb-like-box"
data-href="http://www.facebook.com/platform"
data-width="292"
data-height="900"
data-show-faces="false"
data-stream="true"
data-header="false">
</div>
I've verified that it will go to 900 in height showing more stream items.
No it is not for my HTML 5 tag with 2000px
<div class="fb-like-box"
data-width="1100"
data-height="2000"
Facebook generate iframe height correctly, but inside the iframe
it explicitly set div to 300px... This is a very annoying bug
<iframe name="f36c389328" width="1100px" height="2000px"
<html>
..
<div class="phm pluginLikeboxStream" style="height: 300px"> <---
What is a point of having it configurable if it is defaulted to 300px on FB side?
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