웹사이트에 Instagram의 사진을 표시하는 방법

대화형 위젯은 실제 Instagram 사진을 실제 시간에 WordPress 사이트에 표시하는 간단한 방법을 제공합니다. 방법을 알려드리겠습니다.

많은 정보와 사진이 포함된 Instagram 프로필 이 있습니다. 그리고 사이트 방문자가 이것을 볼 수 있기를 바랍니다. 그것은 아주 현실적입니다. 이 경우 Instagram 플러그인 위젯이 도움이 될 것입니다.

이 위젯에서 지원하는 사진을 표시하는 방법에는 두 가지가 있습니다. 첫 번째 방법은 특정 태그가 있는 사진을 표시하는 것입니다. 두 번째는 내 사진 옵션을 선택하는 것입니다. 그러면 계정에서 사진을 가져올 수 있습니다.

인스타그램 정책에 따라 다른 계정의 사진 표시가 제한되기 때문에 인스타그램에서 이미지 표시 권한을 얻는 방법을 알려드립니다. 사진에 액세스하고 계정 소유자임을 확인하고 사진 및 일반적으로 사이트의 모든 콘텐츠 사용 권한을 확인하려면 먼저 Instagram 액세스 토큰 을 설정해야 합니다.

Instagram 액세스 토큰이란 무엇이며 Instagram에서 사진을 표시하는 방법은 무엇입니까?

Instagram 액세스 토큰 은 귀하의 계정에 고유하고 다른 애플리케이션이 귀하의 Instagram 피드에 액세스할 수 있도록 하는 일련의 문자입니다. 토큰이 없으면 사이트에서 Instagram 서버에 연결할 수 없습니다. 토큰은 웹사이트에 Instagram 권한을 요청하여 프로필에 액세스하고 해당 이미지를 표시할 수 있는 안전한 방법을 제공합니다.

또한 Shopify 스토어에서 쇼핑 가능한 Instagram 갤러리를 선보이고 싶다면 Growave 에서 앱을 설치하고 비즈니스 Facebook 계정을 연결하기만 하면 됩니다.

내 Instagram 액세스 토큰을 얻는 방법?

Instagram 액세스 토큰 을 성공적으로 얻으려면 이 단계별 가이드를 따르십시오. 그러면 Instagram에서 사진을 쉽게 표시하는 방법을 확실히 배우게 될 것입니다.

1단계. Facebook 앱 만들기

이렇게 하려면 developer.facebook.com으로 이동하여 내 앱 을 선택하고 앱을 만들어야 합니다. 앱 대시보드 패널에서 설정 > 기본 을 선택하고 페이지 하단으로 스크롤한 후 플랫폼 추가 를 클릭합니다.

그런 다음 웹 사이트를 선택하고 웹 사이트 의 URL을 입력한 다음 변경 사항을 저장합니다. 여기서는 웹사이트를 사용하지만 나중에 플랫폼을 변경할 수 있습니다.

2단계. 기본 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 Fast의 사진 표시

아래 인증 창 URL을 구성하여 {app-id}를 Instagram 앱의 ID( 앱 대시보드 > 제품 > Instagram > 기본 디스플레이 > Instagram 앱 ID 필드에서)로 바꾸고 {redirect-uri}를 제공한 웹사이트 URL로 바꿉니다. 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=authorization_code \ -F redirect_uri={ 리디렉션-uri} \ -F 코드={코드}

{app-secret} 대신 Instagram 애플리케이션의 {app-id} ID로 대체하십시오. – Instagram 애플리케이션의 비밀, {redirect-uri} 대신에 – 리디렉션 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, 사용자 이름&access_token={접근 토큰}'

성공하면 API에 Instagram 사용자 이름과 ID가 표시됩니다.

7단계. 플러그인 설정에 액세스 토큰 추가

WordPress 대시보드> JetPlugins> JetElements 설정으로 이동합니다. 통합 탭으로 이동하여 Instagram 섹션을 찾아 액세스 토큰 필드에 토큰을 붙여넣고 저장 버튼을 클릭합니다.

완료! 이제 Elementor로 돌아가 Instagram 위젯을 사용하여 계정의 사진을 표시할 수 있습니다. 또한 웹사이트에 더 많은 기능을 제공하려면 ZeGuten 플러그인을 사용해 보세요.