Web サイトの空きスペースに Amazon のリンクを挿入する

この Blog の左右のサイドバーの下側など、メインコンテンツが長いと空白スペースができるので、その分だけ Amazon のアフィリエイトリンクでも貼り付けておきたよね、という話です。

アフィリエイトの話ではないけど、サイドバーの空きスペースにモジュールを追加する方法を説明しているサイトがありました。

サイドバーの空きスペースに1個ずつモジュール（HTML コンテンツ）を追加して、サイドバーの縦幅がメインコンテンツの縦幅に近くなるまで繰り返しています。簡単な処理なのですぐ実装できると思います。

上記サイトでは、モジュールのコンテンツを返す php のページに何度もアクセスしていますが、一度にデータを読み込んで使う方が良いと思います。

次のコードは、当サイトで試しているコードです。Amazon アフィリエイトの情報を返すサーバーを別に用意しています。

	(function($) {
	var mainContent = $("#primary"),
	height = mainContent.outerHeight(), // コンテンツの縦幅この幅までモジュールを追加する
	aside = $("#content-sidebar"), // モジュールを追加する領域
	buffer = 80;

	function getMoreContent() {
	$.ajax({
	type: "GET",
	url: "http://***.azurewebsites.net/api/values", // 追加モジュールのデータを返す API を用意
	success: function (data) {
	if (data && data.length > 0) {

	for (var i = 0; i < data.length; i++) {
	var d = data[i];
	var html = '<div><a href="' + d.DetailPageUrl + '"><img src="' + d.ImageUrl + '" title="' + d.Title + '" /><br />' + d.Title + '</a></div>';

	$("<aside />", {
	"class": "sidebar-box",
	"id": "sidebar-box-" + i,
	"html": html,
	"css": {
	"position": "relative",
	"left": 25
	}
	// Fancy revealing of new content
	}).hide().appendTo(aside).fadeIn(200, function () {
	$(this).animate({
	"left": 0
	});
	});

	// If after getting new module, sidebar is still too short, start over
	if ((height > (aside.outerHeight() + buffer))) {
	console.log("aside.outheight: " + aside.outerHeight());
	} else {
	break;
	}
	}
	}
	},
	error: function (XMLHttpRequest, textStatus, errorThrown) {
	console.log(textStatus);
	}
	});
	}

	// Initial test
	if (height > (aside.outerHeight() + buffer)) {
	console.log("height: " + height);
	getMoreContent();
	}

	})(jQuery);

view raw

gistfile1.js

hosted with ❤ by GitHub

この方法の問題は、当サイトのようなレスポンシブ処理を行っていると、ブラウザーの横幅が狭くなると、メインコンテンツの下にサイドバーが移動するので、メインコンテンツとサイドバーの高さ比較では良い結果になりませんね。

また、動的にメインコンテンツの縦幅が長くなる場合も対応できていません。