ホームページのクオリティアップ術：運用編（全8回）
第5回：Instagram・Facebookをホームページに埋め込んで表示する
執筆：赤間 公太郎（株式会社マジカルリミックス）
"ホームページのクオリティアップ術：運用編"のコラムを担当する、マジカルリミックスの赤間です。
全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］の入力欄の内容を、先ほど控えておいた自身のInstagra mのアカウント名に変更します。［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ブラウザだけで、デザインセンスのよいチラシを作成する方法」をご紹 介します（つづく）。
次回のコラムを見る »
赤間 公太郎（あかま・こうたろう）
株式会社マジカルリミックス 代表取締役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デザインの新しい教科 書』（同）。
［所属］
仙台商工会議所 エキスパートバンク登録／みやぎ産業振興機構 専門家アドバイザー／みやぎ工業会正会員
Copyright 2019 はじめてＷＥＢ All Rights Reserved.
https://hajimeteweb.jp/
