The ads used to show properly but recently I noticed that the ads are blank. The iframe code is inserted but inside it's body there's nothing.
This is the code I'm inserting on the right column here for example https://www.countrypick.com/countries/united-kingdom:
<ins class="adsbygoogle"
style="display:block"
data-ad-client="ca-pub-483193165XXXXX"
data-ad-slot="2992948594"
data-ad-format="auto"
data-full-width-responsive="true"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
Related
I'm facing problem with Google Adsense size is to small. This is my code I have tried:
I have created new ads same image below:
create new ads screen
This is code look like this
<script type='text/javascript' src='http://pagead2.googlesyndication.com/pagead/show_ads.js'></script>
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<!-- Test Ads #2016 -->
<ins class="adsbygoogle"
style="display:block"
data-ad-client="ca-pub-xxxxxxxxxxxxxxxxx"
data-ad-slot="xxxxxxxxxxxxx"
data-ad-format="auto"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
The result looks like this ads still too small:
small ads as result
Please, anybody help me. Thanks you in advance!
If you want to make it any custom size you can go to adsesne dashboard --> ad units then create new one there.
for your code you can just insert this
style="display:block"
instead of this
style="display:inline-block;width:728px;height:90px"
this will make it into block but the better way to create new one>
I found this example http://wearevanity.co where the new ads are loaded in every page.
In addition to the maximum number of posts allowed by Tumblr. The ads are automatically adjusted to the layout of the page, which makes them add to the look of the blog.
Does anyone know how to achieve this? If so, would you please explain it to us, step by step?
Use {block:Post6} and {block:Post12} to show content on the 6th and 12th posts. Documentation here
Example usage:
{block:Posts}
{block:Photo}Your content blocks here{/block:Photo}
{block:Video}Your content blocks here{/block:Video}
{block:Post6} Your ad code here{/block:Post6}
{block:Post12}Your ad code here{/block:Post12}
{/block:Posts}
Add this
{block:Post6} Your ad code here{/block:Post6}
{block:Post12}Your ad code here{/block:Post12}
above {/block:Posts} to add ads.
I found the solution and the ads look great, and have their own photo-border, adding to the look of the blog. I used bfred's method and placed the ad code right before
{/block:Posts}
However, even though the ads were being loaded after posts 6 and 12, they were inside those posts, sharing the same photo-border, and that didn't add up to the look of the whole theme. So I looked for the line of code that was causing the photos to be organised and have their own space on the grid. In my case this was the line:
<article id="{PostID}" class="entry{block:HasTags}
{block:Tags} tag-{Tag}{/block:Tags}
{/block:HasTags}{block:Photo} photo-border{/block:Photo}">
Once I found it, after trying different placements, I finally placed this line inside
{block:Post6} {/block:Post6}
I also had to change the size of the ads so that the width could match the width of the photo-posts on my blog. So the final code looks like this:
{block:Post6}
<article id="{PostID}" class="entry{block:HasTags}
{block:Tags} tag-{Tag}{/block:Tags}
{/block:HasTags}{block:Photo} photo-border{/block:Photo}">
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<!-- page -->
<ins class="adsbygoogle"
style="display:inline-block;width:264px;height:250px"
data-ad-client="ca-pub-7147439154267017"
data-ad-slot="1006289886"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
</article>
{/block:Post6}
{block:Post12}
<article id="{PostID}" class="entry{block:HasTags}
{block:Tags} tag-{Tag}{/block:Tags}
{/block:HasTags}{block:Photo} photo-border{/block:Photo}">
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<!-- page -->
<ins class="adsbygoogle"
style="display:inline-block;width:264px;height:250px"
data-ad-client="ca-pub-7147439154267017"
data-ad-slot="1006289886"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
</article>
{/block:Post12}
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>
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.