Difference between revisions of "Widget:AdSense"

From yidtravel
Jump to: navigation, search
Line 1: Line 1:
−
<noinclude>__NOTOC__
+
{{Widget
−
This widget allows you to embed '''[//www.google.com/adsense/ AdSense ads]''' on your wiki page.
+
|author=Ike Hecht
 +
|provider=Google AdSense
 +
|providerurl=http://www.google.com/AdSense‎/
 +
|addedon=10/3/2013
 +
}}
 +
{{Comments}}
 +
This widget allows you to add [http://www.google.com/AdSense‎/ Google AdSense] ads to your wiki page. Ads are placed in specific spots within the page - not in the skin.
  
−
Created by Ike Hecht for [//www.wikiworks.com WikiWorks].
+
== Example ==
  
−
== Using this widget ==
+
To insert this widget, use the following code:
−
For information on how to use this widget, see the [http://www.mediawikiwidgets.org/AdSense widget description page on MediaWikiWidgets.org].
+
  
−
== Copy to your site ==
+
=== Code from Google ===
−
To use this widget on your site, just install the [http://www.mediawiki.org/wiki/Extension:Widgets MediaWiki Widgets extension] and copy the [{{fullurl:{{FULLPAGENAME}}|action=edit}} full source code] of this page to your wiki as '''{{FULLPAGENAME}}''' article.
+
In Google AdSense, click "Get code". Copy that code. It will look similar to this:
−
</noinclude><includeonly>
+
 
−
{{#widget:AdSense
+
<pre><script type="text/javascript"><!--
−
|name=
+
google_ad_client = "ca-pub-4602712147397250";
−
|client=ca-pub-4785807258058079
+
/* 160x600, created 1/1/10 */
 +
google_ad_slot = "6127367636";
 +
google_ad_width = 160;
 +
google_ad_height = 600;
 +
//-->
 +
</script>
 +
<script type="text/javascript"
 +
src="//pagead2.googlesyndication.com/pagead/show_ads.js">
 +
</script></pre>
 +
 
 +
=== Code in the wiki ===
 +
Take the values from above and place them in a widget call, as below.
 +
 
 +
<nowiki>{{#widget:</nowiki>{{PAGENAME}}<nowiki>
 +
|name=myadname
 +
|client=ca-pub-4602712147397250
 
|slot=6127367636
 
|slot=6127367636
 
|width = 160
 
|width = 160
−
|height = 90
+
|height = 600
−
}}<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
+
}}</nowiki>
−
<!-- AS1 -->
+
 
−
<ins class="adsbygoogle"
+
==== Parameters ====
−
     style="display:inline-block;width:160px;height:90px"
+
* '''name''' - The ad name in the AdSense system - this is only required for responsive ads
−
     data-ad-client="ca-pub-4785807258058079"
+
* '''client''' - Your AdSense Publisher ID - '''NOTE: It is highly recommended that you hard-code the client ID onto the widget page (Widget:AdSense). Otherwise, users will be able to insert their own ID and make money off of your site.'''
−
     data-ad-slot="1432369948"></ins>
+
* '''slot''' - The AdSense Slot ID for this ad
 +
* '''width''' - The desired width for this ad
 +
* '''height''' - The desired height for this ad
 +
 
 +
== Responsive Example ==
 +
 
 +
The Widget was designed to work with responsive ads as well. Usage is similar.
 +
 
 +
=== Code from Google ===
 +
In Google AdSense, click "Get code". Copy that code. It will look similar to this:
 +
 
 +
<pre><style>
 +
.responsive-1 { width: 320px; height: 50px; }
 +
@media(min-width: 500px) { .responsive-1 { width: 468px; height: 60px; } }
 +
@media(min-width: 800px) { .responsive-1 { width: 728px; height: 90px; } }
 +
</style>
 +
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
 +
<!-- Responsive 1 -->
 +
<ins class="adsbygoogle responsive-1"
 +
     style="display:inline-block"
 +
     data-ad-client="ca-pub-4602712147397250"
 +
     data-ad-slot="6127367636"></ins>
 
<script>
 
<script>
 
(adsbygoogle = window.adsbygoogle || []).push({});
 
(adsbygoogle = window.adsbygoogle || []).push({});
−
</script>
+
</script></pre>
−
</script>
+
 
 +
=== Code in the wiki ===
 +
 
 +
==== CSS ====
 +
Take the values from the above <style> section and add the following CSS to your wiki, either by inserting it into your Mediawiki:Common.css, or by adding it to your skin. More info is available [https://www.mediawiki.org/wiki/CSS here].
 +
<pre>
 +
.responsive-1 { width: 320px; height: 50px; }
 +
@media(min-width: 500px) { .responsive-1 { width: 468px; height: 60px; } }
 +
@media(min-width: 768px) { .responsive-1 { width: 728px; height: 90px; } }
 +
</pre>
 +
==== Widget Call ====
 +
Take the values from the above <script> section and place them in a widget call, as below.
 +
 
 +
<nowiki>{{#widget:</nowiki>{{PAGENAME}}<nowiki>
 +
|name=responsive-1
 +
|client=ca-pub-4602712147397250
 +
|slot=6127367636
 +
}}</nowiki>
 +
 
 +
<!-- Putting a sample here raises ethical questions. == Sample result ==
 +
{{#widget:{{PAGENAME}}
 +
|param1=
 +
|param2=
 +
|param3=
 +
}}-->

Revision as of 21:35, 19 February 2015

Template:Widget Template:Comments This widget allows you to add Google AdSense ads to your wiki page. Ads are placed in specific spots within the page - not in the skin.

Example

To insert this widget, use the following code:

Code from Google

In Google AdSense, click "Get code". Copy that code. It will look similar to this: 

<script type="text/javascript"><!--
google_ad_client = "ca-pub-4602712147397250";
/* 160x600, created 1/1/10 */
google_ad_slot = "6127367636";
google_ad_width = 160;
google_ad_height = 600;
//-->
</script>
<script type="text/javascript"
src="//pagead2.googlesyndication.com/pagead/show_ads.js">
</script>

Code in the wiki

Take the values from above and place them in a widget call, as below. 

{{#widget:AdSense
|name=myadname
|client=ca-pub-4602712147397250
|slot=6127367636
|width = 160
|height = 600
}}

Parameters

  • name - The ad name in the AdSense system - this is only required for responsive ads
  • client - Your AdSense Publisher ID - NOTE: It is highly recommended that you hard-code the client ID onto the widget page (Widget:AdSense). Otherwise, users will be able to insert their own ID and make money off of your site.
  • slot - The AdSense Slot ID for this ad
  • width - The desired width for this ad
  • height - The desired height for this ad

Responsive Example

The Widget was designed to work with responsive ads as well. Usage is similar.

Code from Google

In Google AdSense, click "Get code". Copy that code. It will look similar to this: 

<style>
.responsive-1 { width: 320px; height: 50px; }
@media(min-width: 500px) { .responsive-1 { width: 468px; height: 60px; } }
@media(min-width: 800px) { .responsive-1 { width: 728px; height: 90px; } }
</style>
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<!-- Responsive 1 -->
<ins class="adsbygoogle responsive-1"
     style="display:inline-block"
     data-ad-client="ca-pub-4602712147397250"
     data-ad-slot="6127367636"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>

Code in the wiki

CSS

Take the values from the above <style> section and add the following CSS to your wiki, either by inserting it into your Mediawiki:Common.css, or by adding it to your skin. More info is available here. 

.responsive-1 { width: 320px; height: 50px; }
@media(min-width: 500px) { .responsive-1 { width: 468px; height: 60px; } }
@media(min-width: 768px) { .responsive-1 { width: 728px; height: 90px; } }

Widget Call

Take the values from the above <script> section and place them in a widget call, as below. 

{{#widget:AdSense
|name=responsive-1
|client=ca-pub-4602712147397250
|slot=6127367636
}}


Retrieved from "http://yidtravel.com/mw/index.php?title=Widget:AdSense&oldid=9661"