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
Related
I'm trying to debug/troubleshoot why the content that is displayed in the share link/window continues to show our browser detection content which we do not want displayed. I've updated our code to detect the Facebook crawler and not show this content if it's detected but the share link is still showing this. I've even tried to use the Facebook debugger to refresh the cache but it is still not working.
The share button code I'm using is this:
<div class="fb-like"
data-href="https://www-dev.hoopladigital.com/title/11042831"
data-layout="button_count"
data-colorscheme="dark"
data-action="like"
data-show-faces="true"
data-share="true"></div>
So either the cache is not being cleared, or my browser detection code is still getting executed when it shouldn't be. The text pointed to in the arrow in this screenshot should not be getting displayed.
How do I go about troubleshooting this?
http://note.io/LvbN5K
Your og:description is empty, so most likely Facebook takes the first text content that looks relevant to it … so provide a description!
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>
The code I use to render share button is:
<a name="fb_share" share_url="http://www.XYZ.com" type="button_count"></a>
<script src="http://static.ak.fbcdn.net/connect.php/js/FB.Share"
type="text/javascript">
</script>
The above code exists in the page and works fine and when users clicks a button, that action will add the above code (with a different url) to the dom and My goal is to render another facebook button with count. However the problem is that the FB.Share js seems to somehow know it has already did the job and will not render again.
After poking around with the FB.Share script a bit I found this methoe FB.Share.renderAll() can force a re-render but without count numbers.
Anyone has any insights? Thanks!
try calling the JavaScript SDK's FB.XFBML.parse();
See: http://developers.facebook.com/docs/reference/javascript/FB.XFBML.parse/
When you re-add facebook share script, it renders again the share button.
for example: $.getScript("http://static.ak.fbcdn.net/connect.php/js/FB.Share");
Situation: I have a page with an iframe, which contains a form. But the iframe is longer than a screen page and the user has to scroll down to submit it. But it loads just the contents of the iframe, so it'll be scrolled by the same amount before submitting the page. I want to be at the top of the page. But since the user scrolled the facebook page and not the iframe, I cannot use scrollTo (not allowed for cross domain iframes).
Question: Is it possible submit the form to facebook to reload the entire page and still gives me access to the form data?
Not completely sure if this is what you're asking, but if it's an iframe app you can use FB.Canvas.scrollTo to control the main Facebook page position. You can either call it selectively or you can put code like this in the <head> section of every page:
<script src="http://connect.facebook.net/en_US/all.js"></script>
<script type='text/javascript'>
window.onload=function() { FB.Canvas.scrollTo(0,0); }
</script>
That way every time you load a new page in your iframe, the main page will return to the top.
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>