crocodile notebook

feedly feedburner google+ twitter facebook creative commons BY:2.1 プロフィール

Amazonアソシエイトは上手に使えるようになりたいですね。
どうも、鰐です！

Amazonアソシエイトは商品写真を利用できる点だけでも重宝してます。
基本は購入してから記事にしてるから、自分で撮ってるんですけどね。

そんなAmazonアソシエイトですが、だいたいは用意されたものをそのまま使ってると思います。
もしくは支援ツールと呼ばれるものを利用するかですね。
用意されたものにはウィジェットと呼ばれるツールもありますが、使ってみるとちょっと不便。
自分のサイトの雰囲気とかに合わないんですよねえ。

そんなわけで、WordPressで表示する場合の見た目だけでもちょっとオリジナルにする方法です。
支援ツールのAmazletを利用しますのであらかじめ準備をしてください。

仕組みとしてはこんな感じ。
1. Amazonの商品リンクをタグを書き込んだテンプレートを用意します。
2. サイドバーにテンプレートの読み込みを記述します。
3. アクセスのたびにランダム表示！
これだけ。
簡単ですね。

このブログで、サイドバーの真ん中くらいにある「ワニのおすすめ」がコレです。
ダカフェのパクリと言われても否定はしない！

Amazonの商品リンクをタグを書き込んだテンプレートを用意します

amazon.php というファイルをデスクトップに作成します。
中身はカラッポで大丈夫。
そのファイルをFTPソフトなどでサーバの /wp-content/theme/テーマ名/ フォルダにアップします。
アップしたらパーミッション（権限）で 書き込み権限 を与えてください。
利用されているサーバによって異なる場合もありますが、どうにも動かない場合は 666 にすれば大丈夫。

アップ完了したらWordPressダッシュボードから テーマ編集 をクリックします。
amazon.phpが参照されていればOKです。

サイドバーにテンプレートの読み込みを記述します

テーマ編集からamazon.phpを選択して、以下を貼付けて保存します。

<?php
$bnSrc&#91;0&#93;='';

$n = mt_rand(0,count($bnSrc)-1);
echo $bnSrc&#91;$n&#93;;
?>

保存をしたら、amazletを使って紹介したい商品のリンクを作成します。
使うのは イメージリンク になります。
イメージリンクをコピーしたら「$bnSrc[0]=’ここ‘;」にAmazon商品リンクのHTMLタグを貼付けます
（張りつけの雰囲気は上のスクリーンショットを参照してください）
リンクする商品を増やす場合、2つめを$bnSrc[1]、3つめを$bnSrc[2]と数字を増やしてください。

紹介したい商品リンクのコピペが完了したら保存します。
次に、商品リンクを表示させたいテンプレートを開いて、表示個所に次の3行をコピペします。

<div class="amazonrecommend">
<?php include( TEMPLATEPATH . '/amazon.php' ); ?>
</div>

最後にスタイルシートのテンプレートに次のクラスを追加して、CSSを設定してください。

.amazonrecommend {  }
.amazonrecommend img {  }

imgは商品写真に直接反映されるCSSです。
アフィリエイトの写真は商品によって大きさが異なるので、表示させる最大の大きさを設定すると良いですよ。
「max-width:【大きさ】px;」で最大の横幅を。
「 max-height:【大きさ】px;」で最大の縦幅を指定できます。

このブログの場合「ワニのおすすめ」と表示されているのは背景画像です。
.amazonrecommendにbackground-imageで設定します。

ブログを表示してランダムに切り替われば完成です

確認するときは同じページで更新をするより、いろんなページに遷移しながら確認するのが良いです。

CSSや背景画像を上手に使って、自分のブログに似合うブログパーツにしてくださいね。

amazon.phpのサンプルはこちらからダウンロードできます。

リボルテック ダンボー アマゾンボックスバージョン
リボルテック ダンボー アマゾンボックスバージョン
posted with amazlet at 12.01.19
海洋堂 (2007-12-01)
売り上げランキング: 4
Amazon.co.jp で詳細を見る

融通の効かないアマゾンウィジェットの代わりを自作しちゃいましょう

UPDATE: 2012.01.19
, , ,

併せ読みに選ばれている
記事はこちらのようです
フリーテーマのカスタマイズ

フリーテーマのカスタマイズ

meganews-themeのカスタマイズ備忘録です。 （１）インデックスページのカスタマイズ

ワードプレスのページ送り（ページネーション）をプラグインなしで実装する方法

ワードプレスのページ送り（ページネーション）をプラグインなしで実装する方法

ワードプレスでのページ送りをプラグインなしで実装するためのPHPとCSSです。 機能的にはシンプルですが、簡単なCSSで自由にカスタマイズできるのがポイントです。

Googleウェブマスターツールは構造化データを重要視してるっぽいからWordPressで対応してみました

Googleウェブマスターツールは構造化データを重要視してるっぽいからWordPressで対応してみました

ブログってちょーっとマジメなことをやろうって思うと、なんか専門用語ばっかりでめんどくせーとか思っちゃうボクですがやってみたらできたっぽいのでそれっぽくwordpressで構造化データの対応方法まとめです。

Facebookのソーシャルプラグイン風のTwitterソーシャルプラグイン

Facebookのソーシャルプラグイン風のTwitterソーシャルプラグイン

twitterのフォロワーリストをfacebook風ソーシャルウィジェットのようなレイアウトでブログに掲載するjQueryプラグインです。 カスタマイズも容易なので使いやすいですよ。

WordPressで投稿済み記事内の文字列をfunction.phpから置換する方法

WordPressで投稿済み記事内の文字列をfunction.phpから置換する方法

https化に際して、過去に投稿した記事に含まれるURLもhttpsへ置換されるphpを作成しました。https化に限らず、特定の文字列を置換する場合に利用いただけます。

Google Adsenseの広告コードを修正する4つの方法と、見落としがちなポリシー違反

Google Adsenseの広告コードを修正する4つの方法と、見落としがちなポリシー違反

従来は一切の変更を禁じられていたAdsenseコードの変更ですが、4つの方法に限り許可されました。 あわせて、たまにみかけるポリシー違反への注意喚起も1つほど。