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

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

エキスパートコラム

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

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

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

2016年11月21日更新(2017年10月13日改訂)

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

閲覧数1,625views

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

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

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

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

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

Instagram・Facebookの埋め込み

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

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

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

Instagram公式ホームページ

埋め込みに必要なアカウント名の取得

まずは、Instagramにログインして、自身のアカウントページを表示します。
アカウントページは、ログイン後、右上にあるアイコンをクリックすると移動します。
ここで表示される自身のアカウント名をコピーするか、メモしておきましょう。後ほど利用します。

Instagramフィードについて

ホームページにInstagramで投稿した写真を表示するには、Jimdoの「Instagramフィード」項目を使用します。この項目は、「POWr.io」というサービスと連携します。このサービスはJimdoと同じく有料と無料のプランが用意されていますが、無料プランを使用します。

ホームページへの埋め込み

次にホームページへログインします。Instagramに投稿した写真を挿入したい箇所に[コンテンツを追加]から[…その他のコンテンツ&アドオン]を選択します。表示されるメニューから[Instagramフィード]をクリックします。

表示されるメニューから[ここをクリックして表示されるコードをコピー]をクリックします。

表示される別ウィンドウからコードをコピーします。

コードをコピーしたら、ホームページの編集画面を表示して[Instagramフィード]の入力欄に、さきほどコピーしたコードを貼付けます。貼付けたら[保存]をクリックします。

※コードをコピーする際、[Copy]をクリックすると簡単にコピーできます。

コンテンツ内の上部に表示される[Edit Instagram Feed]をクリックして、編集メニューを表示します。

別ウィンドウで編集メニューが表示されたら[FOLLOWING]の入力欄の内容を、先ほど控えておいた自身のInstagramのアカウント名に変更します。[MAX POSTS TO DISPLAY]は、1度に表示する写真の数の設定です。任意の数字に変更しましょう。次に[Next]をクリックして編集を進めます。

表示する写真の更新頻度や、写真の大きさなど細かな設定を行います。「POWr.io」では無料プランには制限されている機能があります。無料プランで設定できる項目は下記の画像を参照してください。

細かな設定を終えたら[Next]をクリックします。新たにメニューが表示されますが、「POWr.io」の有料プランでのみ設定できる項目なので、なにもせずに[Save]をクリックします。

「POWr.io」へのログイン・登録画面が表示されます。はじめて使用する方は「Try It Now FREE」(無料プランへの登録)から、任意のメールアドレスとパスワードを入力または、Facebookなどの任意のアカウントで登録を進めます。

最後に、いままで設定した内容を保存するたのメニューが表示されます。[Save As:]に任意の名前を入力して、[Save]をクリックして設定終了です。

その後は、Instagramフィードの設定メニューは閉じられます。
自身のホームページを表示して、Instagramに投稿した写真が表示されているか確認しましょう。表示する写真の枚数など、再度設定する場合は[Edit Instagram Feed]をクリックします。

※[Edit Instagram Feed]は、ホームページの編集画面でのみ表示されます。

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

Facebookの投稿を埋め込む方法

Facebookページは、個人のアカウントとは別に、企業名やサービス名などで登録できる専用のアカウントです。誰でも無料でFacebookページを持つことができます。Facebookページを持っていない方は下記のリンクから、作成をお試しください。

Facebookページ作成ページ

自身のFacebookページを表示してアドレスをコピーします。

前項と同じく、ホームページの編集画面で[コンテンツを追加]から[…その他のコンテンツ&アドオン]を選択します。表示されるメニューから[Facebook]をクリックします。

表示されたメニューから[Facebookページ]を選択します。
入力欄の内容を先ほどコピーしたFacebookページのアドレスに変更します。

次に[ストリーム]にチェックを入れると、Facebookページでの投稿を表示することができます。[プロフィール写真]にチェックを入れると、Facebookページに「いいね!」しているユーザーのプロフィール写真が表示されます。最後に[保存]をクリックして完了です。

まとめ

固定的な情報が多いホームページは、更新頻度が低くなりがちです。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デザインブック 改訂新版

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

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

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

おすすめコンテンツ

はじめてWEBおすすめ本

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

  • ソウギョウノート

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

  • 経理通信

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

  • まとめてオフィス

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

  • フリーコールS

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

  • auオフィスナンバー

    事務所開設するなら固定電話番号で信頼アップ