oEmbed APIでwebサービスを作りたい全ての人に向けて書きました。

URLから簡単に埋め込み用コードを取得できるoEmbedについて、初心者の人でもなるべく分かるように紹介します。「oEmbedって何？」って思ってる人は流し見してみて下さい。

oEmbedとは？

oEmbedとは、埋め込み用コードを取得するためのシステム、統一規格です。TwitterやYoutube、Vimeoなどといった世界的に有名なwebサービスの各々がこのoEmbedの規格を採用しています。

統一規格があることで、web開発者はoEmbedの仕様だけを知っておけば、「個別に各サービスの仕様を調べる」といった学習コストをかけることなく、様々なサービスの埋め込み用コンテンツを利用することができるわけです。

2014年9月には日本で人気のブログサービスはてなブログが、このoEmbedの規格を採用して、ブログ記事の埋め込み用コードを取得するAPIを公開しました。採用するサービスが増えれば増えるほど、web開発者にとって好ましい環境が整っていくというわけですね。

oEmbedの便利さ

具体的な取得方法は後述します。oEmbedの魅力は「パーマリンクURLを指定することで、そのURLに応じた埋め込み用コードを取得できる」という、そのシンプルさにあります。

例えば、Instagramで下記パーマリンクの写真があります。

この写真を埋め込むためのコードは下記の通りです。

oEmbedを知らない時は、パーマリンクURLの文字列をわざわざ分解して赤文字部分を取り出し、埋め込み用コードを組み立てるといった非常に回りくどいことをしていた私…。webサービスによっては、URL文字列の材料だけじゃ埋め込み用コードを組み立てられないものもあって「さぁどうしよう…」という状態だったんです。

が、oEmbedなら、単純にパーマリンクURLを指定してリクエストするだけで、完成した埋め込み用コードを取得することができます。「コンテンツのパーマリンクから埋め込み用コードを取得できる」。地味だけど、これって、とーーーっても便利なんです…。

…その後、この記事を書く過程で調べていたら、InstagramはどうやらoEmbedで埋め込み用コードを吐かない様子…。ということでInstagramに関してはパーマリンクから埋め込み用コードを組み立てましょう…。

oEmbedの使い方

この章では、具体的にoEmbedを利用して埋め込み用コードを取得する方法を紹介します。

リクエスト方法

oEmbedの使い方は極めて簡単で、各サービスが指定するエンドポイントURLに、パラメータのurlを付けてリクエストするだけ。urlの値には、埋め込みたいコンテンツのパーマリンクを指定します。

オプションパラメータ

指定できる基本的なオプションパラメータは下記の通りです。利用するのはurlとformatくらいでしょう。各サービスにより、パラメータの対応状況は異なるので、詳しくは各サービスの案内をご確認下さい。

取得するサンプル

それでは試しに、はてなブログの記事を埋め込んでみましょう。はてなブログが指定するoEmbedのエンドポイントは下記の通りです。

埋め込むのは、私がかねてからのファンであるはてブマンのボクがはてブマンになった理由という記事です。記事のパーマリンクは下記の通り。

それでは早速、JSONデータを取得してみましょう。サンプルに使用する言語はPHPです。

<?php
	//エンドポイントのURL
	$endpoint = 'http://hatenablog.com/oembed';

	//記事のURL
	$permalink = 'http://hatebuman.hatenablog.com/entry/2013/11/30/161605';

	//リクエスト(パラメータの値はURLエンコードする)
	$json = @file_get_contents($endpoint.'?url='.rawurlencode($permalink).'&format=json');

	//JSONを出力
	echo $json;

JSONデータ

oEmbedで取得できるJSONデータは、基本的に下記の通りです。コンテンツ周りの重要な情報を取得できるので、必要に応じて活用することができますねー。この内、htmlに格納されているのが、そのまま利用できる埋め込みコードです。

{
    "author_name": "hatebuman",コンテンツ著作者の名前
    "width": "100%",コンテンツの幅
    "author_url": "http://blog.hatena.ne.jp/hatebuman/",コンテンツ著作者のプロフィールページなど
    "provider_url": "http://hatenablog.com",コンテンツ提供元のURL
    "version": "1.0",oEmbedのバージョン(2014年9月現在は1.0のみ)
    "provider_name": "Hatena Blog",コンテンツ提供元の名前
    "height": "190",コンテンツの高さ
    "html": "<iframe src=\"http://hatebuman.hatenablog.com/embed/2013/11/30/161605\" title=\"ボクがはてブマンになった理由 - はてブマンだブク\" scrolling=\"no\" frameborder=\"0\" style=\"width: 100%; height: 190px; max-width: 500px; margin: 10px 0px;\"><a href=\"http://hatebuman.hatenablog.com/entry/2013/11/30/161605\">ボクがはてブマンになった理由 - はてブマンだブク</a></iframe>",コンテンツの埋め込み用コード
    "url": "http://hatebuman.hatenablog.com/entry/2013/11/30/161605",コンテンツのパーマリンク
    "title": "ボクがはてブマンになった理由",コンテンツのタイトル
    "type": "rich"埋め込みコンテンツの種類
}

埋め込みコンテンツの出力

htmlの値をそのまま出力してみました。うーん、楽チンですな…。便利さに感動。このように、パーマリンクを、埋め込み用コンテンツに繋げることができるのがoEmbedというわけですねー。

サンプルの関数ライブラリ(PHP)

oEmbedを利用して埋め込み用コードを取得するサンプルプログラムを紹介します。カスタマイズの下地となるよう、シンプルにしてあるので、よろしかったら使ってやって下さい。

<?php
//パラメータを用意
$params = array(
	'endpoint' => 'http://hatenablog.com/oembed',
	'params' => array(
		'url' => 'http://hatebuman.hatenablog.com/entry/2013/11/30/161605',
		'format' => 'json',
	),
);

//関数ライブラリを利用してJSONデータを取得する
$data = scr_oembed($params);

//第1要素には取得したJSONデータが格納される
$json = $data[0];

//第2要素にはレスポンスヘッダーが格納される
$response = $data[1];

//JSONをオブジェクト型に変換
$obj = json_decode($json);

//埋め込み用HTMLを出力
echo $obj->html;

//関数ライブラリ [scr_oembed]
// 引数は連想配列で指定
// endpoint: エンドポイントを文字列(string)で指定
// params: パラメータを連想配列(array)で指定
function scr_oembed($item){
	//パラメータを整形
	$params = http_build_query($item['params'],'','&');

	//リクエストを送ってJSONを取得
	$json = @file_get_contents($item['endpoint'].'?'.$params);

	//第1要素にJSON、第2要素にレスポンスヘッダーを付けて返却
	return array( $json , $http_response_header );
}

oEmbedを採用しているサービスまとめ

この章では、oEmbedを採用しているサービスの中から日本でも有名なものを紹介していきます。

IFTTT

oEmbedを利用してIFTTTの埋め込み用コードを取得する方法です。公式リファレンスがなかったため、oEmbedの公式サイトに載っていた情報を元にしています。

リクエスト方法

JSONデータ

{
    "type": "rich",
    "version": "1.0",
    "html": "<a href=\"https://ifttt.com/view_embed_recipe/190824-auto-photo-bookof-locationthumbnail-ver\" target = \"_blank\" class=\"embed_recipe embed_recipe-l_39\" id= \"embed_recipe-190824\"><img src= 'https://ifttt.com/recipe_embed_img/190824' alt=\"IFTTT Recipe: Auto Photo Bookof LocationThumbnail ver connects instagram to evernote\" width=\"370px\" style=\"max-width:100%\"/></a><script async type=\"text/javascript\" src= \"//ifttt.com/assets/embed_recipe.js\"></script>",
    "width": 640,
    "height": 90,
    "title": "Auto Photo Bookof LocationThumbnail ver",
    "author_name": "syncer",
    "author_url": "https://ifttt.com/people/syncer",
    "provider_name": "IFTTT",
    "provider_url": "https://ifttt.com",
    "description": "Notes: 好きな場所を指定して下さい。\r\nそこで撮影された写真がEvernoteに保存されていきます。\r\n\r\nPlease specify the location.\r\nPhotos taken are saved in Evernote.\r\nYou can sea thumbnail image on note list.\r\n\r\n使い方 (How to use)\r\nhttp://syncer.jp/evernote-ifttt-auto-photobook"
}

埋め込みサンプル

Youtube

YoutubeもoEmbedに対応していて、動画の埋め込みコードの他、サムネイル画像も取得することができます。公式ブログのエントリーに、公式リファレンスが掲載されています。

リクエスト方法

JSONデータ

{
    "author_url": "http://www.youtube.com/user/nanblomovie",
    "provider_name": "YouTube",
    "thumbnail_height": 360,
    "html": "<iframe width=\"480\" height=\"270\" src=\"http://www.youtube.com/embed/dJCmnrIubCQ?feature=oembed\" frameborder=\"0\" allowfullscreen></iframe>",
    "height": 270,
    "title": "食べ方がいちいち癒されるヤギ",
    "thumbnail_width": 480,
    "version": "1.0",
    "type": "video",
    "width": 480,
    "provider_url": "http://www.youtube.com/",
    "author_name": "Yuta Arai",
    "thumbnail_url": "http://i.ytimg.com/vi/dJCmnrIubCQ/hqdefault.jpg"
}

埋め込みサンプル

サムネイル画像サンプル

Flickr

Flickrの埋め込みコードをoEmbedで取得する方法です。公式リファレンスはありませんでした。flickr、oEmbedとかで検索すると写真ページがヒットしてまう…。

リクエスト方法

パーマリンクを通常版と短縮版、どちらでも指定することができます。返却されるデータに違いはありません。

JSONデータ

Flickrの場合、埋め込み用コードを取得することはできません。urlthumbnail_urlなど、画像ファイルへのURLを元に自分で組み立てて下さい。

{
    "type": "photo",
    "title": "鳥取県旅行-20",
    "author_name": "Yuta Arai 0206",
    "author_url": "https://www.flickr.com/photos/yuta_arai_0206/",
    "width": "1024",
    "height": "768",
    "url": "https://farm9.staticflickr.com/8448/8008087593_cfe0a3a294_b.jpg",
    "web_page": "https://www.flickr.com/photos/yuta_arai_0206/8008087593/",
    "thumbnail_url": "https://farm9.staticflickr.com/8448/8008087593_cfe0a3a294_s.jpg",
    "thumbnail_width": 75,
    "thumbnail_height": 75,
    "web_page_short_url": "https://flic.kr/p/dcDxrK",
    "license": "All Rights Reserved",
    "license_id": 0,
    "version": "1.0",
    "cache_age": 3600,
    "provider_name": "Flickr",
    "provider_url": "https://www.flickr.com/"
}

画像サンプル

oEmbedを通して取得したJSONデータから、画像を出力したものです。

Vimeo

oEmbedを利用してVimeoの動画を埋め込む方法です。公式リファレンスは下記をご参考下さい。

リクエスト方法

Vimeoはビデオのパーマリンクが経路ごとに3種類存在します。これら全てをurlの値として指定することが可能です。取得できるデータに差異はありません。

パラメータ

VimeoはoEmbedに力を入れているようで、指定できるオプションパラメータが豊富です。下記に表にしてみました。

JSONデータ

{
    "type": "video",
    "version": "1.0",
    "provider_name": "Vimeo",
    "provider_url": "https://vimeo.com/",
    "title": "Japanese Sumo!",
    "author_name": "Yuta Arai",
    "author_url": "http://vimeo.com/arayutw",
    "is_plus": "0",
    "html": "<iframe src=\"//player.vimeo.com/video/87344826\" width=\"1280\" height=\"720\" frameborder=\"0\" title=\"Japanese Sumo!\" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>",
    "width": 1280,
    "height": 720,
    "duration": 40,
    "description": "at Fuji Safari Park.",
    "thumbnail_url": "http://i.vimeocdn.com/video/465371059_1280.jpg",
    "thumbnail_width": 1280,
    "thumbnail_height": 720,
    "video_id": 87344826,
    "uri": "/videos/87344826"
}

埋め込みサンプル

SlideShare

oEmbedを利用してSlideShareのスライドを埋め込む方法です。公式リファレンスは下記をご参考下さい。

リクエスト方法

私はSlideShareを利用したことがないため、サンプルのスライドには、私が好きなwebサービスpplogのものを利用させていただきました。

JSONデータ

{
    "title": "YAPC::Asia Tokyo 2014 前夜祭 pplog by @ppworks",
    "thumbnail_width": 170,
    "html": "<iframe src=\"http://www.slideshare.net/slideshow/embed_code/38446121\" width=\"427\" height=\"356\" frameborder=\"0\" marginwidth=\"0\" marginheight=\"0\" scrolling=\"no\" style=\"border:1px solid #CCC; border-width:1px; margin-bottom:5px; max-width: 100%;\" allowfullscreen> </iframe> <div style=\"margin-bottom:5px\"> <strong> <a href=\"https://www.slideshare.net/naotokoshikawa/yapcasia2014pplog\" title=\"YAPC::Asia Tokyo 2014 前夜祭 pplog by @ppworks\" target=\"_blank\">YAPC::Asia Tokyo 2014 前夜祭 pplog by @ppworks</a> </strong> from <strong><a href=\"http://www.slideshare.net/naotokoshikawa\" target=\"_blank\">Naoto Koshikawa</a></strong> </div>\n\n",
    "total_slides": 27,
    "provider_name": "SlideShare",
    "thumbnail_height": 128,
    "version_no": "1409221372",
    "provider_url": "http://www.slideshare.net",
    "width": 425,
    "height": 355,
    "version": "1.0",
    "conversion_version": 2,
    "slideshow_id": 38446121,
    "slide_image_baseurl_suffix": "-1024.jpg",
    "thumbnail": "//cdn.slidesharecdn.com/ss_thumbnails/yapcasia2014pplog-140828052148-phpapp01-thumbnail.jpg?cb=1409221372",
    "author_url": "http://www.slideshare.net/naotokoshikawa",
    "slide_image_baseurl": "//image.slidesharecdn.com/yapcasia2014pplog-140828052148-phpapp01/95/slide-",
    "type": "rich",
    "author_name": "Naoto Koshikawa"
}

埋め込みサンプル

SlideShareの埋め込みコードは、webサイトごとのスタイルシートの影響を受ける様子。strongのタグが使われるというのも、ちょっと気になっちゃいますな…。

App.net

oEmbedを利用してApp.netのコメントや写真を埋め込む方法です。公式リファレンスは下記をご参考下さい。

リクエスト方法

写真のパーマリンクは、投稿本文に表示されているURLを利用します。このURLにアクセスすると別のURLにリダイレクトされてしまいます。

JSONデータ(コメント)

{
    "provider_url": "https://app.net",
    "version": "1.0",
    "author_url": "https://alpha.app.net/arayu",
    "title": "愛犬の写真です。 https://photos.app.net/22918724/1",
    "url": "https://alpha.app.net/arayu/post/22918724",
    "provider_name": "App.net",
    "type": "link",
    "html": "<div><div data-post-body=\"\"><span itemscope=\"https://join.app.net/schemas/Post\">#24859;&#29356;&#12398;&#20889;&#30495;&#12391;&#12377;&#12290; <a href=\"https://photos.app.net/22918724/1\" target=\"_blank\" rel=\"nofollow\">https://photos.app.net/22918724/1</a></span></div><div data-post-annotations=\"\"><div data-oembed-type=\"photo\" data-annotation=\"net.app.core.oembed\"><p>image.jpg</p><p><a href=\"https://files.app.net/1/764248/aH5BfcGr4OBKej6BON4fU4vypRqh6SFkWqR2ReQxYcBn9A4x65cXnR8pOx0vkt9qWK-Ub9DbdDfjVIzgJP-ZrTKLrsu_IbuqyLZhO_hoxBLxblBmLNSuWB0xBQzK37E-QV4fNiHq77RX6v4Hldp8HbW6V5x5PQ927VcYqdrMWkC-1wiPFgFbSGkKjom0AEVMo\"><img width=\"200\" src=\"https://files.app.net/1/764248/aH5BfcGr4OBKej6BON4fU4vypRqh6SFkWqR2ReQxYcBn9A4x65cXnR8pOx0vkt9qWK-Ub9DbdDfjVIzgJP-ZrTKLrsu_IbuqyLZhO_hoxBLxblBmLNSuWB0xBQzK37E-QV4fNiHq77RX6v4Hldp8HbW6V5x5PQ927VcYqdrMWkC-1wiPFgFbSGkKjom0AEVMo/image_thumb_200s\" height=\"200\"></a></p><p>by <a href=\"https://alpha.app.net/arayu\">@arayu</a> via <a href=\"https://app.net\">App.net</a></p></div></div></div>",
    "author_name": "arayu"
}

JSONデータ(写真)

App.netでは添付画像のURLを指定することで、その画像に関するかなり詳細なデータを取得することができます。

{
    "provider_url": "https://app.net",
    "thumbnail_large_url_immediate_expires": "2014-09-03T20:00:00Z",
    "embeddable_url": "https://photos.app.net/22918724/1",
    "author_name": "@arayu",
    "height": 1024,
    "thumbnail_large_width": 640,
    "thumbnail_large_url_immediate": "https://d36tc8clsz1tk5.cloudfront.net/adn-uf-01/UK/Ae/8R/UKAe8RjydS0zfiKoLOe8RCpgPRqhZ-qlSirqlMVSczc?response-cache-control=public%2C%20max-age%3D7200%2C%20s-maxage%3D172800&response-content-disposition=inline%3B%20filename%2A%3DUTF-8%27%27image_image_thumb_960r.jpg&Expires=1409774400&Signature=mmha9zrODykDLKMQFJZ2Zr0iNQmoFK8OKXcjHgmpMZGuZ7OPnJbNJwynMlXbxJEoRo-bE8Ybufr3YzV1j2cU2HMVlD~eryKk9fhrapcR8xmjcYM-CtJjOCJ0D3Vzv5oczTgNAb6sWZA~aUV8q9DDbkhAxfaolLXGxzJuUzgWp5A_&Key-Pair-Id=APKAIWNGPWT6YVKFBWJA",
    "thumbnail_url": "https://files.app.net/1/764248/aLI6pwbELGYh84sb4zVrBFsxP-uIxjp-o83tbFCtFfrdoSnBIYNxRdoTiG03-bxHPhwf5k4yE7uQn-GGbTFao9WmSZq9iuhcFpXNdZFOmz5-I5r8HvicWCMvyFDdKrhjcVNGjcmZd1yrJOfa5ZtfNOoCQ0VmoQMlCD0IBrYW2IOi-y2GWhcwJuWmY4kYDp99e/image_thumb_200s",
    "file_id": "764248",
    "url_secure": null,
    "file_token_read": "aLI6pwbELGYh84sb4zVrBFsxP-uIxjp-o83tbFCtFfrdoSnBIYNxRdoTiG03-bxHPhwf5k4yE7uQn-GGbTFao9WmSZq9iuhcFpXNdZFOmz5-I5r8HvicWCMvyFDdKrhjcVNGjcmZd1yrJOfa5ZtfNOoCQ0VmoQMlCD0IBrYW2IOi-y2GWhcwJuWmY4kYDp99e",
    "thumbnail_height": 200,
    "thumbnail_url_immediate_expires": "2014-09-03T20:00:00Z",
    "thumbnail_large_height": 640,
    "url_immediate": "https://d36tc8clsz1tk5.cloudfront.net/adn-uf-01/KR/qm/5D/KRqm5DwDTw26ZiKakdax9SpgPRqhZ-qlSirqlMVSczc?response-cache-control=public%2C%20max-age%3D7200%2C%20s-maxage%3D172800&response-content-disposition=inline%3B%20filename%2A%3DUTF-8%27%27image.jpg&Expires=1409774400&Signature=Xa6K7gmhDOQrE5~2QmR~o2hj89nAQ6cTT64S29YAyGvaLWBAoq0JGKL34jXgNlUSINkD3brf9Zxzljg4N-g13rxUjmAwiQuJBFm~m8YVoeNYSG1YdYar1dsqi~u-Mp6I8-frA1lSAxBlFlS7qo~MrFv3BqFdCzcPMKDUeDbuDTU_&Key-Pair-Id=APKAIWNGPWT6YVKFBWJA",
    "thumbnail_url_secure": null,
    "title": "image.jpg",
    "url": "https://files.app.net/1/764248/aLI6pwbELGYh84sb4zVrBFsxP-uIxjp-o83tbFCtFfrdoSnBIYNxRdoTiG03-bxHPhwf5k4yE7uQn-GGbTFao9WmSZq9iuhcFpXNdZFOmz5-I5r8HvicWCMvyFDdKrhjcVNGjcmZd1yrJOfa5ZtfNOoCQ0VmoQMlCD0IBrYW2IOi-y2GWhcwJuWmY4kYDp99e",
    "thumbnail_large_url": "https://files.app.net/1/764248/aLI6pwbELGYh84sb4zVrBFsxP-uIxjp-o83tbFCtFfrdoSnBIYNxRdoTiG03-bxHPhwf5k4yE7uQn-GGbTFao9WmSZq9iuhcFpXNdZFOmz5-I5r8HvicWCMvyFDdKrhjcVNGjcmZd1yrJOfa5ZtfNOoCQ0VmoQMlCD0IBrYW2IOi-y2GWhcwJuWmY4kYDp99e/image_thumb_960r",
    "url_immediate_expires": "2014-09-03T20:00:00Z",
    "thumbnail_width": 200,
    "width": 1024,
    "version": "1.0",
    "author_url": "https://alpha.app.net/arayu",
    "provider_name": "App.net",
    "type": "photo",
    "html": "<div><div data-post-body=\"\"><span itemscope=\"https://join.app.net/schemas/Post\">&#24859;&#29356;&#12398;&#20889;&#30495;&#12391;&#12377;&#12290; <a href=\"https://photos.app.net/22918724/1\" target=\"_blank\" rel=\"nofollow\">https://photos.app.net/22918724/1</a></span></div><div data-post-annotations=\"\"><div data-oembed-type=\"photo\" data-annotation=\"net.app.core.oembed\"><p>image.jpg</p><p><a href=\"https://files.app.net/1/764248/aLI6pwbELGYh84sb4zVrBFsxP-uIxjp-o83tbFCtFfrdoSnBIYNxRdoTiG03-bxHPhwf5k4yE7uQn-GGbTFao9WmSZq9iuhcFpXNdZFOmz5-I5r8HvicWCMvyFDdKrhjcVNGjcmZd1yrJOfa5ZtfNOoCQ0VmoQMlCD0IBrYW2IOi-y2GWhcwJuWmY4kYDp99e\"><img width=\"200\" src=\"https://files.app.net/1/764248/aLI6pwbELGYh84sb4zVrBFsxP-uIxjp-o83tbFCtFfrdoSnBIYNxRdoTiG03-bxHPhwf5k4yE7uQn-GGbTFao9WmSZq9iuhcFpXNdZFOmz5-I5r8HvicWCMvyFDdKrhjcVNGjcmZd1yrJOfa5ZtfNOoCQ0VmoQMlCD0IBrYW2IOi-y2GWhcwJuWmY4kYDp99e/image_thumb_200s\" height=\"200\"></a></p><p>by <a href=\"https://alpha.app.net/arayu\">@arayu</a> via <a href=\"https://app.net\">App.net</a></p></div></div></div>",
    "thumbnail_url_immediate": "https://d36tc8clsz1tk5.cloudfront.net/adn-uf-01/yJ/5E/Eu/yJ5EEuqYVQT9qXs_p3-wUipgPRqhZ-qlSirqlMVSczc?response-cache-control=public%2C%20max-age%3D7200%2C%20s-maxage%3D172800&response-content-disposition=inline%3B%20filename%2A%3DUTF-8%27%27image_image_thumb_200s.jpg&Expires=1409774400&Signature=W-kjehuZ6EII~6XR8XHiVArs9eZ6cMF-ia5axXIjrDJglxEZQlbMR3dnBiWovsnP7GUuwF~TzazagpxBeS53P~mFQmtT76~3ypPr1ddaDD7Vn5dXwno3uLeQ~w-BcnB5tDgxDj~~ge1WMMc7u4Ki4mXP6DVRWiuZYjGReP0kgg0_&Key-Pair-Id=APKAIWNGPWT6YVKFBWJA"
}

埋め込みサンプル

埋め込みコンテンツに関しては、コメント、写真、いずれのパーマリンクを指定しても同じ内容のものが出力されます。

Instagram

oEmbedを利用してInstagramの写真、動画を埋め込む方法です。公式リファレンスは下記をご参考下さい。

リクエスト方法

JSONデータ

うーむ、Instagramの場合、埋め込み用のHTMLコードがJSONデータに含まれないようです。このJSONデータの材料から埋め込みコードを作成することはできません。oEmbedとは…。その代わり、画像ファイルの生URLなどを取得することができるのは便利ですね。

{
    "provider_url": "http://instagram.com/",
    "media_id": "792026015776036142_295878252",
    "title": "竹の塚霊園にある、おきあがり観音です。",
    "url": "http://photos-f.ak.instagram.com/hphotos-ak-xfa1/10597292_910228762338853_1220151813_n.jpg",
    "author_name": "arayutw",
    "height": 640,
    "width": 640,
    "version": "1.0",
    "author_url": "http://instagram.com/arayutw",
    "author_id": 295878252,
    "type": "photo",
    "provider_name": "Instagram"
}

ということで、埋め込む場合は、oEmbedに指定するパーマリンクの後尾に、embed/を付けましょう…。これが埋め込み用のURLとなります。

埋め込みサンプル

SoundCloud

oEmbedを利用してSoundCloudの音楽を埋め込む方法です。公式リファレンスは下記をご参考下さい。

リクエスト方法

JSONデータ

{
    "version": 1,
    "type": "rich",
    "provider_name": "SoundCloud",
    "provider_url": "http://soundcloud.com",
    "height": 400,
    "width": "100%",
    "title": "Flickermood by Forss",
    "description": "From the Soulhack album,&nbsp;recently featured in this ad <a href=\"https://www.dswshoes.com/tv_commercial.jsp?m=october2007\">https://www.dswshoes.com/tv_commercial.jsp?m=october2007</a> ",
    "thumbnail_url": "http://i1.sndcdn.com/artworks-000067273316-smsiqx-t500x500.jpg?e76cf77",
    "html": "<iframe width=\"100%\" height=\"400\" scrolling=\"no\" frameborder=\"no\" src=\"https://w.soundcloud.com/player/?visual=true&url=http%3A%2F%2Fapi.soundcloud.com%2Ftracks%2F293&show_artwork=true\"></iframe>",
    "author_name": "Forss",
    "author_url": "http://soundcloud.com/forss"
}

埋め込みサンプル

Twitter

oEmbedを利用してTwitterのつぶやきを埋め込む方法です。個人的に、Twitterが提供するAPIの中で認証が必要ないものとして印象的。公式リファレンスは下記をご参考下さい。

リクエスト方法

パラメータ

Twitterもオプションパラメータが豊富です。パーマリンク、または投稿IDでコンテンツを指定することができます。

JSONデータ

{
    "cache_age": "3153600000",
    "url": "https://twitter.com/arayutw/statuses/507100153845530624",
    "height": null,
    "provider_url": "https://twitter.com",
    "provider_name": "Twitter",
    "author_name": "あらゆ",
    "version": "1.0",
    "author_url": "https://twitter.com/arayutw",
    "type": "rich",
    "html": "<blockquote class=\"twitter-tweet\"><p>桂浜水族館で喧嘩があった模様。興奮した両者は取っ組み合いになり、一方が水中に突き落とされました。 <a href=\"http://t.co/kDma6ANXMk\">pic.twitter.com/kDma6ANXMk</a></p>&mdash; あらゆ (@arayutw) <a href=\"https://twitter.com/arayutw/status/507100153845530624\">September 3, 2014</a></blockquote>\n<script async src=\"//platform.twitter.com/widgets.js\" charset=\"utf-8\"></script>",
    "width": 550
}

埋め込みサンプル

桂浜水族館で喧嘩があった模様。興奮した両者は取っ組み合いになり、一方が水中に突き落とされました。 pic.twitter.com/kDma6ANXMk

— あらゆ (@arayutw) September 3, 2014

はてなブログ

最後にはてなブログを紹介。こうして見ると、oEmbedへの対応は日本発のwebサービスの中ではかなり先進的ですねー。他のサイトも続いてほしいものです。公式リファレンスは下記ページです。

リクエスト方法

JSONデータ

{
    "author_name": "arayutw",
    "width": "100%",
    "author_url": "http://blog.hatena.ne.jp/arayutw/",
    "provider_url": "http://hatenablog.com",
    "version": "1.0",
    "provider_name": "Hatena Blog",
    "height": "190",
    "html": "<iframe src=\"http://arayutw.hatenablog.com/embed/2013/12/18/200240\" title=\"はてなスター数全件取得 - arayutwのブログ\" scrolling=\"no\" frameborder=\"0\" style=\"width: 100%; height: 190px; max-width: 500px; margin: 10px 0px;\"><a href=\"http://arayutw.hatenablog.com/entry/2013/12/18/200240\">はてなスター数全件取得 - arayutwのブログ</a></iframe>",
    "url": "http://arayutw.hatenablog.com/entry/2013/12/18/200240",
    "title": "はてなスター数全件取得",
    "type": "rich"
}

埋め込みサンプル

oEmbedの関連リンク集

oEmbedの利用に役立つwebサイトをまとめました。

最新情報

公式が発信している最新情報をチェックできる場所です。

言語別のライブラリ

oEmbedの利用が容易になるライブラリを各言語でまとめました。