We are using Iframe Type application in Facebook.
Curretnly we are using following Like Button code in our Iframe Canvas Page (Render page).
<iframe id="theiframe" src="http://www.facebook.com/plugins/like.php?href=http%3a%2f%2fwww.facebook.com%2fpages%2fRp9%2f151605171570927%3fsk%3dapp_196290923727494&layout=standard&show_faces=true&width=450&action=like&colorscheme=light&height=80" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:330px; height:26px; padding-top:5px; padding-left:5px;" allowTransparency="true"></iframe>
When a user will click on "Like" we want to reload page for "Liked" content.
But, we are not getting any event of Like Button when we are using code.
On following link http://developers.facebook.com/docs/reference/plugins/like/ details are given to track like button event. But that is with xFBML application.
We are using Iframe application. Regarding Iframe option there is not any details on above link.
Can anyone help us on this issue?
Thanks in advance,
Ashish Shukla
You can use javascript to listen the edge.create event which is triggered when someone clicks on a like button.
FB.Event.subscribe documentation : https://developers.facebook.com/docs/reference/javascript/FB.Event.subscribe/
I think it won't work with iframe button it will only work if the like button is created in xfbml or HTML5 like below :
<div class="fb-like" data-send="true" data-width="450" data-show-faces="true"></div>
Related
I got the code for the Facebook share button code right from facebook, it is as this:
<div class="fb-share-button" data-href="http://example.com/item/sharefb/47"></div>
While on a regular page, it works fine. It renders it assyncrhonously and for each item on the page working great.
But inside a fancybox ajax call, the button simply won't work. Facebook API will not process it, and the div will not turn into facebook's iframe full of stuff.
Any hints?
You need to parse the button after opening the box:
FB.XFBML.parse();
Source: https://developers.facebook.com/docs/reference/javascript/FB.XFBML.parse
I am having a problem getting a div containing facebook like/send buttons to expand when the buttons are clicked. I have searched and tried and tried to fix this, but I'm hitting a wall. I believe it has something to do with how the buttons render an iframe, but I'm not sure.
Here's the code, plain and simple (with an example link for og data).
<div id="fb_btns">
<fb:like href="http://www.imdb.com/title/tt0117500/" data-send="true" layout="button_count" width="450" show_faces="false" ></fb:like>
</div>
and the non-expanding div can be seen here
http://spadeballink.com/GALLOWS/TheGoddamnGallows.html
Any help counts! Thanks in advance!
*Also there is no css declaring the height of this div, the only heights declared are for html and body to be 100% (needed for the background image).
Are you using XFBML or Iframe version of like button? For Iframe version you need to use layout=standard for people to be able to see fly-out comment box.
I have tried all three different options facebook lets you use when embedding a facebook like button but when I like a page it appears to have added the +1 but when I refresh the page the 'like' doesn't stay. It also doesn't appear in my timeline.
<div class="sm-facebook">
<iframe scrolling="no" frameborder="0" allowtransparency="true" style="border:none; overflow:hidden; width:100px; height:21px;" src="//www.facebook.com/plugins/like.php?href=http://mysite.com/blog/blog-post&send=false&layout=button_count&width=100&show_faces=false&action=like&colorscheme=light&font&height=21&appId=277475035619415"></iframe>
</div>
http://mysite.com/blog/blog-post is an invalid URL. I get nothing. Try it for yourself at https://developers.facebook.com/tools/debug. It has 1 critical, 1 error and multiple warnings. Fix those up and it should work fine.
is it possible to create simple Like button for fan page? When I create official Like button, insert my fan page URL in form, it always generate button with image and page title as it is Like box not Like button. I just want simple Like button only with "Like" label and users count.
Is this an issue or default behavior, or just my misunderstanding?
Thanks for advice
Tomas Teicher
Did you mean you want this button?
http://developers.facebook.com/docs/reference/plugins/like
Alternatively, you may use AddThis widget - They even provide analytics for you.
http://www.addthis.com/
I use the widget on this website: http://muamalat.com.my/consumer-banking/financing/mortgage/
I must have misread your question. In that case I've only come across this: http://developers.facebook.com/docs/reference/plugins/like-box/
Uncheck show faces, stream and header; that's the cleanest you could get. Is this what you're looking for?
I don't think AddThis has that feature you speak of. :)
One way to only show the like button by itself is to hide the top part of the button by setting the iframe dimensions to the size of the button: 60x20.
<iframe src="http://www.facebook.com/plugins/like.php?&href=&send=false&layout=button_count&width=60&height=20&show_faces=false&action=like&colosheme=light"
allowtransparency="true" frameborder="0" scrolling="no"
style="width: 60px; height: 20px;">
</iframe>
If you are using Iframe you need to place an http or https: because >iframe starts as
<iframe src="//www.facebook.com/plugins/likebox.php?href= ................></iframe>
and you need to place
<iframe src="**http:**//www.facebook.com/plugins/likebox.php?href= ................></iframe>
The above answer did help me in finding that out.
If i read this correct, then it is definitely possible:
https://developers.facebook.com/docs/reference/plugins/like/
Put in your Page URL, for example: https://www.facebook.com/bladauhu
(that is my own page)
Uncheck Send Button, use Layout Style "button_count", uncheck Show Faces. Leave the rest as it is and click on the "Get code" button. Use the HTML5 or XFBML Version.
For me, this works just like every other Website and it shows the correct number of likes from the Facebook Page. No additional Images, just the plain and simple Like button.
Adding data-layout='button_count' to the HTML5 version worked for me:
<div class="fb-like" data-href="http://facebook.com/wewantoo" data-send="false" data-width="90" data-show-faces="false" data-layout='button_count'></div>
Why is the height of my Facebook Like button (technically the iframe that gets generated) always getting set to 80px? Example page is here: http://www.davidkasper.net/test.html I am using the javascript sdk and have had it work on other pages but for some reason the height will not change dynamically on this one! I can even do something like
<fb:like style="height:40px">
and that will indeed set the visible height, but the iframe will still be 80px, whereas I can see it changing in the demo at http://developers.facebook.com/docs/reference/plugins/like
The iframe being generated is allowing space for showing facebook profile pictures. Add the show-faces="false" attribute and it will collapse the height.
<fb:like show-faces="false"></fb:like>
I fix this problem with css
#fb-bar iframe{min-height:80px !important;}
where #fb-bar is wrapper for < fb:like >. In html
<div id="fb-bar">
<fb:like href="link"></fb:like>
</div>
I finally found the answer for this!!
The problem was having the wrong base domain set for the app that I specified in the FB.init javascript.
window.fbAsyncInit = function() {
FB.init({appId: '**131226520233112**', status: true, cookie: true,
xfbml: true});
};
(function() {
var e = document.createElement('script'); e.async = true;
e.src = document.location.protocol +
'//connect.facebook.net/en_US/all.js';
document.getElementById('fb-root').appendChild(e);
}());
See the difference between http://davidkasper.net/test.html vs http://davidkasper.net/test2.html
By the way I would never have discovered this without the URL Linter from Facebook http://developers.facebook.com/tools/lint/ Clearing all the errors it detected solved the problem!
David,
I was having the same problem too. I simply put the fb:like tag inside of a DIV with an ID of 'facebook-like'. Then I setup a CSS rule to limit the height and/or width of any iframe that exists in the 'facebook-like' DIV. Worked for me!
From the reference it says
The most important social plugin is
the Like button, which enables users
to post pages from your site back to
their Facebook profile with one click.
You can add a Like button to any page
with an iframe tag:
<iframe src="http://www.facebook.com/widgets/like.php?href=http://example.com"
scrolling="no" frameborder="0"
style="border:none; width:450px; height:80px"></iframe>
There are a number of options for the
Like button, including the option to
include the names and profile pictures
of the user's friends who have also
liked the page. Here is a like button
for the Facebook Developers site...
To me that indicates you should just use the iframe and set the width/height properties in the style tag...
<iframe src="http://www.facebook.com/widgets/like.php?href=http://example.com"
scrolling="no" frameborder="0"
style="border:none; width:300px; height:25px"></iframe>
Go to http://developers.facebook.com/docs/reference/plugins/like
Uncheck the 'Show Faces' checkbox. This will reduce the height to 35px.