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.
Related
I want to track each time someone clicks on a link on my web (this click makes a file to be downloaded) to optimise my Facebook Ads (pay per conversion). After including the Facebook pixel in the head section of my web, I have to track this event, for example as a "lead", so I'm using this piece of code at the beginning of the body:
<script type="text/javascript">
$( '#link' ).click(function() {
fbq('track', 'Lead');
});
</script>
Please note that "link" is the id I've set for the link:
<a id="link" href="/content/file.zip">press here</a>
However, I'm tracking a "PageView" (because of the first code in the head section), but I'm not tracking the lead event (the click on the link).
I've also tried this one:
<script type="text/javascript">
$("#link").on('click', function() {
fbq('track', 'Lead');
});
</script>
And I've also tried with an onclick event in the link, like this:
press here
<script type="text/javascript">
function fileDownloaded() {
fbq('track', 'Lead');
return true;
}
</script>
Nothing works for me (I've also put the code of the event at the end of the body section). What am I doing wrong?
Thanks a lot.
I've found a solution that works for me, in case is useful for someone else:
Instead of putting the link inside an href, I've moved the link to the javascript function.
I've used an onclick method to call the javascript function in which I first call the Facebook event to track, and then the download of the file starts.
The result is something like this for the HTML (the text I want to link):
<div onclick="fileDownloaded()">press here</div>
And something like this for the javascript function I want to track with Facebook pixel when someone clicks on the link (at the end of the body section):
<script>
function fileDownloaded() {
fbq('track', 'Lead');
window.open("/content/file.zip","_self")
}
</script>
Best regards.
If you put the URL inside javascript, the link will be "dead" for any visitor that doesn't have scripts enabled in their browser.
You can just put fbq() inside a function inside separate script tags like so:
//pixel code above
fbq('track', 'PageView');
</script>
<script>
function Lead(){ fbq('track','Lead'); }
</script>
<body>
Click tracked by FB!
I use this with image;
<a href="https://downloadurl">
<img src="target image" alt="xxx" onclick="fbq('track','Lead')"/>
</a>
this works if you have installed the fb pixel code in the website header.
How can we resize a website which appears in an iFrame ? Is it possible if the website is wider than the Facebook page to make it appear a bit smaller so that we can see it all ?
Here is the code I used to avoid the scroll bar at least:
<html>
<head></head>
<body>
<iframe style="width:827px; height:1000px;" src="#"></iframe>
</body>
</html>
Thanks by advance !
Change the height and width for example for my facebook i changed it to
style="border:none; overflow:hidden; width:215px; height:290px;"
Just make sure to add the overflow hidden part so it hides any extra
Use this code just after your opening tag
<div id="fb-root"></div>
<script src="https://connect.facebook.net/en_US/all.js"></script>
<script>
window.fbAsyncInit = function() {
FB.init({
appId : 'YOUR APP ID', //Your facebook APP here
cookie : true, // enable cookies to allow the server to access the session
});
}
window.onload = function() {
FB.Canvas.setAutoGrow(91);
}
</script>
also add this css statement to your header section.
<style>
body {overflow:hidden;} /*This is handy for removing horizontal/vertical scrollbars as we won't need them if we autosize; */
</style>
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.
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 have an iframe application build up on php.
I have set iframe size as resizable.
There is a problem the display is not proper if the content is too large.
I have applied the code available on http://wiki.developers.facebook.com/index.php/Resizable_IFrame
My xd_receiver.htm file is inside my templates folder where my php files are residing.
The code which I am using is:
<div id="FB_HiddenIFrameContainer" style="display:none; position:absolute; left:-100px; top:-100px; width:0px; height: 0px;"></div>
<script src="http://static.ak.facebook.com/js/api_lib/v0.4/FeatureLoader.js.php" type="text/javascript"></script>
<script type="text/javascript">
FB_RequireFeatures(["CanvasUtil"], function(){
FB.XdComm.Server.init(xd_receiver.htm>);
FB.CanvasClient.startTimerToSizeToContent();
}
);
</script>
Please guide on how to make the display correct.
even though In am not sure about this, but Large content could be the the real issue,
try to move this part to the end of your page
FB_RequireFeatures(["CanvasUtil"],
function(){
FB.XdComm.Server.init(xd_receiver.htm>);
FB.CanvasClient.startTimerToSizeToContent();
} ); </script>