#embed.ly

Embed.lyって知ってますか？

結構古くからあるWebサービスなのですが、今から4年前の2010年に立ち上がりました。出始め、TechCrunchでもニュースになっていました。

このEmbed.ly、その言葉の通り「embed=埋める、埋め込む」コンテンツを埋め込むサービスです。Web制作をに携わる人は「embed」と聞くと、Flashの埋め込み時に使う　<embed>タグを想像するかもしれません。ほとんど同じことです。

もっとわかりやすく説明すると、Facebook上でシェアした時に投稿欄にURLを入力するタイトルと画像と簡単な紹介文を添えて表示されますが、このEmbed.lyはそれを生成し、ブログやサイトに貼り付ける事ができるサービスです。

通常ブログで他のサイトを紹介するときは、URLを掲載してそれにリンクを付けるというのが最もスタンダードなやり方ですが、Embed.lyを使うと以下のようになります。

Embedly makes your content more engaging and easier to share | Embedly

こちらのサイトにアクセスし、画面の中央の入力欄に埋め込みたいページのURLをコピーして、矢印をクリックすると埋め込み内容が表示されます。

そこで「コードをコピー」をクリックすれば、後は載せたいページにペーストするだけ。

ちなみに、先ほど上記で表示したものソースはこちら

<a class="embedly-card" href="http://embed.ly">Embedly makes your content more engaging and easier to share | Embedly</a> <script>(function(a){var b="embedly-platform",c="script";if(!a.getElementById(b)){var d=a.createElement(c);d.id=b;d.async=true;d.src=("https:"===document.location.protocol?"https":"http")+"://cdn.embedly.com/widgets/platform.js";var e=document.getElementsByTagName(c)[0];e.parentNode.insertBefore(d,e)}})(document);</script>

また、いちいちサイトに行くのは面倒だという人のために、ブックマークが

Bookmarklet: instantly generate a Card for any web page. | Embedly // <![CDATA[ (function(a){var b="embedly-platform",c="script";if(!a.getElementById(b)){var d=a.createElement(c);d.id=b;d.async=true;d.src=("https:"===document.location.protocol?"https":"http")+"://cdn.embedly.com/widgets/platform.js";var e=document.getElementsByTagName(c)[0];e.parentNode.insertBefore(d,e)}})(document); // ]]>

いいね！ボタンの用にシェアしてもらうためのボタンも提供されています。

The Embed Button allows your readers to easily share and embed your posts on their sites | Embedly // <![CDATA[ (function(a){var b="embedly-platform",c="script";if(!a.getElementById(b)){var d=a.createElement(c);d.id=b;d.async=true;d.src=("https:"===document.location.protocol?"https":"http")+"://cdn.embedly.com/widgets/platform.js";var e=document.getElementsByTagName(c)[0];e.parentNode.insertBefore(d,e)}})(document); // ]]>

という具合に、リンク先を簡単に貼れます。

「embed.ly」コンテンツリンクを埋め込みコードにかえるウェブサービス

So I was having some issues with the embed.ly jquery preview plugin.

Basically embed.ly was working like a charm, but it was also messing with some parts of a form I was working with for a rails application. These were dropdown boxes, check boxes and radio buttons, that were being deselected when embedding an object in my create a post form.

Frankly I didn't want to spend to much time debugging the plugin, as the reasons I chose it in the first place was because it's fast and just works. So here is the little hack I used. First of all I removed all the objects in my form that could be deselected by javascript: i.e. dropdown boxes, checkboxes and radio buttons.

I created instead hidden fields in my forms. Like this:

<%= f.hidden_field :settings, :value => "public" %>

The :value field is specified so that I have a default value, just like I would in a form field.

Then I created a ul field list:

<ul class="pri-set">

  <li class="privacy active">public</li>

  <li class="privacy">private</li>

  <li class="privacy">anonymous</li>

</ul>

Then the followed piece of javascript followed to replace the check boxes / radio buttons / dropdown box:

$('li.privacy').click(function () {

      $("li.active").removeClass("active");

      $(this).addClass("active");

      $('#post_settings').val($(this).text());

  });

You can also style the ul / li fields with css:

ul.pri-set li {

    display: inline;

    font-size: 80%;

    font-weight: 600;

    cursor: hand; cursor: pointer;

}

.active {

    font-weight: 800;

    color: #000;

    text-shadow: 1px 1px 6px #fff;

}

Of course you have to keep in mind that you might want to support also browser that do not support javascript. 

Embedly Labs

I'm a big fan of Embedly.

I daresay it makes the desktop/web version of Twitter approximately a million times better by doing a ridiculously simple and obvious thing: it displays all kinds of media plus the content of links mentioned in a given toot--right over in that weird mystery meat column on the right.

That's it.

You know me. I could give a shit about redesign backlash and iLynchmobs and #OccupyTrivialChanges and what have you. Still.

I mention it here because:

an internet acquaintance of mine seems curious about it what it does;

you're a goddamned doofus to ever visit Twitter.com without embed.ly running.

So, there you go.

Or, more properly, here you go:

I'm modifying the code to display the TwitrPix image using Dabr Open Source. In embedly.php, modify the code:

$services = array( '#youtube\.com\/watch\?v=([_-\d\w]+)#i' => 'http://i.ytimg.com/vi/%s/1.jpg', ...... '#twitrpix.com/([\d\w]+)#i' => 'http://img.twitrpix.com/thumb/%s', );

Actually to display the TwitrPix is already there using Embed.ly api calls. But I prefer to use the regex instead the Embed.ly api calls. So Writelonger still can show the thumbnail even the embed.ly quota is out.