スキップしてメイン コンテンツに移動

コンテンツリンクを埋め込みコードに変えるサービス「Embed.ly」の導入方法

イメージ
投稿者:
 ã‚³ãƒ³ãƒ†ãƒ³ãƒ„へのリンクを貼るだけで、そのコンテンツサービスの埋め込みコードに変更してくれるサービスです。対応サービスは現在112個！しかも、登録不要。コードを貼り付けるだけ！すごいサービスがでたもんだ。TechCrunchでも、投資家垂涎の企業として紹介されていました。
Y Combinator傘下のEmbed.lyに、エンジェルたちが殺到している。
via: TechCrunch Japan
ただのURLリンクが
http://twitter.com/romberg_iso8/status/20220536957
↓↓
自動的にこうなります。
http://twitter.com/romberg_iso8/status/20220536957

使ってみた感想としては、”オラなんだかワクワクしている”と行ったところでしょうか、詳細に導入方法を説明したいと思います。(当ブログには導入済です。）
一番簡単な実装方法としては、以下のコードを<head>内に貼るだけで、動作します。

<script type="text/javascript" src="http://scripts.embed.ly/embedly.js" ></script>

また、細やかな設定をしたい場合はオプションが設定可能です。
以下はTwitpicだけ置き換える設定例
<script type="text/javascript"> 
// set custom embedly defaults
var embedly_maxWidth = 550;
var embedly_urlRe = /(http:\/\/twitpic.com\/.*)/i 
var embedly_method = 'replace';
var embedly_wrapElement = 'div';
var embedly_className = 'embed';
var embedly_not_cssSelector = 'norep';
</script>

以下、設定可能なオプションの説明です。
embedly_maxWidth
コンテンツの最大幅です。ブログ毎に幅は違うと思いますので、これは設定しておいたほうがよさそうです。 (デフォルト値 : 600)

embedly_maxHeight
コンテンツの最大高です。あまりいらない？ (デフォルト値 : コンテンツのオリジナルの高さ)

embedly_cssSelector
置き換え対象を行うタグの設定です。デフォルトではリンクの<a>なら何でも置き換えられるようになっていますが、<a class='rep'>だけ置き換えしたい場合は、'a.rep'と指定しましょう。
(デフォルト値: 'a') 例： 'a.rep'
embedly_not_cssSelector
置き換えしたくないのタグを設定します。<a class='norep'>を置き換えしたくない場合は'a.norep'です。
(デフォルト値: '') 例： 'a.norep'

embedly_method
置き換え方法の指定ができます。 (デフォルト値 : 'replace')
replace - リンクと入れ替える
after - リンクの直下にコンテンツを埋め込む
afterParent - 親タグの下に埋め込む。（記事の下の方にどしゃーと）

embedly_wrapElement
埋め込みコードをどんなエレメントで埋め込むか (デフォルト値 : 'div')

embedly_className
埋め込みコードのエレメントのクラス名を指定できます。 (デフォルト値 : 'embed')

embedly_urlRe
置き換え対象としたいサービスを正規表現で指定します。(デフォルト値 : 全サービス )
サービスを選んで簡単に正規表現にしてくれるページが用意されています。
＞＞ http://api.embed.ly/tools/generator

追記：embedly_urlReがうまく動かないみたいです。情報求む！


ソースの埋め込みは、以下を参考にしてみてください。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
   <head>
      <script type="text/javascript" src="http://scripts.embed.ly/embedly.js"></script>
   </head>
   <body>
      <div>
         <div>
         <a href="http://twitter.com/ConanObrien">ConanObrien</a>:
         <span>
         <a href="http://twitpic.com/1ezvfa" >http://twitpic.com/1ezvfa</a>
          - I am in Eugene, OR and my room faces the theater where I debut tomorrow.          The mob outside is in a frenzy.</span>
         </div>
      </div>

      <!-- OPTIONAL EMBEDLY CUSTOM VALUES -->
      <script type="text/javascript">
      // set custom embedly defaults
      var embedly_maxWidth = 400;
      var embedly_maxHeight = 200;
      var embedly_method = 'replace';
      var embedly_wrapElement = 'div';
      var embedly_className = 'embed';
      var embedly_addImageStyles = true;
      var embedly_cssSelector = 'a';
      </script>
   </body>
</html>


Bloggerでも、難なく動いた。ほんとに素敵サービス。今後もいろいろいじってみます。

あとは、AndroidやiPhoneで動作するかどうかが早く知りたいです。

追記： iPhoneのサファリでは動作した模様
・導入してみたいけど、その前に試してみたい人へ ＞＞ ココ
・導入したくないけど、恩恵に与りたい人へ＞＞ ココ
・Chromeのエクステンション（拡張,アドオン）が欲しい人は＞＞ ã‚³ã‚³



登録とかは必要ないですが、さらなる詳細が知りたい方はサービスサイトへどうぞ（英語）
＞＞Embedly
ラベル:

コメント

コメントを投稿