Ответ 1
AdSense не поддерживает ширину жидкости (не то, что я знаю), но вы можете служить различные размеры в зависимости от фактического размера контейнера с использованием JavaScript.
Посмотрите на это:
http://james.cridland.net/code/dynamic_google_adsense.html
ИЗМЕНИТЬ
Было бы полезно, если бы вы объяснили, как вы использовали пример в приведенной выше ссылке.
Вот более подробный пример как плагин jQuery, который должен работать теоретически.
var google_ad_slot, google_ad_width, google_ad_height;
(function( $ ){
$.fn.google_ads = function(slots) {
/* Sort slots by width descending */
slots.sort(function(a, b){
var a1 = a[0], b1 = b[0];
if(a1 == b1) return 0;
return a1 > b1? -1: 1;
});
return this.each(function(){
/* Get slot container width */
var width = $(this).width();
/* Find fitting slot */
var slot = null;
$.each(slots, function(){
slot = this;
if(width >= slot[0]){
return false;
}
});
if( slot !== null ){
/* Set global variables for external script */
google_ad_slot = slot[2];
google_ad_width = slot[0];
google_ad_height = slot[1];
/* Append script to slot container */
var script_el = $('<script>', {
'type': 'text/javascript',
'src': 'http://pagead2.googlesyndication.com/pagead/show_ads.js'
}).on('load', function() {
/* May need to wait with next slot until script is loaded */
console.log('loaded');
});
$(this).append(script_el);
}
});
};
})( jQuery );
Пример использования [ширина, высота, слот]
<h2>Slot 1</h2>
<div id="slot-1" class="slot" style="width:300px;"></div>
<h2>Slot 2</h2>
<div id="slot-2" class="slot" style="width:400px;"></div>
<script type="text/javascript">
var google_ad_client = "ca-pub-527527527527527";
$('.slot').google_ads([
[180, 160, 1234567890],
[250, 250, 2345678901],
[300, 250, 3456789012],
[336, 280, 4567890123],
[728, 90, 5678901234]
]);
</script>
Более вероятным (и уродливым) способом добиться успеха будет:
<script type="text/javascript">
var get_google_ad_params = function(width, slots){
/* Sort slots by width descending */
slots.sort(function(a, b){
var a1 = a[0], b1 = b[0];
if(a1 == b1) return 0;
return a1 > b1? -1: 1;
});
/* Find fitting slot */
var slot = null;
$.each(slots, function(){
slot = this;
if(width >= slot[0]){
return false;
}
});
return slot;
};
var slots = [
[180, 160, 1234567890],
[250, 250, 2345678901],
[300, 250, 3456789012],
[336, 280, 4567890123],
[728, 90, 5678901234]
];
</script>
<h2>Slot 1</h2>
<div id="slot-1" class="slot" style="width:300px;">
<script type="text/javascript">
var params = get_google_ad_params($('#slot-1').width(), slots);
var google_ad_slot = params[2];
var google_ad_width = params[0];
var google_ad_height = params[1];
</script>
<script type="text/javascript" src="http://pagead2.googlesyndication.com/pagead/show_ads.js"></script>
</div>
<h2>Slot 2</h2>
<div id="slot-2" class="slot" style="width:400px;">
<script type="text/javascript">
var params = get_google_ad_params($('#slot-2').width(), slots);
var google_ad_slot = params[2];
var google_ad_width = params[0];
var google_ad_height = params[1];
</script>
<script type="text/javascript" src="http://pagead2.googlesyndication.com/pagead/show_ads.js"></script>
</div>