スマートフォンサイトを表示する

  1. TOP
  2. ホームページのクオリティアップ術:運用編 : 第5回 Instagram・Facebook・Twitterをホームページに埋め込んで表示する

エキスパートコラム

ホームページのクオリティアップ術:運用編(全8回)

第5回:Instagram・Facebook・Twitterをホームページに埋め込んで表示する

執筆:赤間 公太郎(株式会社マジカルリミックス)

2016年11月21日更新

  • このエントリーをはてなブックマークに追加

閲覧数949views

このコラムをPDF形式でダウンロードする

"ホームページのクオリティアップ術:運用編"のコラムを担当する、マジカルリミックスの赤間です。
全8回のこのコラムでは、ホームページの運用に役立つサービスやその利用方法をご紹介していきます。

便利な無料のWebサービスを活用して、効率よく質の高いホームページを目指しましょう。

今回はInstagram・Facebook・Twitterの投稿をホームページに埋め込んで表示するための手法を解説します。

これらのサービスを活用している人も多いのではないでしょうか?現在では、ホームページと併用して情報発信をするケースが少なくありません。ホームページに、情報の付加価値としてSNSへ投稿したものを埋め込んでみましょう。

Instagram・Facebook・Twitterの埋め込み

「Instagram」「Facebook」「Twitter」は、SNSでは欠かせない存在となった人気サービスです。これらのサービスに投稿した画像や文章をホームページに表示する方法をご紹介します。

Instagramに投稿した写真の埋め込み方法

「Instagram」は、写真や動画を共有できる人気のサービスです。Instagramのアカウントを持っていない場合は、アカウントが必要になります。アカウントの登録は公式ホームページまたは、アプリから行いましょう。

Instagram公式ホームページ

埋め込みに必要なコードの取得

まずは、Instagramにログインして、自身のアカウントページを表示します。
アカウントページは、ログイン後、右上にあるアイコンをクリックすると移動します。

そして、あらかじめスマートフォンなどから投稿した写真の右下にある[…]を押して、表示されるメニューから[埋め込み]をクリックすると、写真を埋め込むためのソースコードが生成されるので、[埋め込みコードをコピー]をクリックします。

ソースコードをコピーしたら、準備完了です。

※ソースコードをコピーする際、[キャプションを追加]のチェックを外して埋め込みコードをコピーすると、ホームページに写真を埋め込んだ際、写真投稿時につけたキャプション(テキスト説明)を非表示にできます。

ホームページに埋め込む

Jimdoのホームページ編集画面にログインします。
Instagramの写真を埋め込みたいページで[+コンテンツを追加]ボタンをクリックし[…その他のコンテンツ&アドオン]ボタンをクリックして、表示される項目の中から[ウィジェト / HTML]をクリックします。

挿入される入力欄に前項でコピーしたInstagramの埋め込みコードを貼り付けて[保存]ボタンをクリックすると、ホームページにInstagramの写真が表示されます。

Instagramの写真を埋め込むと、いいね!ボタンやコメント欄も一緒に表示されます。ホームページの閲覧者がいいね!したりコメントをつけることで、ユーザーとの交流が活発化しますし、アクセス強化にもつながります。

Facebookの投稿を埋め込む方法

Facebookでは、投稿の右上にある[ ∨ ]ボタンをクリックして、表示されるメニューから[埋め込み]を選択し、表示されるソースコードをコピーします。

前項と同じく、ホームページの編集画面で[ウィジェット / HTML]項目を挿入し、コピーしたFacebookの埋め込みコードを貼り付けると、投稿が表示されます。

Twitterの投稿を埋め込む方法

Twitterでは、それぞれの投稿についている[…]ボタンをクリックし、表示されるメニューから[ツイートをサイトに埋め込む]をクリックして、表示されるソースコードをコピーします。

前項と同じく、ホームページの編集画面で[ウィジェット / HTML]項目を挿入し、コピーしたTwitterの埋め込みコードを貼り付けると、投稿が表示されます。

まとめ

固定的な情報が多いホームページは、更新頻度が低くなりがちです。SNSでの投稿をホームページに埋め込むことで、閲覧者がその投稿をシェアしたりコメントをつけることができるため、コネクションのきっかけが生まれます。

また、投稿を見てもらう入り口を増やすという意味でもホームページとSNSの連携は積極的に行うとよいでしょう。

次回は、「専門知識や特別なソフトは不要!Webブラウザだけで、デザインセンスのよいチラシを作成する方法」をご紹介します(つづく)。

  • このエントリーをはてなブックマークに追加
このコラムをPDF形式でダウンロードする

赤間 公太郎(あかま・こうたろう)

赤間 公太郎(あかま・こうたろう)

株式会社マジカルリミックス 代表取締役CEO/JimdoExpert
http://www.magical-remix.co.jp/
http://www.kotalog.net/

宮城県出身。IT関連の専門学校を卒業後、仙台のデザイン会社に入社。Webサイトのデザイン・コーディングを中心に従事。2002年退職後すぐに個人事業としてマジカルリミックスを創業。2007年に法人化し株式会社マジカルリミックスを設立。規模を問わずお客様のニーズにあわせたWebサイトの企画立案、制作、アクセスと売上アップをめざした更新サポートまで一貫して手がけている。
また、Web制作だけにとどまらず、社内向けのセキュリティ・IT活用のプライベートトレーニング、セミナー出演、執筆なども意欲的に手がける。全国からの講演依頼も多数。2005年から仙台の専門学校で、非常勤講師としてWeb制作講義を担当。

主な著書に『10日でSEO&アクセスアップ Jimdoデザインブック』(エムディエヌコーポレーション)『10日で作るかっこいいホームページ Jimdoデザインブック』(同)『HTML5+CSS3の新しい教科書 基礎から覚える、深く理解できる。』(共著、同)『基礎から覚える、深く理解できる。Webデザインの新しい教科書』(同)。

[所属]
仙台商工会議所 エキスパートバンク登録/みやぎ産業振興機構 専門家アドバイザー/みやぎ工業会正会員

10日で作るかっこいいホームページ Jimdoデザインブック 改訂新版

  • 1年間無料

    「はじめてWEB」でホームページをはじめよう!
  • Jimdoリメイク | プロがあなたのホームページを50,000円(税抜)でリニューアル!
  • 問い合わせ件数をアップさせるなら!「通話料無料・わかりやすい番号」のフリーコール
  • 文具、通信、オフィスのことなら何でもお任せ!まとめてオフィス

ホームページを作るのがはじめてのかたはまずこちらをご覧ください

コラム週間アクセスランキング[期間:2017/5/14~2017/5/20]

おすすめコンテンツ

はじめてWEBおすすめ本

創業・経営のお役立ち情報

  • ソウギョウノート

    飲食・小売・サービス業の開業スケジュールから、融資申込に必要な書類までをカンタン作成

  • 経理通信

    経営者と経理ご担当者必見!中小企業・小規模事業者のための経理サポートサイト

  • まとめてオフィス

    文具、通信、オフィスのことなら何でもお任せ

  • フリーコールS

    問い合わせ件数をアップさせるなら!「通話料無料・わかりやすい番号」のフリーコール

  • auオフィスナンバー

    事務所開設するなら固定電話番号で信頼アップ
    今ならキャンペーン実施中!