웹

홈페이지에 인스타그램 게시물 가져오기

· 2021-02-14 (일) 07:33:28 · 15980 · 28

영상보기 : https://youtu.be/qTt3Qzm4UTE

 

홈페이지에 인스타그램 게시물 가져와 보여주는 방법에 대해 알아보도록 하겠습니다.

가장 중요한 것이 인스타그램의 엑세스 토큰 값을 알아야 합니다.

 

1. 먼저 페이스북 디벨로퍼 사이트에 접속합니다. 페이스북에 로그인합니다.
홈페이지 우측 상단의 [내앱]을 클릭합니다.

 

2. [앱 만들기]를 클릭하면 뜨는 팝업창에서 하단의 [옵션 더보기]를 선택하고 [계속]버튼을 누릅니다.
그다음 [기타]를 선택하고 [계속]을 누릅니다.
표시할 앱 이름을 적절히 입력하고 이메일을 입력한 후 [앱 만들기]버튼을 누르면 입력한 이름으로 앱이 만들어집니다.

 

3. 만들어진 앱의 대시보드 좌측 메뉴에서 [설정]-[기본설정]을 선택합니다.
화면 맨 하단의 [+플랫폼 추가]버튼을 클릭합니다.
그다음 뜨는 새창에서 [웹사이트] 선택합니다.
웹사이트에서 사이트 URL을 자신의 홈페이지 URL을 정확히 입력하고 하단의 [변경내용 저장]을 누릅니다.

 

4. 그다음 대시보드 좌측 메뉴에서 [제품+]를 선택하고 제품 목록에서 [Instagram 기본표시]에서 [설정] 버튼을 클릭합니다.
그다음 하단의 [새 앱만들기]를 클릭합니다. 새창으로 뜨는 앱 아이디 입력부분에서 표시이름을 입력합니다. 이전에 입력한 앱 이름이 뜨면 그대로 하단의 [앱 만들기] 버튼을 클릭합니다.

그다음 중간 부분의 [클라이언트 OAuth 설정]와 [콜백 URL 승인 취소], [데이터 삭제 요청] 란에 자신의 홈페이지 주소를 입력하고 하단의 [변경내용 저장]을 클릭합니다.
그다음 화면 중간의 사용자 토큰 생성기에서 [Add or Remove Instagram Testers] 버튼을 누릅니다.

 

5. 다음화면 하단의 [Instagram 테스터 추가] 버튼을 눌러 뜨는 새창에서 가져올 자신 계정의 인스타그램 계정명을 입력합니다.
그러면 하단 Instagram 테스터 부분에 대기중으로 표시됩니다.

 

6. 이 상태에서 자신의 인스타그램 계정에 로그인하여 인스타그램 [프로필 편집]에서 좌측 메뉴의 [앱 및 웹사이트]를 선택합니다.
그 다음 우측의 [테스터 초대] 탭을 클릭한 후 [수락]버튼을 누릅니다.
그 다음 이전의 페이스북 대시보드로 가서 새로고침을 하면 [역할] 하단의 Instagram 테스터 부분이 대기중에 없어지고 사용할 준비가 끝납니다.

 

7. 다시 대시보드 좌측메뉴의 [Instagram 기본 표시]-[기본 표시]에 들어가면 화면 중간 쯤에 사용자 토큰 생성기 부분의 [Generate Token] 버튼을 누르면 인스타그램 로그인 창이 뜨고 로그인을 하면 인스타그램 계정 엑세스 권한에 대한 선택창이 뜹니다.
여기서 [허용]을 누르면 다음 창으로 Token Generated에서 부여된 토큰 키값이 보이고 [I Understand]를 체크하면 암호화된 부분이 모두 보이게 됩니다. 이 키 값을 복사하여 사용하시면 됩니다.

 

참고링크 : https://coffeenlife.com

 

3068422620_1613255909.4064.jpg

첨부파일

instagram.txt (1.4 KB) 282회 2021-02-14 07:38
|

댓글 28개

유익한 자료를 공유해 주셔서 감사합니다. 기회되면 사용해 보겠습니다.
홈페이지 정말 깔끔하네요. 직접 제작 하신건가요? 아니면 템플릿인가요?
2021-02-14 (일) 16:14:12
@호텔천사 나리야 빌더네요.
https://amina.co.kr/
2021-02-15 (월) 00:48:28
좋은정보 감사드립니다.
감사합니다.
감사합니다
궁금했던건데 감사합니다
공유 감사드립니다~!
감사합니다
가져올 수 있는 피드의수가 제한있지 않나요??
모든 피드는 못가져오는걸로 기억이 나서요.
@JKWang 최근글처럼 몇개만 가져와 보여주는 것인데 모든 피드를 가져올 필요가 있나요? 그리고 따로 제약은 없는 것으로 알고 있습니다.
@웹장이 간혹 인스타그램에 접속하지 않아도 인스타그램의 모든 피드를 게시판처럼 보기를 원하는 고객들이 계시거든요. 인스타그램 안하는 사람들은 모든 피드를 볼 수 없으니까요.
2021-02-20 (토) 10:14:37
감사합니다.
https://developers.facebook.com/docs/instagram-basic-display-api/getting-started
가이드 참고하시면 더 도움이 될 것 같습니다.
오!! 필요하던 거였어요!!감사해요 ㅎㅎ
오오 꿀정보 감사합니다
저한텐 조금 어렵지만, 공부해 보고 싶네요^^; 감사합니다.
아주 좋네요 좋은 정보 감사합니다!! :)
감사합니다.
너무 감사합니다~!!!최고네요~!!
감사 합니다
2021-06-17 (목) 18:48:45
유용한 정보 감사합니다.
https://coffeenlife.com

인스타 피드 안나오는데 저만 그런가요 ?
2022-01-13 (목) 17:18:40
@sosososo 저한테도 안보이네요
2022-03-25 (금) 18:19:00
좋은 정보 감사해요~
감사합니다. 해보겠습니다.
상세한 설명에 해매지 않고 바로 적용됐네요 감사합니다.
추천합니다.
댓글을 작성하시려면 로그인이 필요합니다.

그누보드5 팁자료실

2,788건
+
제목 글쓴이 날짜 조회
21-04-01 조회 6,940
21-03-27 조회 7,517
21-03-16 조회 6,744
21-03-16 조회 7,367
21-03-15 조회 8,683
21-03-10 조회 5,526
21-03-09 조회 8,086
21-03-09 조회 8,893
21-03-08 조회 6,501
21-03-08 조회 9,371
21-03-07 조회 5,842
21-03-05 조회 6,479
21-03-04 조회 8,557
21-02-26 조회 6,566
21-02-24 조회 5,709
21-02-20 조회 9,033
21-02-16 조회 8,119
21-02-16 조회 6,088
21-02-14 조회 1.6만
21-02-11 조회 7,527
21-02-03 조회 6,149
21-02-01 조회 6,341
21-01-31 조회 8,179
21-01-30 조회 5,748
21-01-29 조회 7,075
21-01-29 조회 6,653
21-01-28 조회 7,068
21-01-28 조회 9,496
21-01-26 조회 5,498
21-01-26 조회 7,610