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
Related
I have put a Facebook likebox and a Twitter feed into my Meteor app's homepage. The first time you navigate there, it works fine. But if you leave the page (while staying on the site), and then return, they are blank. This happens on multiple browsers and on Mac and PC.
I am using Iron Router, and Twitter template code like this:
<template name="twitter_feed">
<div class="news-box">
<a class="twitter-timeline" href="..." data-widget-id="..."></a>
</div>
</template>
with javascript:
Template.twitter_feed.rendered = function () {
!function(d,s,id){
var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';
if(!d.getElementById(id)){
js=d.createElement(s);js.id=id;
js.src=p+"://platform.twitter.com/widgets.js";
fjs.parentNode.insertBefore(js,fjs);
}
}(document,"script","twitter-wjs");
}
(It's the same if I put the javascript into the template directly using <script>.)
How can I fix this? Here's the site if it helps: Signup Zone.
Thanks!
This is a problem for site that loads content in AJAX.
You need to manually force those widgets to re-parse the page. One workaround could be using jQuery to regenerate the Facebook likebox and Twitter feed each time content changes. Another hack would be setTimeout as follow:
Template.home.rendered = function() {
setTimeout(function() {
twttr.widgets.load(this.firstNode);;
FB.XFBML.parse(this.firstNode);
}, 0);
}
Reference:
https://twittercommunity.com/t/cannot-update-tweet-button-with-ajax/16989
https://developers.facebook.com/docs/reference/javascript/FB.XFBML.parse/
Here's a solution that doesn't need any scripting.
Use the iframe version of the Facebook likebox code.
For Twitter, there is no iframe version. But we can make one by putting its anchor <a> tag in its own html document, and then including an iframe to that.
Eg. for my Meteor app, I have put this twitter.html into public:
<html>
<head>
<meta charset="utf-8">
<title>Twitter timeline</title>
<style>
body {
margin: 0;
padding: 0;
}
</style>
</head>
<body>
<a class="twitter-timeline" href="..." data-widget-id="..."></a>
<script>
!function(d,s,id){
var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';
if(!d.getElementById(id)){
js=d.createElement(s);js.id=id;
js.src=p+"://platform.twitter.com/widgets.js";
fjs.parentNode.insertBefore(js,fjs);
}
}(document,"script","twitter-wjs");
</script>
</body>
</html>
And I have replaced the twitter_feed template with this:
<template name="twitter_feed">
<div class="news-box">
<iframe src="/twitter.html" scrolling="no" frameborder="0"
style="border: none; overflow:hidden; width:404px; height:650px; float:right"
allowTransparency="true"></iframe>
</div>
</template>
And now it shows fine on second and subsequent views.
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've been trying to find out how on earth to add some kind like button on a facebook fan page. I know there are ways of doing this. This page for instance has implemented one kind of like button: http://www.facebook.com/JimBeam?v=app_100742133310820
I know both of these pages use applications and not the static FBML page that you usually use. So I created an application where it works beautifully.
On this application, the like button works. However when I try to add it to a tab on a facebook page I get an error saying: "HTML error while rendering tag "iframe": iframes forbidden by flavor TabFBM" So apparently iframes aren't allowed to render. But obviously there are ways around this so do you have any clue on how they did it on the other pages?
I'd really appreciate an answer, and I'm especially curious whether if someone could figure out how they restyled the like button on Jim Beam's page.
Facebook page's tab are FBML. And you can not directly add the like button (fb:like or anything else) on this page. But there is a "trick" to do this, and page you give implement the following:
The only way to get the like button is to load it in an iframe. But iframes are forbidden in page's FBML as well. So the trick is to load an html page with AJAX (fbjs calls) which contains an iframe with the fb:like button. As Facebook forbids javascript autofiring, you need a like or a picture to get clicked on before doing the ajax call to load your html's iframe. This mostly is a pain in the ass.
So, here is the proof of concept code.
First file: index.html:
<script type="text/javascript">
<!-- function launch_code() {
var ajax = new Ajax();
ajax.responseType = Ajax.FBML;
ajax.requireLogin = false;
ajax.ondone = function(data) {
document.getElementById('content').setInnerFBML(data);
}
document.getElementById('content').setTextValue('Loading, please wait.');
ajax.post('http://example.com/greatpageapp/iframe.html');
return false; }
//--> </script>
<div id='content'>
<input type='button' onclick='launch_code(); return false;' value='click on me' />
</div>
And the iframe.html contents:
<center>
<table valign="top" border="0" cellpadding="0" cellspacing="0">
<tr>
<td valign="top" width="520" height="1500">
<iframe src="http://www.facebook.com/plugins/like.php?href=http%3A%2F%2Fgoogle.com%2F&layout=standard&show_faces=true&width=450&action=like&colorscheme=light&height=80" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:450px; height:80px;" allowTransparency="true"></iframe>
</td>
</tr>
</center>
Tested now and working. Hope that helps.
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.
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.