インスタ 埋め込み。 Instagramをサイトに埋め込みする方法【InstaWidget(インスタウィジェット)】

instawidgetが終了。インスタ埋め込みプラグイン代用まとめ

インスタ 埋め込み

該当の投稿から「埋め込みコード」を取得して、自身のサイトに貼り付けるだけ。 ブログなどからインスタへの流入が増やせますし、ほかのインスタユーザーの投稿を貼り付ければ話題の幅も広がります。 PC版とスマホWebブラウザ版の手順は同じ。 スマホの方は『Safari』などのWebブラウザからインスタにログインしましょう。 スマホアプリ版では埋め込みコードの取得はできないのでご注意を。 (インスタ埋め込みコード) サイズを変えて表示する 埋め込んだ投稿画像の表示サイズを大きくしたり、小さくすることもできます。 元のサイズ 【横幅】max-width:540px; 【縦幅】min-width:326px; 埋め込みコード内の上記max-width:とmin-width:の数値を変更しましょう。 下記サンプルは「max-width:300px; min-width:300px;」で設定。 複数投稿並べた自動更新の埋め込みができる外部ツール 先述のとおり『Instagram』のAPIは2020年3月には廃止されるため、 APIを利用した外部ツールは使用できなくなっていくでしょう。 複数投稿を並べたり、自動更新仕様にもできた埋め込みツールの『InstaWidget』は、現在サイトにアクセスできなくなっています。 『SnapWidget』はまだ使えるようですが、こちらもいつ使えなくなるかは不明。 それでも今やりたいという方は、以下簡単にご紹介しますのでご参考までに。 SnapWidget 設定項目の意味 Thumbnail Saize サムネイル画像(一つひとつの投稿画像)の表示サイズ Layout Columns X Rows Columnsが横、Rowsは縦にいくつ並べるかのレイアウト表示設定 Photo Padding 画像と画像の間の余白 Hover Effect 画像にマウスを合わせた際の動きを付けるか Rsponsive PCとスマホそれぞれの端末に合わせた表示(レスポンシブ)にするか 注意点、不具合と対処法 埋め込んだ投稿が削除されるとどうなるか、ほかのユーザーの投稿を埋め込む場合の注意点や不具合がある際の対処法を見ていきましょう。 埋め込んだ投稿が削除されると非表示になる 埋め込みはインスタの投稿を参照表示しています。 投稿内容が変更されれば埋め込みの方にも反映されます。 投稿自体が削除されている場合は下記のように非表示となります。 定期的に埋め込んだ投稿の更新・削除がないかチェックすると良いでしょう。 - 2019年12月月11日午前12時29分PST 他ユーザーの投稿を埋め込む場合の著作権について では投稿の再シェアを許可しています。 「再シェア」とは、インスタが提供するAPI(埋め込み機能など)を使ったネット上での投稿シェアを指します。 つまりInstagramの投稿を引用として、埋め込みで掲載すること自体は問題ありません。 画像をいったん保存してから貼り付けるのはNGなので注意しましょう。 なお、許可なく勝手に掲載をしてほしくないと感じるユーザーもいます。 もし投稿者本人から取り下げるようお願いされた場合には、掲載をやめるのがベターです。 埋め込みが表示されないときの対処法 Wi-Fiなどの通信環境を確認する インスタの埋め込みに限らず、ページがうまく表示されない場合は真っ先に通信環境を確認しましょう。 Wi-Fiやモバイルデータ通信がオフになっていたらオンにしましょう。 スマホはiOSやAndroidを最新版にアップデートする 最新版に合わせて仕様を更新しているサービスでは、 iOSやAndroidのバージョンが古いと不具合が出やすくなります。 端末のバージョンはこまめにアップデートをしましょう。 手順は以下のとおりです。 『Internet Explorer』も同じ位置に歯車アイコンがある。 上記でも解決しない場合には サイトとの相性もあるため、使っているブログやサイトの運営に問い合わせしましょう。 『WordPress』だと『InstaShow Lite』などのプラグインを追加して解決する場合も。 最終手段ですが、 ブログによってはリンクを貼り付けるだけで「埋め込み」にできるものもあります。 まとめ インスタの「埋め込み」で持っている他サイトに投稿を表示させることで、 新しい間口からユーザーを引き込むことができます。 自分以外のユーザーの投稿も埋め込みできるため、第三者の投稿(発言)は記事への信憑性にも繋がるでしょう。 デザインを変えたり 自動更新仕様の埋め込みをするには外部ツールの利用が必要ですが、API廃止に伴い徐々に使用できなくなっていきます。 必要な方は理解した上で活用してください。 こちらの記事もおすすめ.

次の

instawidgetが終了。インスタ埋め込みプラグイン代用まとめ

インスタ 埋め込み

こんにちはー!なのんです。 なのんのオウンドメディアもジワジワ育ってきております。 みなさんインスタグラムはされていますか?見るだけ派の方も、戦略立てて日々投稿してるよーという方も、活用の仕方は様々かと思います。 文章よりも画像重視のインスタグラムは、ネイルサロンにはぴったりなSNSになります。 なのんもかれこれ5年ほどネイリストとしてのアカウントをやっていますが、そこから予約の問い合わせが来ることも多々あります。 海外の方から長文のファンメッセージをいただいたこともあります。 よってセルフブランディングには必要不可欠だと考えています。 なので、日々インスタグラムには画像を投稿しているわけですが、それをそのまま自分のホームページに自動的にupされたら手間も少ない。 というわけで 今回はページに【Instagramフィード】を入れる方法を教えてもらいました。 Instagram(インスタグラム)フィードとは Instagramフィードとは自身のWEBページに、自身のInstagramに掲載されている最新の画像を 表示されるようにすることです。 Display your Feedでショートコードを取得する [instagram-feed]を右クリックでコピー 2 任意の固定ページにショートコードを埋め込む ・Instagramフィードを入れ込みたい場所にブロックを追加する。 ・セクションブロックを追加する ・タイトル部分に任意の言葉を入力する ・文章部分にブロックを追加する ・ウィジェットを選択 ・ショートコードを選択 ・先ほどコピーしたショートコード[instagram-feed]を貼り付ける ・更新する 4.埋め込み完成!! WEBページの表示を確認しましょう! Instagramの埋め込みができたサイトがこちらです。

次の

Instagram Graph APIの基本的な使い方・Webサイトにインスタの写真を埋め込みする方法

インスタ 埋め込み

こんにちは!インスタグラマーのy-heyです。 おしゃれな画像がいっぱいのSNS、Instagram(インスタグラム)。 読者のみなさんも使っている方も多いのではないでしょうか? 私もフルサイズの一眼レフを登山に行くときも持ち歩く身としてはこのような写真関連のSNSは押さえておかないと! というわけで先日からやっとインスタグラムを始めてみました。 それではこちらも解説していきます! y-hey 2-1. InstaWidget(インスタウィジェット)で埋め込みコードを取得 サイトやブログへインスタのギャラリーを貼りつけるには、InstaWidgetというブログパーツのサービスを利用します。 完全無料で面倒なEメールアドレス等の登録も不要!メチャメチャ便利です。 InstaWidgetのサイトにアクセス まずはInstaWidgetのサイトへアクセスしてください。 「早速作ってみる」をクリック 項目を設定 そして各項目を設定します。 ユーザー名:あなたのユーザー名を入力して下さい ブログパーツ幅:通常は300でいい感じですが、サイトのデザインに合わせて変更できます。 ユーザーアイコン:表示、非表示を選択 ユーザー紹介文:インスタのプロフィールで設定している紹介文の表示、非表示を選択 フォローボタン:表示、非表示を選択 フォロワー:フォロー数・フォロワー数の表示、非表示を選択 外枠:このブログパーツの枠の表示、非表示を選択 外枠の色、文字の色、背景色:それぞれの部分の色をカラーコード(Web上で色を指定する英数字)で指定します。 基本は初期設定のままで十分使えます。 (私も初期設定のままです) もし変更したい場合は、HTMLカラーコードというサイトから好きな色を選べば カラーコードが表示されるので、それをコピー&貼りつけすればオッケーです。 写真アルバム:インスタにアップしている写真の表示、非表示を選択 写真間の幅:写真と写真の間の幅を指定できます。 通常は初期設定でOK 写真効果:なし、フェードイン、フェードアウト から選択 フェードイン・・・マウスを置いた時に写真が薄くなります。 フェードアウト・・・写真が通常状態で薄くなり、マウスを置いた時に元の写真の濃さになります。 お好みで変更できます。 通常は「表示しない」で良いと思います。 写真の枠:写真の枠線の表示、非表示を選択 新しいウインドウで:クリックした時に新しいウインドウで開く・開かないを選択 2-2. プレビューで確認、埋め込みコードを取得 設定が完了したら、「プレビュー」ボタンをクリック。 すると、画面の右上にプレビューが表示されます。 「 埋め込みコードを取得」をクリック。 埋め込みコードが表示されるので、 全体を選択後 Ctrl+C(Macの場合はcommand+C)でコピーします。 ここまで進めばあとはサイトの好きな箇所に埋め込むだけです! y-hey 2-3. 埋め込みコードをブログへ貼り付け さてここからは先程 InstaWidgetで取得したタイムラインの埋め込みコードをサイトへ貼り付けます。 今回はWordPressのサイトでHummingbirdのテンプレートを使っていて、 フッター(サイトの一番下側)に貼りつける場合を紹介します。 【フッター】(真ん中)の右側にある下三角をクリック カスタムHTMLを選び、 (WordPress4. 8以降の場合。 それ以前のWordPressバージョンの場合はテキストウィジェット(テキスト形式のパーツ)でOK) ドラッグ&ドロップで挿入します。 「タイトル」の部分に 「Instagram」もしくは「インスタグラム」と入力。 最後は、忘れずに 「保存」をクリックしましょう。 2-4. サイトでの表示を確認 そして最後はご自身のサイトを開いてみて、表示がきちんとされているか確認してみて下さい。

次の