カンタンに使える埋め込みパーツを紹介します

さささん


カンタンに使える埋め込みパーツを紹介します

こんにちは。LIG の Web 事業部でマネージャーをしているさささんです。
(最近は、さっさんと呼ばれることが多いです)

LIG は創業時から Web 制作をおこなっている企業です。今年で 11 期目を迎え、LIG はメンバーが入れ替わりながらも 10 年間に渡り Web 制作をやってきたことになります。10 年の月日はあっというまであり、LIG 自身も今なお変化を続けていますが、Web に関連する技術や手法も変化を続けています。

そんな事業展開をしてきたなかで発見したもののひとつとして、今回はすぐに使える埋め込みパーツを紹介します。
※埋め込み方法は公式のドキュメントを参考にしてください

▼目次

 

SNS投稿の埋め込み

主に記事投稿において、SNS 上の投稿を引用する際に使うことが多いです。これも無許可で使用すると問題になりますので、他人のコンテンツを引用するときは、必ず許可を取りましょう。

 

Instagram

まずは流行りの Instagram です。今回は LIG のセールスを担当しているジョニーの写真で試してみました。

<公式ドキュメント>
https://www.instagram.com/developer/embedding/

 

Twitter

LIG 公式の Twitter アカウントで投稿されている内容を埋め込んでみました。動画の再生もできます。

<公式ドキュメント>
https://dev.twitter.com/web/embedded-tweets

 

Facebook

Facebook も試してみます。LIG 取締役づやのアイキャッチが印象的だったので、埋め込んでみました。

<公式ドキュメント>
https://developers.facebook.com/docs/plugins/embedded-posts?locale=ja_JP

 

Pinterest

写真共有サイトの Pinterest (ピンタレスト)にも埋め込みコードがありました。


この他にも、保存ボタン、フォローボタン、ボードやプロフィールのウィジェットも提供しています。

<公式ドキュメント>
https://developers.pinterest.com/tools/widget-builder/?type=pin

 

動画サービスの埋め込み

YouTube

動画サイトの定番になっている YouTube です。今回は LIG で音楽活動をしている「旅と音楽」の動画を貼り付けてみました。

<公式ドキュメント>
https://support.google.com/youtube/answer/171780?hl=ja

Vimeo

Vimeo も埋め込みコードを提供しています。これは旧オフィス時代のアクセス方法の動画です。
※ LIG にお越しいただく際は、参考にしないようにお願いいたします。今のオフィスは上野にあります

株式会社LIGまでの道のり from gosan on Vimeo.

<公式ドキュメント>
https://help.vimeo.com/hc/ja/articles/224969968-Embedding-videos-overview

 

地図の埋め込み

Googleマップ

Google マップを埋め込んでいる Web サイトは非常に多いですね。埋め込みもとてもカンタンです。埋め込みサイズが縦横に対してピクセル単位でカスタマイズできます。
ちなみに Google マップは、スクリーンショットなどによるキャプチャー画像をコンテンツ上で使用することを禁じています。なので、このようにマップ編集を行ったうえで埋め込むようにしましょう。

<公式ドキュメント>
https://support.google.com/maps/answer/144361?co=GENIE.Platform%3DDesktop&hl=ja

 

カレンダーの埋め込み

Googleカレンダー

Google カレンダーも埋め込めます。今回は LIG が運営しているシェアオフィス&コワーキングスペース「いいオフィス」のイベントカレンダーを埋め込んでみました。

<公式ドキュメント>
https://support.google.com/calendar/answer/41207?hl=ja

 

ソースコードの埋め込み

CodePen

最近はプログラムソースもいい感じに埋め込めるようになりました。エンジニアたちは CodePen をよく使っていますね。HTML と CSS と JS を切り替えられることに加えて、結果も出力してくれる優秀な埋め込みウィジェットです。


※LIGのフロントエンドエンジニア ハルが書いたコードです

<公式ドキュメント>
https://blog.codepen.io/documentation/features/embedded-pens/
※埋め込み方法は上記ページ内の解説動画がわかりやすいです

 

スライドの埋め込み

SlideShare

SlideShare は、勉強会やセミナーの資料などが Web 上で公開されています。SlideShare で公開されている資料も埋め込むことができてしまいます。

<公式ドキュメント>
https://www.linkedin.com/help/slideshare/answer/53157

 

ソーシャルボタンの埋め込み

ここ数年で普及した各種ソーシャルボタンもカンタンに埋め込めます。代表的なソーシャルボタンを紹介します。

Twitterのボタン

ツイートボタン

Twitter で Web サイトを共有する際に使いますね。

<公式ドキュメント>
https://dev.twitter.com/web/tweet-button

フォローボタン

Twitter アカウントのフォローをお願いしたいときに埋め込んでみてはいかがでしょうか。

<公式ドキュメント>
https://dev.twitter.com/web/follow-button

 

Facebookのボタン

Likeボタン

とりあえず「いいね」してほしい場合は埋め込みましょう。

<公式ドキュメント>
https://developers.facebook.com/docs/plugins/like-button

Shareボタン

「いいね」だけではなく、投稿をシェアしてほしい場合は埋め込みましょう。

<公式ドキュメント>
https://developers.facebook.com/docs/plugins/share-button

 

Google+1ボタン

Google + バージョンの「いいね」と考えてもらえればと思います。

<公式ドキュメント>
https://developers.google.com/+/web/+1button/

 

はてなブックマークボタン

はてなブックマークで、ブックマーク保存してもらうために設置してみてはいかがでしょうか。

<公式ドキュメント>
http://b.hatena.ne.jp/guide/bbutton

 

LINEで送るボタン

最近は PC でも対応しているので、これまで以上に「 LINE で送る」が使われるようになるかもしれません。

<公式ドキュメント>
https://media.line.me/ja/how_to_install#lineitbutton

 

Pocket

「あとで読む」サービスの Pocket です。あとで読みたい人のために設置してみると良いでしょう。再訪してもらえるかも?!

<公式ドキュメント>
https://getpocket.com/publisher/button

 

まとめ

埋め込みパーツ(ウィジェット)の数々を紹介しました。比較的にカンタンにコードを生成して貼り付けることができるので、まずは試しに活用してみてはどうでしょう。ただし、他人のコンテンツを利用・引用する場合は許可を取りましょうね。

 

さささん
この記事を書いた人
さささん

ディレクター

おすすめ記事

Recommended by