【超簡単スマホ対応!】動画の埋め込み方法!Facebook&Instagram編

LINEで送る
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動画活用のお役に立てましたら幸いです!

LINE@本格始動!モバイルエールWEB活用研究会LINE校

6月末まで!モバイルエールLINE@登録メンバー限定交流会でお配りした「2018年これだけは押さえておきたいWEB活用事情5つのポイント」を橘のプチ解説付きにしてプレゼント中。
お友達追加でぜひ繋がってくださいね♪

友だち追加

タップして追加されない場合はID検索でも追加可能。LINEIDは「@vlh3102w」です。

メルマガもやってます!

モバイルエールメルマガ登録はこちら☆WEB活用のヒント・セキュリティ情報お届け中
↓↓↓

モバイルエールメルマガ登録はこちら

★気軽に学べる!SNS部活動やってます!次回は6月29日(金)オンライン会議ツール実践!そして7月20日(金)はLINE@をじっくりしっかりプレミアム部活動開催!お気軽にご参加下さい

よろしければシェアお願いします!

Pocketに保存 はてブする Google+ Feedly
kijibannar

LINE@で活用情報配信中!

お問い合わせはこちら

モバイルエールお問い合わせ

女性起業家応援ラジオやってます!

モバイルエール ゆめのたねラジオ「情勢起業家あるある情報局」ホームページはこちら
mobileyellfacebook
mobileyellgplus
mobileyelltwitter
mobileyellyoutube

パワーママで紹介されました! モバイルエールがパワーママでご紹介していただきました

モバイルエールYOUTUBE
WEB活用動画配信中!
チャンネル登録はこちら!!
↓↓

無料メルマガ配信中!

モバイルエール「小さなお店のためのWEB活用のヒント」メルマガ配信中

参加費1000円!SNS大人の部活動部長やってます!

毎月第2金曜13時から14時半!
大阪谷町四丁目すぐのルームで交流あり、実践ありのSNS活用部活動開催中☆
参加ご希望・お問い合わせはこちら!

WEB活用セミナー風景