Does anyone know how to change the image for the facebook like button?
I'm using the XFBML version.
<script src="http://connect.facebook.net/en_US/all.js#xfbml=1"></script>
<fb:like-box href="http://www.facebook.com/Platform" width="292" show_faces="false" stream="false" header="true">
</fb:like-box>
You simply can't (or not allowed to!). Read this answer.
Also check the Facebook Usage Guidelines, under the Facebook Like Button section (Usage tab):
While you may scale the size to suit your needs, you may not modify the
Like Button in any other way (such as
by changing the design).
I know its an old question, but you can do it if you like. Use the iframe inside a div or span tag, then put a backgroung image in the tag and make the iframe "opacity: 0", so, you can click the button, but you don´t see it. Here´s an example:
Like Button with custom image
Actually you can legally change the like button as long as you don't disguise it as something else, as confirmed by this forum post.
However how to do it is a bit more tricky.
Here's an example on how change it (the iframe version doesn't work on i.e.):
http://www.esrun.co.uk/blog/disguising-a-facebook-like-link/
Related
I implemented html5 version of the like button on the header of my page.
once i navigate to another page and press the back button on the browser the FB button renders the iframe the size of 1000px * 1000px and masks the page content.
any solutions for this ? is this a known issue?
I can confirm this is happening for myself as well across multiple sites.
Facebook is aware of the issue which may take some time to fix according to https://developers.facebook.com/x/bugs/663421210369743/
In the short-term, many other developers seems to be suggesting to target the iframe specifically through css (or timeout javascript call) to force the height back to about 20px.
When using css, ensure you use !important to override the style attribute that ends up on the iframe from facebook.
I know this is an old post but it's still happening.
Add this inline to the code facebook gives you:
data-height="30px" data-width="130px"
And this to the CSS
.fb-like {
width: 130px !important;
}
Of course, you can change the width to whatever you want.
So your code should look like this (where XX is replaced with your parameters):
<div class="fb-like" data-href="XX" data-send="XX" data-layout="XX" data-show-faces="XX" data-height="30px" data-width="130px">
This is only a temporary solution until it is fixed as the facebook button disappears after a minute or so.
Probably not the best solution out there but adding the following css could work for now:
.fb-like iframe {
width: 500px!important;
height: 50px!important;
}
For me this is happening when the facebook like button is wrapped in "position relative" element with "z-index" higher then the content wrapper.
Check the position and the z-index of your elements.
I need to build a tab looking like this one:
https://www.facebook.com/auto.co.il/app_134594493332806
I know how to add an image and a comment box and i know of several "plain" ways to hide the content from non-fans, but i came across the above tab and i really like the way it shows thee content yet you cant engage it until you press the like button.
Any help please?
Thanks in advance.
Oren
Your link didn't work for me, but you can place a absolutely positioned div with a high z-index above the rest of your content to prevent the user from clicking on anything.
Update: Now that the link has been updated I see that they are doing exactly what I described above. In chrome if you right-click the background and select "inspect element" you will see the following computed style for the div:
rgba(0,0,0,0.796);
display:block;
height:1612px;
width:810px;
The content is blacked out simply with a div with a black background and some opacity. Just for fun, you can overcome their like gate (without liking) via chrome's JS console by selecting the iframe context and then entering the following:
$('.like_float_c').detach();
... now call youself a 'hacker' ;)
I'd like to disable the tumblr Photoset-function. That means I just want to have one picture on my tumblr-site instead of the "Layout" which is provided by Tumblr. But when the picture is clicked the Lightbox would still open. Thank you.
You can disable the normal photoset function by using the {block:Photos} {/block:Photos} block, which renders individually for each image in the set. It is also possible to select a single picture (plenty of themes do it), but I have no idea how you do it (I'm no developer, but I'll wager Javascript or undocumented code is involved), much less whether you can trigger the full lightbox without ever displaying the other images directly.
I'm interested if anyone knows how to alter a FB like button that's created with a code like
<fb:like href="ttt" send="false" width="450" show_faces="true" font=""></fb:like>
that STILL SHOWS FACES, but can move it's actual literals elsewhere (like more the "reccomend to your friends" to left or right etc.
Has anyone so far been able to manipulate these things, the row breaks, the side of the string, etc?
This relates to this question: facebook like box stream height
In short: No, you cannot style social plugins because they are contained in an iframe when rendered. See the above answer for more details. Sorry.
I'm having a problem with the height of the Facebook Like button. I use the XFBML version with this tag
<fb:like layout="standard" show_faces="true" width="440" action="recommend" colorscheme="light"></fb:like>
On some sites, the height of the iframe which contains the button is dynamic. It has the height of 61px, when there are "faces" to display and 23px when there are no faces to display. This changes dynamcally when the user presses the like button (and a his face appears undes the button).
Examples of sites where this works:
hobby.idnes.cz/v-boji-s-mokrou-travou-vitezi-vretenove-sekani-nad-rotacnimi-sekackami-13j-/hobby-zahrada.asp?c=A100604_134111_hobby-zahrada_bma
Facebook Like Button demo page - http://developers.facebook.com/docs/reference/plugins/like
Unfortunately, when I try to insert the tag into my page, the height of the iframe is set to 80px and it doesn't change.
My current solution is to set the height of the box to 23px and set the overflow CSS property of its container to hidden. But with this solution I lose the ability to show faces.
This problem is already posted here on Stack Overflow, but with no solution. - stackoverflow.com/questions/2777196/facebook-like-button-fblike-height-always-80px
I've spent about 6 hours trying to figure this problem out. But I still think there must be a simple solution for this.
Thanks for any suggestions.
If you don't want to show faces, and keep the static 23px height, you can set the show_faces parameter on the XFBML fb:like tag to false. If you DO want to show faces, I'd wrap the <fb:like> tag in a container div and set it's height to 61px. This should allow whatever content is around the like button to stay in place, and the content of the iframe/like button change as faces are added/removed.