【試験公開】「いいね!」ランキングを作る

Posted by
ぴろり
Posted at
2011/02/06 23:16
Trackbacks
関連記事 (1)
Post Comment
コメントできます
Category
電算室 カテゴリ
カバーイメージ
  • Like
  • Photo by Adam Fagen
    • Attribution
    • NonCommercial
    • ShareAlike

 準備編完結編 と渡って、Facebook の「いいね!」数によるランキングの生成手順を書いてみましたが、多分、ほとんどの人にとっては敷居が高すぎて導入できないことと思います。そこで、様々なサイトにも比較的簡単に導入できるよう、ブログパーツとして試験的に公開することにしました。幾つかの HTML タグを埋め込むだけで、そのサイト内での「いいね!」数ランキングを生成します。まだ、試験段階で動作に怪しい部分がありますが、試して見たいという方は「本文を読む」をどうぞ。

この記事を Delicious に追加する   このエントリーをはてなブックマークに追加  

適用できるサイト

 いいね!数によるランキン表示を行うには、そのサイトが以下の全ての条件を満たしている必要があります。

1. 集計単位が独自ドメインを持っていること
 FC2 ブログSeesaa ブログなどのように、ユーザ毎に異なるサブドメインを持つサイトは集計することができます。
http://pirolix.seesaa.net/
 一方で、はてなダイアリーlivedoor ブログなどのように、ユーザをドメイン名ではなくディレクトリ名で区別するサイトでは集計できません。
http://d.hatena.ne.jp/pirolix/
2. 集計対象の個別記事ページに任意の HTML タグを記述できること
 いいね!数を集計するページをサービスに通知するために、いいね数を集計したい個々のページ毎に、そのページのタイトルと URL を示すパラメータを持ったビーコン(beacon)を設置する必要があります。
3. ブログパーツとして外部サーバの JavaScript を読み込めること
 いいね!数ランキングの集計結果の表示には JavaScript を利用しています。外部サーバに置かれた JavaScript を設置できる必要があります。

ビーコンの設置

 「いいね!」ボタンを設置した各コンテンツのページに以下の HTML タグを埋め込んでください。このビーコンが埋め込まれたページを「いいね!」ランキングの集計対象にします。

<img src="http://lab.magicvox.net/likelife/beacon.cgi?url=(記事のパーマリンク)&amp;title=(記事のタイトル)" style="display:none;" />

 (記事のパーマリンク) および (記事のタイトル) は、記事ごとに異なるパラメータになります。ブログサービスなどでは、その記事のタイトルやパーマリンクを得るためのテンプレートタグが提供されていることがありますのでそれをご利用ください。(記事のパーマリンク) および (記事のタイトル) は、URL エンコードした上でパラメータに与えてください。
 例えば MovableType で構築されたサイトの場合、個別ブログ記事アーカイブに以下のようなテンプレートタグを追加します。

<img src="http://lab.magicvox.net/likelife/beacon.cgi?url=<$MTEntryPermalink encode_url="1"$>&amp;title=<$MTEntryTitle encode_url="1"$>" style="display:none;" />

集計結果表示用ウィジェットの設置

 「いいね!」ランキングの結果表示を行うには、ページの任意の箇所に以下の HTML を追加してください。

<script src="http://lab.magicvox.net/likelife/ranking.cgi"></script>
<div id="likelife-credit"><a href="http://www.magicvox.net/">Open MagicVox.net</a></div>

 今のところ、HTML要素に幾つかクラスは設定してありますが、デザインが当たっていませんので、適当に CSS でデザインを調整してください。

仕様

  • 無料です
  • 申し込み手続きはありません。あなたのサイトに、上記のコードをそのまま設置してくだされば、集計を開始します。
  • 情報の反映には数時間程度の時間がかかります
  • 試験運用中につき、突然止まったりすることがあります
この記事を Delicious に追加する   このエントリーをはてなブックマークに追加  


この記事を読んだ人はこんな記事も読んでいます記事リコメンデーションについて

カバー画像:PIC ことはじめ ~ A/D 変換 + 7 セグメント LED

関連記事/トラックバック (全 1 件中、最新 5 件まで表示しています)

Open MagicVox.net のスクリーンショット
タイトル
MovableType で外部の RSS を取得・整形して表示する
Trackbacked at
2013/09/18 12:04
from
Open MagicVox.net
概要
先日、立て続けに公開した 2 本の MovableType プラグイン、XMLTransformer と HttpUserAgent を利用して、外部の...

この記事にトラックバックを送るには?

コメントを投稿する

 
 (必須, 匿名可, 公開, トリップが使えます)
 (必須, 匿名可, 非公開, Gravatar に対応しています)
 (必須)
スパム コメント防止のため「投稿確認」欄に ランダムな数字 CAPTCHAについて を入力してから送信してください。お手数ですがご協力のほど宜しくお願いいたします。