こんにちは。LIG の Web 事業部でマネージャーをしているさささんです。
（最近は、さっさんと呼ばれることが多いです）
LIG は創業時から Web 制作をおこなっている企業です。今年で 11 期目を迎え、LIG はメンバーが入れ替わりながらも 10 年間に渡り Web 制作をやってきたことになります。10 年の月日はあっというまであり、LIG 自身も今なお変化を続けていますが、Web に関連する技術や手法も変化を続けています。
そんな事業展開をしてきたなかで発見したもののひとつとして、今回はすぐに使える埋め込みパーツを紹介します。
※埋め込み方法は公式のドキュメントを参考にしてください
目次
SNS投稿の埋め込み
主に記事投稿において、SNS 上の投稿を引用する際に使うことが多いです。これも無許可で使用すると問題になりますので、他人のコンテンツを引用するときは、必ず許可を取りましょう。
まずは流行りの Instagram です。今回は LIG のセールスを担当しているジョニーの写真で試してみました。
＜公式ドキュメント＞
https://www.instagram.com/developer/embedding/
LIG 公式の Twitter アカウントで投稿されている内容を埋め込んでみました。動画の再生もできます。
今日の上野の空はなんだかざわついてて、嫌な予感がするクポォ pic.twitter.com/p0UnoUlK08
— 株式会社LIG公式アカウント (@LIG_J) 2017年6月21日
＜公式ドキュメント＞
https://dev.twitter.com/web/embedded-tweets
Facebook も試してみます。LIG 取締役づやのアイキャッチが印象的だったので、埋め込んでみました。
＜公式ドキュメント＞
https://developers.facebook.com/docs/plugins/embedded-posts?locale=ja_JP
写真共有サイトの 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 は、勉強会やセミナーの資料などが 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 です。あとで読みたい人のために設置してみると良いでしょう。再訪してもらえるかも？！
＜公式ドキュメント＞
https://getpocket.com/publisher/button
まとめ
埋め込みパーツ（ウィジェット）の数々を紹介しました。比較的にカンタンにコードを生成して貼り付けることができるので、まずは試しに活用してみてはどうでしょう。ただし、他人のコンテンツを利用・引用する場合は許可を取りましょうね。
LIGはWebサイト制作を支援しています。ご興味のある方は事業ぺージをぜひご覧ください。
