Truemag

  • Categories
    • Tips And Tricks
    • Internet
    • PHP
    • Javascript
    • CSharp
    • SQL Server
    • Linux
  • Lastest Videos
  • Our Demos
  • About
  • Contact
  • Home
  • Write With Us
  • Job Request
Home Tips And Tricks Display Technorati Media Ads In Iframe

Display Technorati Media Ads In Iframe

I’ve just realized that Technorati Media Banner Ads load very slow compare to Google AdSense Ads and all pages are not rendered properly until Technorati Media Banner Ads appear. Meaning users have to wait few seconds to see a complete page with all style sheets and assets.

In order to speed up the loading time, I have to load all Technorati Media ads in iframes to avoid bad performance from advertisers. Currently, Technorati Media uses inline JavaScript to serve their ads and although the JavaScript file is loaded pretty fast but banner’s contents such as image or flash load very slow.

1. Create HTML Page To Serve Ads

First, we need to create a HTML page to load the Technorati Media ad, this page will be embed in an inline iframe of pages display the advertising banner. Save this page somewhere on your web hosting and name it something, for example: /ads/technoratimedia_300x250.html

An example of the HTML is as below:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="robots" content="noindex, nofollow" />
<title>Technoratimedia_300x250 Advertising Banner On 4rapiddev.com</title>
</head>
 
<body leftmargin='0' topmargin='0' marginwidth='0' marginheight='0' style='background-color:transparent; width: 100%; text-align: center;'>
 
<!-- BEGIN UAT - 300x250 - 4RapidDev: 4RapidDev - DO NOT MODIFY -->
<script type="text/javascript" src="http://ad-cdn.technoratimedia.com/00/63/24/uat_12463.js?ad_size=300x250"></script>
<!-- END TAG -->
 
</body>
</html>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="robots" content="noindex, nofollow" /> <title>Technoratimedia_300x250 Advertising Banner On 4rapiddev.com</title> </head> <body leftmargin='0' topmargin='0' marginwidth='0' marginheight='0' style='background-color:transparent; width: 100%; text-align: center;'> <!-- BEGIN UAT - 300x250 - 4RapidDev: 4RapidDev - DO NOT MODIFY --> <script type="text/javascript" src="http://ad-cdn.technoratimedia.com/00/63/24/uat_12463.js?ad_size=300x250"></script> <!-- END TAG --> </body> </html>

Note: you will need to replace the example ad tags with your ad tags. And body tag’s leftmargin, topmargin, marginwidth, marginheight attributes shoule be 0 to fit with the iframe and remove space between banner and iframe border.

2. Display Ads On Your Site

Now, we will need to integrate advertising banner into web pages by loading the HTML file above into an iframe and place it somewhere you would like to display the ad.

<iframe id='technoratimedia_300x250' name='technoratimedia_300x250' src='/_ads/technoratimedia_300x250.html' framespacing='0' frameborder='no' scrolling='no' width='300' height='250'></iframe>

<iframe id='technoratimedia_300x250' name='technoratimedia_300x250' src='/_ads/technoratimedia_300x250.html' framespacing='0' frameborder='no' scrolling='no' width='300' height='250'></iframe>

Note: depend on the ad size, we will need to set width & height of the iframe as the same with the ad size (ex: 300×250, 160×600, 728×90, etc)

Apr 16, 2012Hoan Huynh
WordPress Get All Custom FieldsWordPress Get Recent Posts And Recent Comments
You Might Also Like:
  • JavaScript Detect Protocol (HTTP/ HTTPS) To Load Or Handle Accordingly
  • Facebook Like Button And Recommend Button With fb:like, iframe and html5
  • Manage Or Organize WordPress Media Library Structure In Categories
  • My Blog Get Approve And Appear On Technorati
  • Display User Current Location On Google Map
  • JavaScript Display Leaving Confirm Box Leave This Page Or Stay On This Page
  • Jquery checkbox checked
  • innerText May Not Work On Mozilla Firefox
  • Create Count Down Download Page With JavaScript
  • Get Image Width Height With JQuery And JavaScript
Hoan Huynh

Hoan Huynh is the founder and head of 4rapiddev.com. Reach him at [email protected]

8 years ago Tips And TricksGoogle Adsense, HTML, Iframe, Technorati Media171
0
GooglePlus
0
Facebook
0
Twitter
0
Digg
0
Delicious
0
Stumbleupon
0
Linkedin
0
Pinterest
Most Viewed
PHP Download Image Or File From URL
21,931 views
Notepad Plus Plus Compare Plugin
How To Install Compare Text Plugin In Notepad Plus Plus
19,760 views
Microsoft SQL Server 2008 Attach Remove Log
Delete, Shrink, Eliminate Transaction Log .LDF File
15,596 views
JQuery Allow only numeric characters or only alphabet characters in textbox
13,112 views
C# Read Json From URL And Parse/Deserialize Json
9,565 views
4 Rapid Development is a central page that is targeted at newbie and professional programmers, database administrators, system admin, web masters and bloggers.
Recent Posts
  • Essay Writing Service Tips For The Online Essay
  • Research Paper Writing Service
  • Annotated Bibliography Example – How it Can Help You
  • Essay Writing Online Tips – How to Write Essays Online With Essay Proof Editing
  • Get Research Paper Assistance From Professional Help
Categories
  • CSharp (45)
  • Facebook Graph API (19)
  • Google API (7)
  • Internet (87)
  • iPhone XCode (8)
  • Javascript (35)
  • Linux (28)
  • MySQL (16)
  • PHP (84)
  • Problem Issue Error (29)
  • Resources (32)
  • SQL Server (25)
  • Timeline (5)
  • Tips And Tricks (141)
  • Uncategorized (64)
Recommended
  • Custom Software Development Company
  • Online Useful Tools
  • Premium Themes
  • VPS
2014 © 4 Rapid Development