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.
Related
I am trying to count the clicks on the Facebook like button in a modal popup.
There seems to be a problem in this part of the code:
<div class="fb-like" data-href="https://www.facebook.com/smartmommypagina/" data-layout="box_count" data-action="like" data-size="large" data-show-faces="false" data-share="false" onClick="ga('send', 'event', { eventCategory: 'likebox', eventAction: 'click', eventLabel: 'like' });"></div>
Can anyone tell me what I am doing wrong? It has been hours already. Thanks.
That is what event subscriptions are for: https://developers.facebook.com/docs/reference/javascript/FB.Event.subscribe/
edge.create and edge.remove would be the events for the like button, there is example code in the docs.
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
When a user recommends my link (which has content, images, etc) it only displays the site name as the link with no text or images. How can I edit it so it does so?
My code is as follows;
<div id="fb-root"></div>
<script src="http://connect.facebook.net/en_US/all.js#appID=1234567890&xfbml=1"></script>
FB.Event.subscribe('edge.create', function(response) {
//replace the next line with calling your div
alert('Shared!');
});
</script>
<fb:like href="http://www.mysite.com/" send="false" width="450" show_faces="true" action="recommend" font=""></fb:like>
Add open graph meta tags to your page so it knows what to pull in.
https://developers.facebook.com/docs/opengraph/
On http://www.mysite.com/, add the og:image meta tag for an image and og:description to customize the text.
Docs:
https://developers.facebook.com/docs/opengraph/
There's a linter tool that checks whether you did it right:
http://developers.facebook.com/tools/debug
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
I am developing a Facebook iFrame application for an existing site. I load the web page using the <iframe> code. I also have a tab section, with tab-items Home, InviteFriends etc. But there is a lot of empty space between the tabs and the loaded web page.
This is my index.php file
<?php
require_once 'appinclude.php';
$user_id = $facebook->require_login();
?>
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:fb="http://www.facebook.com/2008/fbml">
<head></head>
<body>
<script src="http://static.ak.connect.facebook.com/js/api_lib/v0.4/FeatureLoader.js.php"
type="text/javascript"></script>
<div id="FB_HiddenIFrameContainer" style="display:none; position:absolute; left:-100px; top:-100px; width:0px; height: 0px;"></div>
<fb:serverfbml style="height:200px; width:760px;">
<script type="text/fbml">
<fb:fbml>
<fb:tabs>
<fb:tab-item href='http://my_site_ip/my_app_folder/' title='Home' selected='true' target="_TOP"/>
<fb:tab-item href='http://my_site_ip/my_app_folder/fav.php' title='My Favorites' target="_TOP"/>
<fb:tab-item href="http://my_site_ip/my_app_folder/invite.php" title="Invite Friends" target="_TOP"/>
</fb:tabs>
</fb:fbml>
</script>
</fb:serverfbml>
<?php echo '<iframe name="qantas" height="640px" width="740px" frameborder="0" resizeable="true" scrolling="no" style="border:none" src="my_url" target="_TOP"></iframe>';?>
<script type="text/javascript">
FB.init("my_api_key", "../channel/xd_receiver.htm");
FB_RequireFeatures(["CanvasUtil"], function(){
FB.XdComm.Server.init("../channel/xd_receiver.htm");
FB.CanvasClient.startTimerToSizeToContent();
});
</script>
</body>
</html>
And also when I click on the Invite Friends tab, I get a black box on my screen above the loaded web page in the place of the empty space. And if I click the black area, it navigates to the Invite page. How to remove this black box, and navigate directly to the invite page?
This is my invite.php file:
<?php
require_once 'appinclude.php';
$user_id = $facebook->require_login();
?>
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:fb="http://www.facebook.com/2008/fbml">
<head></head>
<body>
<script src="http://static.ak.connect.facebook.com/js/api_lib/v0.4/FeatureLoader.js.php"
type="text/javascript">
</script>
<fb:serverfbml style="width: 776px;">
<script type="text/fbml">
<fb:fbml>
<fb:tabs>
<fb:tab-item href='http://apps.facebook.com/my_canvas_url/' title='Home' selected='true' target="_TOP"/>
<fb:tab-item href='http://apps.facebook.com/my_canvas_url/fav.php' title='My Favorites' target="_TOP"/>
<fb:tab-item href="http://apps.facebook.com/my_canvas_url/invite.php" title="Invite Friends" target="_TOP"/>
</fb:tabs>
<fb:request-form action="http://my_localhost_ip/FacebookApp/"
method="POST"
invite="true"
type="myWEb"
target="_parent"
content="<fb:name uid='$user_id' useyou='false'></fb:name> is a member of myWeb.com and would like to share that experience with you.To register, simply click on the 'Register' button below.<fb:req-choice url='http://apps.facebook.com/my_canvas_url/index.php' label='Register'/>">
<fb:multi-friend-selector showborder="false" actiontext="Invite your Facebook Friends to use myWeb" />
</fb:request-form>
</fb:fbml>
</script>
</fb:serverfbml>
<script type="text/javascript">
FB.init("my_api_key", "../channel/xd_receiver.htm");
</script>
</body>
</html>
In an iframe application, I solved the black (or grey) layer problem by redirecting the client via javascript, using
window.top.location.replace("http://apps.facebook.com/canvas_url/page_with_dark_layer");
Seems the target attribute doesnt work with tab-items. So I used a combination of html and css as suggested by a member of Facebook developer forum. This is the link http://forum.developers.facebook.com/viewtopic.php?pid=121903 from where I got the code and changed my app accordingly. The person has given css code to make the link look like Facebook tabs. So anyone having problem with this grey box while using Tab items can make use of that code.