hanachin C-x C-c: embed.lyを利用してサイトにURLのプレビュー機能を埋め込む方法

#Favtileにembed.lyの埋め込み機能をつけました。

これによりリンク先の動画・写真・OpenGraphで設定されたサイトのアイコン等を埋め込み表示出来るようになりました。

今回はembed.lyを利用する過程を紹介します。

embed.lyって何が出来るの?

embed.lyを使うと、Webサイトの中に他のサイトの動画や写真やWebサイトを埋め込み表示することが出来ます。

Twitter向けの写真サイト(yfrogやTwitpic)やUstreamやYouTubeはもちろん、InstagramやAmazonなど、218ものコンテンツサイトの埋め込み表示に対応しています。

有料プラン以外に、無料プランがあります。1万URLまで無料で埋め込み表示できます。

登録方法

無料プランへの申し込み方法を説明します。

1.embed.lyの登録画面へ行く

Embedly | Pricing Plans

今回はFreeプランなんで、Freeプランの下のGet this Planをクリック。

2.登録画面埋める

まず、ユーザー名、パスワード、メールアドレス、First name、Lastネーム、Organizationの項目を入力しましょう。*1

次にサービスの規約に同意するチェックボックスにチェックを入れます。

最後にSign Up!ボタンをクリックすると完了です。

フォーム入力が完了すると次のような画面が出るので、リダイレクトされて別の画面へ切り替わるのを待ちます。

この画面が出ると、登録は完了です。

embed.lyをウェブサイトで使う前に

embed.lyをウェブサイトで使うためには「このURLのウェブサイトから呼び出されるのを許可する」設定が必要です。

1.設定画面へ行く

Manage your Referrersの欄のManageボタンをクリック

2.ウェブサイトのURLを設定に追加する

Add Referrerの入力欄に、WebサイトのURLをhttp://抜きで入力し、Addボタンをクリック。

このとき、「http://favtile.com/hanachin_」など、「http://favtile.com/」のうしろに何かついたURLでもアクセス出来るようにしたい場合は、*をつけて「favtile.com/*」のような感じで入力する。

あと、開発環境がlocalhostのサーバーに上がってるときは

localhost/*

localhost:3000/*

等々を追加しておくと便利です。

追加が完了するとReferrersに出てきます。

3.URLが設定出来てるか確認する

自分のウェブサイトで使えるか確認してみましょう。

使いたいURL「http://favtile.com/hanachin_」をTest Urlボタンの左の入力欄に入れ、Test Urlボタンをクリックします。

そのURLで使える場合は緑色で「Matched」と出ます。

赤で「No match」と出たら、そのURLでは使えません。確認してください。

embed.lyを使う

ではembed.lyを実際どうやって使うのかのサンプルです。

全容


<!DOCTYPE html>
<html>
<head>
    <title>embed.ly!</title>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
    <script src="http://scripts.embed.ly/jquery.embedly.min.js"></script>
    <script type="text/javascript">
      $(function(){
        $("a").embedly({
          // ここはそれぞれのAPIキーに置き換えてください
          key:"4c0281125b1211e188dc4040d3dc5c07"
        });
      });
    </script>
  </head>
<body>
<header>
<h1>embed.ly!</h1>
</header>
<article>
<h1>Favtile</h1>
<a href="http://favtile.com/">Favtile</a>
</article>
<article>
<h1>node.js + socket.io + Arduinoでイイネ! クローン</h1>
<a href="http://www.youtube.com/watch?v=WsjvgkjYWS4">youtube</a>
</article>
</body>
</html>

1.必要なファイルをscriptタグで指定

jQueryと、embed.lyのjQueryプラグインを読み込みます。


<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script src="http://scripts.embed.ly/jquery.embedly.min.js"></script>

2.embed.lyでリンク先を埋め込む

「"a"」など、埋め込みたいリンクをjQueryで指定し、「$("a").embedly({key: "key"})」のような感じでembed.lyのプラグインを呼び出すだけで、リンクを埋め込めます。


<script type="text/javascript">
  $(function(){
    $("a").embedly({
      // ここはそれぞれのAPIキーに置き換えてください
      key:"4c0281125b1211e188dc4040d3dc5c07"
    });
  });
</script>

keyに指定してある文字はembed.lyのYour API Keyに表示されている文字で置き換えてください。

3.確認

確認してみましょう。上手く行けばこのような感じで、サイトの画像や動画が埋め込まれて表示されます。

うまくいかなかったらこんな感じでただのリンクのまま、ですね。

まとめ

embed.lyを使うと結構簡単な手順で色んなコンテンツを埋め込めるのでお勧めです。

皆さんも是非使ってみてはいかがでしょうか?

*1：キャプチャで「ギークハウス沖縄」って入れてるけど通らなかったので別のに変更しました。

hanachin C-x C-c

2012年2月19日日曜日

embed.lyを利用してサイトにURLのプレビュー機能を埋め込む方法