ホームページのクオリティアップ術 運用編 全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/