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);