あわせて読みたいAPIでカスタマイズ（ファビコン付き）

ブログのテンプレートを変えたらなんだか『あわせて読みたい』が浮いてる。。。
せっかくなんであわせて読みたいAPIを使って見た目を変えてみたい。
やりかた分かんないんで、またインターネッツの力を借りよう。

ちなみにここではWordPressを使った例です。（大して関係ないですが。）

さて、APIっていうのが便利なモノだってのは何となくわかる。
そしてAPIとともに良く出てくるJSONP。ジェーソンピー？全く分からない。
少し調べてみたところ、JSONPを使うと外部ドメインにリクエストを送って、返されたデータをごにょごにょと使えるようになるらしい。（超アバウト。。。）

JSONPについては以下のエントリーが分かりやすかったです。

JSONP｜あどけない話

さて、早くも目的を見失いそうだけども（^_^;）
やりたいことは、あわせて読みたいの見た目を変えたいってこと。
これについては以下のエントリーを参考にさせていただきました。

あわせて読みたいAPIを使おう｜aimy.moco -曖昧：模糊-

まずは上記のエントリー中にある『awaseteyomitai.js』というファイルをダウンロード（またはコピペ）する。
そのファイルをサーバーにアップする。例えば、WordPress を使ってる場合だと、wordpress/wp-includes/js/ フォルダの中とか。

ただしここでは awaseteyomitai.js を次のように、一部変更している。

function awasete_yomitai(v){
var list_max=10;
if(list_max<1 || 10< max; i++){
var liElement = document.createElement( 'LI');
if (liElement){
var d = v[i];
elmUl.appendChild(liElement);
var imgElement = document.createElement('img');
imgElement.src = d.favicon;
liElement.appendChild(imgElement);
var aElement = document.createElement('A');
aElement.href=d.url;
aElement.appendChild(document.createTextNode(d.title));
liElement.appendChild(aElement);
}
}
}

変更点は、次の二つ。

li タグに class を指定しない
ファビコンをリストのあたまに表示する（imgElement の作成）

次に、この .js ファイルを読み込むために、ヘッダーに次のように記述する。

<script type="text/javascript" src="http://フォルダの場所/awaseteyomitai.js"></script>

さらに body の中に次のように記述。（これはヘッダーだとうまくいかないみたい。）

<script type="text/javascript" src="http://api.awasete.com/showjson.phtml?u=http%3a%2f%2f自分のブログのURL" charset="utf-8"></script>

ちなみにURLはエンコードする必要があるとのこと。このへんで↓

URL エンコード、デコードもできる UTF8/16 変換ライブラリ

これであわせて読みたいのデータを読み込むための準備ができたので、あとは自分のブログに表示するために、サイドバーなどに以下を記述。

<div id="awasete_yomitai"></div>

そうすると、不思議なことにブラウザ上では次のような構造でリストが表示される。（←まだよく理解してない。。。）

<div id="awasete_yomitai">
<ul>
<li><img src="ファビコンURL" /><a href="ブログURL">サイト1</a></li>
<li><img src="ファビコンURL" /><a href="ブログURL">サイト2</a></li>
<li><img src="ファビコンURL" /><a href="ブログURL">サイト3</a></li>
・・・
</ul>
</div>

これであわせて読みたいリストが表示されるようになるから、あとは CSS で背景を付けてみたり加工すればいいんじゃないかな。

Take It Crazzzy!

あわせて読みたいAPIでカスタマイズ（ファビコン付き）

関連しそうなエントリー

コメント / トラックバック 713 件

コメントをどうぞ

What's TiC?

カテゴリー

TiC! 目次

あわせて読みたいブログ

ぐーぐるふれんど

ページ

アーカイブ