Twitter、Instagram、YouTube、GoogleMapなどサイトにあらゆるものを埋め込むことができるJS「embed.js」

Twitter、Instagram、YouTube、GoogleMapなどサイトにあらゆるものを埋め込むことができるスクリプトを紹介します。

YouTube、Vimeo、Instagram、Google Mapなどサイトにあらゆるものを埋め込むことができるJS「embed.js」

embed.jsは、Twitter、Instagram、YouTube、GoogleMapなどサイトにあらゆるものを埋め込むことができるJavaScriptです。

以前にも紹介しましたが、今回、大幅にバージョンアップしました。

スポンサーリンク

embed.jsの特徴

動画、写真、オーディオ、コードまで、あらゆるものをサイトに埋め込むことができます。

埋め込み可能なサービス一覧

  1. :smile::heart:などのテキストを記述することで絵文字の埋め込みが可能です。
  2. 外部サービスの埋め込みは本文中にhttps://www.youtube.com/watch?v=bQRLVxZHKPs のようにプレーンテキストでURLを記述して、あとはスクリプトを実行するだけです。余分なコードは必要ありません。
  3. Twitterのツイートを埋め込むことができます。
  4. Googleマップの地図を埋め込むことができます。(Google Maps Embed APIのキーが必要です)
  5. YouTubeの動画を埋め込むことができます。(YouTube Data APIのキーが必要です)
  6. Vimoe、Vine、Ustream、DAilyMotion、LiveLeakなどの動画を埋め込むことができます。
  7. Instagram、Flickrなどの写真を埋め込むことができます。
  8. Spotify、SoundCloudなどのオーディオを埋め込むことができます。
  9. GitHubを埋め込むことができます。
  10. CodePen、JSFiddle、JS Bin、Ideone、Plunkerを埋め込むことができます。
  11. コードをシンタクスハイライトで表示することができます。
  12. 本文中のURLテキストを自動的に認識してリンクをつけることができます。また、bit.ly, buff.lyなどの短縮URLにも対応しています。
  13. 画像(gif|jpg|jpeg|tiff|png|svg|webp)、オーディオ(wav|mp3|ogg)、動画( ogv|webm|mp4)を埋め込むことができます。
  14. マークダウンで記述した内容を表示できます。

embed.jsのデモ

デモページに実装してみました。

サイトに絵文字を埋め込むことができます。

絵文字

YouTubeやVimeoの埋め込みでは、再生回数や動画に対するlikeの数を表示することができます。

YouTubeとVimeoの埋め込み

Instagramを埋め込みます。

Instagramの埋め込み

Flickrでは、複数の写真のスライド表示が可能です。

Flickrの埋め込み

SoundCloudやSpotifyなどのミュージックオーディオを埋め込みます。

Soundcloudの埋め込み

Googleマップを埋め込みます。

GoogleMapsの埋め込み

embed.jsの使い方

デモページをベースにembed.jsの使い方を紹介します。

ダウンロード

サイトの「DONWLOAD」ボタンからZIPファイルをダウンロードします。

ダウンロード

ダウンロードしたZIPファイルを展開したら、「dist」フォルダに入っている「embed.min.css」、「embed.min.js」、「assets」フォルダを使います。

assetsフォルダ

「assets」フォルダは「embed.min.css」と同じ階層にアップロードします。

CSS

「embed.min.css」、外部サイトから「//fonts.googleapis.com/css?family=Source+Sans+Pro:400,300」と「font-awesome.min.css」を読み込みます。

HTML

HTMLはシンプルです。外部サービスを埋め込む場合はURLをテキストで記述します。URLのあとに、半角スペースか改行をつけないとうまく動作しないので注意してください。

JavaScript

「embed.min.js」を読み込みます。

スクリプトを実行します。

input: document.getElementById('examples')で対象を選択します。

googleAuthKey : 'AIzaSyCqFouT8h5DKAbxlrTZmjXEmNBjC69f0ts'にはご自身で取得したAPIキーを記入します。GoogleマップはGoogle Maps Embed API、YouTubeはYouTube Data APIを使用します。

参考情報

まとめ

YouTube、Vimeo、Instagram、Twitter、Googleマップなどサイトに様々なものを埋め込むことができるJavaScript、embed.jsを紹介しました。HTMLの本文中にプレーンテキストのURLを記述して、スクリプトを実行するだけで埋め込みができます。余計なコードが不要で、シンプルに使うことができます。

人気の記事

日本語対応の無料WordPressテーマ10選
日本語対応の無料WordPressテーマ10選
2017年におすすめしたい、日本語対応の有料WordPressテーマ10選
2017年におすすめしたい、日本語対応の有料WordPressテーマ10選
アドセンス運用に最適なWordPressテーマ3選
アドセンス運用に最適なWordPressテーマ3選
スポンサーリンク

関連記事 & スポンサーリンク

コメント

  • Posted on
  • Updated on
  • Views 871