Previous to the new Facebook timeline, my apps would be cut off at the bottom. I fixed the issue using the following code and it worked.
window.fbAsyncInit = function() {
FB.Canvas.setAutoResize(); }; (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); }());
Now, the problem has returned, and I'm at a loss. I've tried several techniques explained in this forum (autogrow, setsize), but can't seem to get it to work. I'd appreciate any bones you can throw in my direction. I use primarily Chrome and Firefox.
Link to my app:
http://www.facebook.com/NACoDC/app_136524766420341
I have been able to do this twice now using the following:
Add this to the header of your html doc:
<div id="fb-root"></div>
<script src="http://connect.facebook.net/en_US/all.js" type="text/javascript"></script>
Input this code above the body close
<script type="text/javascript">
window.fbAsyncInit = function() {
FB.Canvas.setAutoResize( 100 );
}
// Do things that will sometimes call sizeChangeCallback()
function sizeChangeCallback() {
FB.Canvas.setSize({ width: 520, height: 2400 });
}
</script>
In your app settings => Advanced set Canvas Height to fixed 800px.
this has worked for me.
Related
I have a SPA built on React JS stack. I'm using react-router to navigate through pages and i need to implement Google AdWords on my website.
<script type="text/javascript">
/* <![CDATA[ */
goog_snippet_vars = function() {
var w = window;
w.google_conversion_id = 333333;
w.google_conversion_label = "33333";
w.google_remarketing_only = false;
}
// DO NOT CHANGE THE CODE BELOW.
goog_report_conversion = function(url) {
goog_snippet_vars();
window.google_conversion_format = "3";
var opt = new Object();
opt.onload_callback = function() {
if (typeof(url) != 'undefined') {
window.location = url;
}
}
var conv_handler = window['google_trackConversion'];
if (typeof(conv_handler) == 'function') {
conv_handler(opt);
}
}
/* ]]> */
</script>
I embed this code in body and i run goog_report_conversion when i click on button which navigates me to another page. Which is unwanted behaviour for SPA.
<Link
className="btn btn-primary"
to="/settings"
onClick={() => goog_report_conversion('site.name/settings')}
>Go to settings</Link>
The problem is that once I do it, it fully reloads my webpage.
I know that this line causes the problem
window.location = url;
But without it script doesn't work.
I also tried to create this event in Google Tag Manager and follow advices given here Google Tag Manager causes full page reload in SPA - React but it didn't help me.
Have anyone faced same problem implementing AdWords in SPA? How did you solve it?
I feel that the implementation example for the asynchronous Remarketing/Conversion snippet is needlessly complex. Here's something that we used in a similar scenario.
First we define a little helper function that we can reuse:
<script type="text/javascript">
function triggerConversion(conversionID, conversionLabel) {
if (typeof(window.google_trackConversion) === "function") {
window.google_trackConversion({
google_conversion_id: conversionID,
google_conversion_label: conversionLabel,
google_remarketing_only: false
});
}
}
</script>
then we include Google's async conversion script (ideally somewhere where it doesn't block rendering):
<script type="text/javascript"
src="http://www.googleadservices.com/pagead/conversion_async.js"
charset="utf-8">
</script>
And now you can track conversions on any element, like so, to adapt your example:
<Link
className="btn btn-primary"
onClick={() => triggerConversion(333333, "33333")}
>Go to settings</Link>
I'm running iframe resizer 3.5.3 on a wordpress installation. I can't say I really know what I'm doing, but I did a lot of reading and googling online, and got iframe-resizer up and running.
My iframe is embedded in the middle of the page, so I used scrollTo() to get it to scroll down to the iframe. See code below:
<script type="text/javascript" src="/wp-content/uploads/iframeresizer/iframeResizer.min.js"></script>
<script type="text/javascript">
iFrameResize( { minHeight : 1000, log : true, InPageLinks : true,
initCallback: function() { scrollTo(0,1000); }
} );
</script>
This worked, but scrollToOffset() did not. I can't figure out why one should work while the other does not. Here is the code:
<script type="text/javascript" src="/wp-content/uploads/iframeresizer/iframeResizer.min.js"></script>
<script type="text/javascript">
iFrameResize( { minHeight : 1000, log : true, InPageLinks : true,
initCallback: function() { scrollToOffset(1,1); }
} );
</script>
Any reason why one should work while the other doesn't? Am I doing something wrong?
The two methods should be called from inside the iFrame, not from the callbacks.
scrollTo works because you are calling the native window.scrollTo method, rather than the iframeResizer one.
I've tried several ways of coding this and have had all sorts of trouble getting my entire iframe to show up. I don't want to use scrollbars so I've coded those out. Here is the app on my page:
https://www.facebook.com/HorseRacingRadioNetwork/app_315312098503969
And here is the current code I've used:
<head>
....
<script type="text/javascript">
window.fbAsyncInit = function() {
//Der folgende Code ändert die Grösse des iFrames alle 100ms
FB.Canvas.setAutoResize(100);
};
(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);
}());
</script>
</body>
</html>
But I've researched and tried what seems like a million things and yet I always get the same result? Any suggestions would be extremely helpful! Thanks!
The first thing firebug shows me when I go to your page tab is a JS error,
TypeError: document.getElementById("fb-root") is null
document.getElementById('fb-root').appendChild(e);
And the way JavaScript (usually) works, is that any error stops the execution of the rest of the script or any other scripts for the document.
Please learn how to use your browser’s error console!
For as long as I can remember, the street view pegman has appeared on my map. Today, I noticed that he doesn't appear (although if you know where to mouse over to grab him, you can still get a streetview happening). My zoom control has similarly disappeared (but is still there if you know where to mouse for it) but not on mobile devices where it seems to display just fine.
My first guess is that this is a bug in the Maps API that's been introduced recently. But specifying v=3.4 in the URL for the API doesn't correct the issue.
Am I doing something wrong? If not, is there a workaround?
Here's how I create the map:
<script type="text/javascript">
var lat=<?php echo $lat; ?>;
var lon=<?php echo $lon; ?>;
var initialZoom=<?php echo $initialZoom; ?>;
var mapTypeId = 'Custom Map';
var mapStyle = [{featureType:"administrative", elementType:"all", stylers:[{hue:"#dae6c3"},{saturation:22},{lightness:-5}]},
{featureType:"landscape", elementType:"all", stylers:[{hue:"#dae6c3"},{saturation:16},{lightness:-7}]},
{featureType:"road", elementType:"geometry", stylers:[{hue:"#ffffff"},{saturation:-100},{lightness:100}]}];
var styledMap = new google.maps.StyledMapType(mapStyle);
var mapType = new google.maps.ImageMapType({
tileSize: new google.maps.Size(256,256),
getTileUrl: function(coord,zoom) {
return "img/tiles/"+zoom+"/"+coord.x+"/"+coord.y+".png";
}
});
var map = new google.maps.Map(document.getElementById("map_canvas"),
{center:new google.maps.LatLng(lat,lon),
mapTypeId:google.maps.MapTypeId.ROADMAP,
zoom:initialZoom,
mapTypeControl:false});
map.overlayMapTypes.insertAt(0, mapType);
map.mapTypes.set(mapTypeId, styledMap);
map.setMapTypeId(mapTypeId);
</script>
I had recently added this CSS rule which was causing the problem:
img {
max-width: 100%;
}
Removing that rule fixed the problem.
Im using the great async script loader yepnope.js (in Modernizr2).
My question is, what is the best way to incorporate the latset Google Analtics async code to yepnope (if at all)?
Google suggest this for the actual analytics code:
<html>
<head>
<script type="text/javascript">
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-XXXXX-X']);
_gaq.push(['_trackPageview']);
</script>
</head>
<body>
<p>Page Content</p>
<script src="some_random_script.js"></script>
<p>Page Content</p>
<script type="text/javascript"> (function() {
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
})();
</script>
</body>
</html>
But in Modernizrs docs, they mention this:
// Give Modernizr.load a string, an object, or an array of strings and objects
Modernizr.load([
// Presentational polyfills
{
// Logical list of things we would normally need
test : Modernizr.fontface && Modernizr.canvas && Modernizr.cssgradients,
// Modernizr.load loads css and javascript by default
nope : ['presentational-polyfill.js', 'presentational.css']
},
// Functional polyfills
{
// This just has to be truthy
test : Modernizr.websockets && window.JSON,
// socket-io.js and json2.js
nope : 'functional-polyfills.js',
// You can also give arrays of resources to load.
both : [ 'app.js', 'extra.js' ],
complete : function () {
// Run this after everything in this group has downloaded
// and executed, as well everything in all previous groups
myApp.init();
}
},
// Run your analytics after you've already kicked off all the rest
// of your app.
'post-analytics.js'
]);
Note the bottom line re: posting analyics. I dont want a new js file as that is another HTTP request however.
Shall I just keep this outside of yepnope? Is there any advantages to putting it within yepnope framework?
Adi
I found this on Ignited-HTML5-Boilerplate.
<script>
window._gaq = [['_setAccount','UAXXXXXXXX1'],['_trackPageview'],['_trackPageLoadTime']];
Modernizr.load({
load: ('https:' == location.protocol ? '//ssl' : '//www') + '.google-analytics.com/ga.js'
});
</script>
Not sure if this is "the best way" to incorporate the latest Google Analytics code in yepnope, but a way to integrate google code in yepnope is:
<script type="text/javascript">
Modernizr.load([
{
// WEB ANALYTICS loaded by yepnope (beta)
test: Boolean(SITEID = ''), // TODO: Fill the site ID to activate analytics
complete: function() {
if (SITEID) {
var _gaq=[['_setAccount',SITEID],['_trackPageview']];
(function(d,t){var g=d.createElement(t),s=d.getElementsByTagName(t)[0];g.async=1;
g.src=('https:'==location.protocol?'//ssl':'//www')+'.google-analytics.com/ga.js';
s.parentNode.insertBefore(g,s)}(document,'script'));
}
}
}
]);
</script>
It should be OK to place this code just before the </body> tag.