Tweet

Pocket

みなさんこんにちは！小さなお店のSNS集客がうまくいくホームページ制作応援！モバイルエール橘です。

橘、今年のスタートは「コスト0円から始める！SNS動画活用」の講師として西宮商工会議所の講師を担当させていただいて、個人事業の皆様とスマホとSNSを使った集客について実践レクチャー中。

数年前までは、動画といえばYOUTUBE活用1色でしたが、昨今はFacebook,Instagramの動画活用も目が離せません！

SNSの動画をホームページに埋め込むことでホームページをよりよいコンテンツにするという活用法もぜひ覚えていただくとよいのではと思っています！

ということで今日は、Facebook&Instagramの動画の埋め込み方法をご紹介したいとおもいます！

ちなみに、フェイスブックとインスタグラムの動画埋め込みは、そのまま張り付けるとスマホ対応していないので画面からはみ出てしまうので注意が必要です。

なので、今回はスマホ対応した動画にアレンジして貼り付ける方法をご案内したいと思います。

貼り付けたい動画の投稿記事に行き「・・・」をタップ

この操作はパソコンで行います。

まずはフェイスブック、インスタグラム共に貼り付けたい動画を開き、Facebookは投稿右上、Instagramは右下の「・・・」をクリック

「埋め込みする」をクリック

ここからはほぼどちらも同じ操作なので、フェイスブックのタイプでお伝えします。

メニュー「埋め込み」を選択

埋め込みコードをすべてコピー

記号のような長い文字列（コードといいます）をすべてコピーしてください。

投稿を含めて、ホームページやブログに張り付けたい方は「投稿全体を含める」をチェックしたうえでコピーをしてください。任意です笑

スマホ対応のコードに変換するため、スマホ対応変換ツールを開きます

フェイスブックやインスタグラムの公式の埋め込みコードはスマホ対応していません。なので、もしホームページなどがスマホ対応のものであれば、そのまま張り付けるとスマホで訪問者がアクセスしたときに、画面からはみ出してしまいます。

なので、1工夫。今回は簡単スマホ対応変換ツール「Embed Responsively」をご紹介したいと思います。

この「Embed Responsively」は、インスタグラムやフェイスブックの動画埋め込みコードだけでなく、YOUTUBE、Googlemapなども、コードを貼り付けてボタン1つでスマホ対応コードにしてくれる便利ツールです。

まずは、Embed Responsivelyにアクセス。

今回は「Generic iFrame」を選んで、コードをはりつけて「embed」の青いボタンを押してください。

生成された変換コードをコピー

変換が終わると画面下にスマホ対応した動画埋め込みコードが表示されますので、その全体をそのままコピーします。

さあ！後はホームページやブログ記事にはりつけます

いよいよ佳境です！

最後はご自身のホームページやブログにコードを貼り付けるだけ。

コードなので「テキストモード」で貼り付けるようにしましょう。

私はワードプレスユーザーなので、参考例にワードプレスの場合の貼り付け方を。こんな感じです。

貼り付けられたらプレビューなどでチェックを。うまくいくと下記のように表示されます。ので投稿、公開してみてください。

まとめ

いかがでしょうか？

そのまま埋め込みをしてしまうとスマホ対応になっていないので注意が必要ですが、この方法なら簡単にどんなキャリアからでもみなさんのSNS動画を活用することができます。

実際の表示例として、下記に私のフェイスブックに投稿した動画を埋め込みご紹介してみたいともいます。

定期開催している、先日行いました参加費1000円のSNS部活動の模様です☆

YOUTUBEに動画をアップするのが手間だと感じる方には、SNS動画は手軽で導入活用におすすめです！

うまくできない、活用相談にのってほしい、などございましたらお気軽にご相談ください。

皆様のSNS動画活用のお役に立てましたら幸いです！