Instagramの写真をあなたのウェブサイトに表示する方法

公開: 2021-01-29

インタラクティブウィジェットは、実際のInstagram写真をWordPressサイトに本物の時間で表示する簡単な方法を提供します。 その方法をお教えします。

あなたはたくさんの情報と写真を含むInstagramのプロフィールを持っています。 そして、あなたはあなたのサイトの訪問者にこれを見てもらいたいのです。 かなりリアルです。 この場合、Instagramプラグインウィジェットが役に立ちます。

このウィジェットでサポートされている写真を表示するには、2つの方法があります。 最初の方法は、特定のタグが付いた写真を表示することです。 2つ目は、[マイフォト]オプションを選択することです。これにより、アカウントから写真を引き出すことができます。

他のアカウントの写真の表示はInstagramのポリシーによって制限されているため、Instagramに画像を表示する許可を取得する方法を説明します。 あなたの写真にアクセスし、あなたがあなたのアカウントの所有者であることを確認し、写真と一般的にあなたのサイトのすべてのコンテンツを使用する許可を確認するには、まず、 Instagramアクセストークンを設定する必要があります。

Instagramの写真を表示する

Instagramアクセストークンとは何ですか？Instagramから写真を表示する方法は？

Instagramアクセストークンは、アカウントに固有であり、他のアプリケーションがInstagramフィードにアクセスできるようにする文字のセットです。 トークンがないと、サイトはInstagramサーバーに接続できません。 トークンは、プロフィールにアクセスしてその画像を表示するためのInstagramの許可を要求する安全な方法をWebサイトに提供します。

また、Shopifyストアで買い物可能なInstagramギャラリーを紹介したい場合は、Growaveでアプリをインストールして、ビジネスのFacebookアカウントに接続するだけです。

Instagramアクセストークンを取得するにはどうすればよいですか？

Instagramアクセストークンを正常に取得するには、このステップバイステップガイドに従ってください。Instagramの写真を簡単に表示する方法を確実に学ぶことができます。

ステップ1.Facebookアプリを作成します

これを行うには、developers.facebook.comにアクセスし、[マイアプリ]を選択して、アプリを作成する必要があります。 アプリダッシュボードのパネルで、[設定]> [基本]を選択し、ページの一番下までスクロールして、[プラットフォームの追加]をクリックします。

Instagramの写真を表示する

次に、Webサイトを選択し、 WebサイトのURLを入力して、変更を保存します。 ここではウェブサイトを使用しますが、後でプラットフォームを変更できるようになります。

ステップ2.基本的なInstagramビューを設定する

したがって、[製品]をクリックし、 Instagram製品を見つけて、[セットアップ]をクリックします。

Instagramの写真を表示する

[基本表示]をクリックし、ページの一番下までスクロールして、[新しいアプリの作成]をクリックします。

以下の説明に従ってフォームに記入してください。

表示名

作成したFacebookアプリの名前を入力します。

OAuthリダイレクションの有効なURI

サイトのURLを入力します。 このフィールドは、リダイレクトパラメータを登録する特別なURIを対象としていますが、この例では、便宜上、サイトのURLを使用します。

例：https：//zemez.io/

URLを入力したら、変更を保存してもう一度確認してください。 構造によっては、スラッシュがURLに自動的に追加される場合があります。 完全なURLを保持します。認証コードとアクセストークンを取得するために必要になります。

コールバックURLの認証を解除します

サイトのURLをもう一度入力してください。 次に、認証解除通知を処理するためにURLに置き換える必要があります。

データ削除リクエストのコールバックURL

サイトのURLをもう一度入力してください。 次に、データ削除リクエストを処理するために、対応するURLに置き換える必要があります。

アプリレビュー

スキップしますが、まだ必要ありません。

ステップ3.Instagramテストユーザーを追加する

[役割]>[役割]を選択し、[ Instagramテスター]セクションまでスクロールします。 [ Instagramテスターの追加]をクリックし、Instagramユーザー名を入力して、招待状を送信します。

新しいブラウザウィンドウを開き、www.instagram.comにアクセスして、招待されたInstagramアカウントにログインします。 （プロファイルアイコン）>プロファイルの編集>アプリケーションとサイト>テスター招待を選択し、招待を受け入れます。

これで、開発モードでもFacebookアプリケーションがInstagramアカウントにアクセスできるようになります。

ステップ4.テストユーザーにログインして、Instagramから写真をすばやく表示します

以下の認証ウィンドウのURLを作成し、{app-id}をInstagramアプリのID（ [アプリダッシュボード]>[製品]>[Instagram]>[基本表示]>[InstagramアプリID ]フィールドから）に置き換え、{redirect-uri}をステップ2（「有効なOAuthリダイレクトURI」）。 URLは完全に同じである必要があります。

新しいブラウザウィンドウを開き、表示される認証ウィンドウのURLに移動します。 このページには、 Instagramのユーザー名、アプリケーションの名前、および要求する権限の説明が表示されます。

Instagramテストユーザーを承認します（つまり、アプリケーションにプロファイルデータへのアクセスを許可します）。 これを行うには、認証ウィンドウでアカウントにログインし、[認証]をクリックします。 成功すると、ページは前の手順で指定されたURIにリダイレクトし、認証コードを追加します。

注意：リダイレクトURIの最後には文字#_がありますが、これらはコードに含まれていません。 このコードをコピーします（文字#_部分なし）：次のステップで必要になります。

ステップ5.コードをトークンと交換する

コマンドラインツールまたはcURLリクエストをサポートするアプリケーションを開き、次のようにAPIにPOSTリクエストを送信します。

curl -X POST \ https://api.instagram.com/oauth/access_token \ -F client_id = {app-id} \ -F client_secret = {app-secret} \ -F grant_type = authentication_code \ -F redirect_uri = { redirect-uri} \ -F code = {code}

{app-secret}の代わりにInstagramアプリケーションの{app-id}IDを使用します– {redirect-uri}の代わりにInstagramアプリケーションの秘密–リダイレクトURI、および{codeの代わりに私たちから受け取ったコード}。 注意：リダイレクトURIは、最後のスラッシュまで、前の手順で指定したものと完全に一致する必要があります（Instagramアプリケーションのセットアップ時に、アプリケーションパネルが自動的にURIに追加する可能性があります）。

成功すると、APIは、1時間有効な短期のInstagramユーザーアクセストークンとInstagramテストユーザーIDを含むJSONエンコードされたオブジェクトを返します。

ステップ6.Instagramから写真を表示するようにユーザーノードにリクエストします

コマンドラインまたはアプリケーションを使用して、cURLリクエストを以下に示すユーザーノードに送信し、ユーザー名とIDを取得します。 {user-id}と{access-token}を、それぞれ前の手順で取得したIDとアクセストークンに置き換えます。

curl -X GET \'https://graph.instagram.com/ {user-id}？fields = id、username＆access_token = {access-token}'

成功すると、APIはInstagramのユーザー名とIDを表示します。

ステップ7.プラグイン設定にアクセストークンを追加します

WordPressダッシュボード>JetPlugins>JetElements設定に移動します。 [統合]タブに移動し、[Instagram]セクションを見つけて、[アクセストークン]フィールドにトークンを貼り付け、[保存]ボタンをクリックします。

Instagramの写真を表示する

終わり！ これで、Elementorに戻り、Instagramウィジェットを使用してアカウントの写真を表示できます。 また、Webサイトにより多くの機能をもたらすには、ZeGutenプラグインを試してください。