BLOG CATEGORY

Monthly Archives

長フチコンテンツ

ホームページ制作、SEO対策 サイバーアクセル・アドバイザーズTOP » ブログ » スタッフ» 【第4弾】Instagramを更に活用する方法!ホームページと連動・埋め込みの方法は?

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

【第4弾】Instagramを更に活用する方法!ホームページと連動・埋め込みの方法は?

   投稿日: 2016/01/21    投稿者:スタッフ

さあ!今月もInstagramについて深く掘り下げていきますよ~~!


これまで、このInstagramシリーズを読んで頂いた方なら、簡単な使い方はもうマスターしていますよね!?

もしマスターしていないなら↓のシリーズを熟読されることをオススメします☆



------------------------------------------------------------------------------------------------------

【第1弾】初心者必見!3ステップで始められる!スマホアプリ インスタグラム(instagram)の使い方

【第2弾】インスタグラム(instagram)の活用法!アクセス解析、ハッシュタグなど企業のビジネス利用も!

【第3弾】Instagram×裏技 隅々まで知り尽くせ!!

------------------------------------------------------------------------------------------------------



今回は、

「簡単な使い方や操作の仕方はわかったけど、実際にどういう風に運用していけばいいの?」

と思っていらっしゃる方の為に、サイバーアクセルのスタッフがホームページとの連動方法や

埋め込みの方法をお伝えしちゃいます!!





<インスタグラムをホームページに埋め込んでみよう♪>


インスタグラムってお持ちのブログやホームページに埋め込むことが出来ることをご存知でしたか?

方法も色々あるのですが、いくつかご紹介します。


①インスタグラムの写真をそれぞれブログ等に埋め込む方法





まず、インスタグラムのアプリではなく、web上からページのURLを開きます。

インスタグラムのwebページは下記のURLです。

https://instagram.com/ユーザID/


ユーザーIDの部分を、お持ちのインスタグラムのIDにしてページを開けば、

自分のインスタグラムをweb上で見ることが出来ちゃいます。


こんなかんじ!


https://www.instagram.com/coverhair/


じゃあ実際に埋め込んでみましょう~。


ブログに埋め込みたい画像をぽちっとクリックします。

埋め込みたい画像を表示したら、画面右下の「...」というところをクリック。


img_160121_01.jpg


そのまま「埋め込み」をクリック。


img_160121_02.jpg


コードをコピーをクリック。


img_160121_03.jpg


あとはコピーしたコードをペーストでブログなどの好きなところに張り付ければOKです。


こんな感じに見えますよ~!


モッズヘア mod's hair 上尾西口店 上尾駅から徒歩2分 埼玉県上尾市谷津2-1-50-28 TEL:048-776-1280 http://www.cover-s.jp/mods_hair_ageo/ Styling coverhair group mod's hair 上尾西口店 野村 祐太 @MODS_NOMU Produce by Tanimoto kazunori @lupin_1969 @kazu_tanimoto 顔だちキュートに♪ツヤさらショート #美容室 #美容院 #ヘアサロン #hairsalon #ヘアスタイル #hairstyle #髪型 #ヘアカタログ #haircatalog #埼玉美容室 #埼玉美容院 #サロンモデル #近藤愛弥 #COVERHAIR #カバーヘアー #モッズヘア上尾店 #上尾 クーポンはこちら⇒http://www.cover-s.jp/mods_hair_ageo/campaign/

浦和の美容室、美容院|COVER HAIRカバーヘアーさん(@coverhair)が投稿した写真 -




これだといつでも好きなページにお気に入りの記事を埋め込むことが出来ますね!



②インスタグラムの更新に合わせて更新されるウェイジェットを埋め込む方法



①の方法だと、一つ一つの記事を毎回埋め込まないといけないので大変ですよね。

ホームページなどに毎回勝手に連動してくれるような見せ方がしたい時は、

「SnapWidget」というサービスをおすすめします!!


サイトはこちら→ http://snapwidget.com/#getstarted


設定画面はこんな感じでシンプルです。

英語表記のサイトですが、設定はとっても簡単なので諦めずにやってみましょう!


img_160121_04.jpg


まず上から二つの項目ですが、ここでどちらに設定するかで、

ホームページなどに埋め込んだ時の見え方が変わってきます。


Username」...その名の通りユーザーネームです。

ここにインスタのID(ユーザーネーム)を入力すれば、そのIDの投稿を埋め込むことが出来ます。


Hashtag」...こちらもそのままハッシュタグです。

こちらにハッシュタグを入力すると、そのハッシュタグの投稿を埋め込むことが出来ます。

ハッシュタグだと不特定多数の人の投稿がどんどん追加されます。


一般的には自分の投稿をホームページに埋め込む場合が多いと思いますので、

「Username」にご自分のIDを入力してもらえればそれでOKだと思いますよ!


Widget Type」...ウィジェットの見せ方を選べます。

下の画像のようにいろいろ種類があるので試してみて下さいね。


img_160121_05.jpg


ウィジェットが「Grid」の場合だと、他に下記のような設定を行います。

Thumbnail Size」...インスタグラムのサムネイル写真のサイズを指定します。

Layout」...縦横に写真を何枚ずつ表示するかを指定できます。

Photo Border」...写真の縁(線)を付けるかの設定が出来ます。

Background Color」...ウィジェットの背景色を決められます。

Photo Padding」...写真同士の隙間の設定ができます。

Hover Effect」...写真にマウスを乗せたときのエフェクトの指定ができます。

Sharing Buttons」...シェアボタンを表示するかを指定します。

Responsive」...レスポンシブに対応するかを指定します。



色々設定してみて、これでOKと思ったら「Preview」ボタンで実際にどんな感じかを見てみましょう。

問題ないなら「Get Widget」でコードを取得してコピーして、

ホームページなどにペタリと張り付ければ完了です!

こんな感じで表示ができますよ!


img_160121_06.jpg 


これで自動的に最新の投稿を読みこんでくれるので、

ブログやホームページを見に来てくれた人に最新の情報をお届けできますね!


ちなみに、これは少し制作者向けになるのですが、

もっと細かい設定でホームページなどに埋め込みをしたい場合は、

APIを使って行うのがいいみたいですね。


少し設定方法は難しそうですが、分かりやすく説明がされてあるサイト様を

ご紹介しますのでもし興味がある方はご覧ください!


APIでインスタグラムとホームページを連携する方法



どうでしたか?

これでインスタグラムをブログやホームページに載せて、

もっと上手な運用をしていきたいなぁ~と思って頂けたのではないでしょうか。


簡単に実行できちゃいますので、是非インスタグラム以外にも

ブログやホームページをお持ちのかたは試してみて下さいね!!



もっと詳しくインスタの効果的な使い方について知りたい方は下記をチェック!



月に一度、動画でインスタ他、Webに関するノウハウを配信しています。


初月はお試し価格500円で!


お申し込みはこちらから↓


ブログ・SNSを駆使して集客効果を高める方法!!

カテゴリ:

TOPへ