자신의 인스타그램뿐만 아니라 다른 사용자 인스타그램도 가져다 붙일 수 있습니다.
기본적으로는 자체 서버가 있는 경우에 사용할 수 있는 방법이지만, 제작자가 헤로쿠(Heroku) 클라우드에 프록시 서비스를 올려놓고 서비스를 해주고 있기 때문에 이걸 이용하면 별도 서버가 없어도 구현이 가능합니다.
다만, 개인이 제공하는 서비스여서 어느날 갑자기 헤로쿠 클라우드에 올려놓은 서비스를 종료해버리는 경우 직접 이 프록시를 자체 서버에 올려야하기 때문에 쪼끔은 안정성이 떨어집니다.
구현 방식은 CORS(Cross Origin Resource Sharing) 문제를 회피하기 위해 node.js 로 만든 프록시 서버 서비스를 올리고 프록시 서버로 릴레이한 인스타그램 피드를 자바스크립트 라이브러리를 이용해 내 블로그에 붙이는 방법입니다.
즉, 중간에 인스타그램 피드를 가져오는 서비스가 하나 더 있는 것입니다.
다소 난이도가 있는 방법이므로 기술적인 부분에 대해 잘 모르는 경우 추천하지 않습니다.
오픈소스이므로 만약의 경우 별도의 서버사이드 서비스를 구축해야 하는 경우 아래 URL에서 프록시 서버 소스를 다운 받을 수 있습니다.
https://github.com/Rob--W/cors-anywhere/
티스토리에 다른 유저의 인스타그램 피드를 붙일 필요가 있을 경우 쓸만한 방법입니다.
데모사이트가 있으므로 실제 동작하는 것을 확인할 수 있습니다.
https://www.sowecms.com/demos/jquery.instagramFeed/index.html
1. 자바스크립트 라이브러리 업로드
인스타그램 API 사용을 위해 인스타그램 개발자 사이트에서 클라이언트 등록을 한다거나, 액세스 토큰을 발급받는 것과 같은 과정은 필요없습니다.
여기서는 자바스크립트 라이브러리만으로 제작자가 제공하는 헤로쿠 클라우드를 이용해 다른 사용자의 인스타그램 피드를 붙여보도록 하겠습니다.
https://www.jqueryscript.net/social-media/Instagram-Photos-Without-API-instagramFeed.html
사이트에서
"Download" 버튼을 눌러 인스타그램피드 자바스크립트 파일을 다운로드 받습니다.
압축을 푼 후 jquery.instagramFeed.min.js, 또는 jquery.instagramFeed.js 파일을 티스토리 블로그에 업로드 합니다.
소스코드를 수정할 일은 없으므로 여기서는 jquery.instagramFeed.min.js 을 업로드해서 적용합니다.
2. 자바스크립트 라이브러리를 스킨에 연결
티스토리의 경우
자바스크립트 파일이 업로드되는 위치는 images 폴더 밑입니다.
skin.html 끝에 이 라이브러리 파일 링크를 붙여넣습니다.
경로는 "내블로그 루트/images/spectragram.min.js" 가 됩니다.
<script src="./images/jquery.instagramFeed.min.js"></script>
보통 티스토리 레퍼런스 스킨을 기반으로 만들어진 스킨들은 skin.html 끝에
스킨 설정에 사용하는 자바스크립트 파일이 링크되어 있습니다.
<script src="./images/script.js"></script>
요 코드가 보이는 경우 바로 위에 붙여넣어주면 됩니다.
인스타그램 피드 내용을 붙일 skin.html 의 적당한 위치에 아래 태그를 붙여넣습니다.
<div id="instafeed"></div>
이제 자바스크립트 라이브러리를 초기화합니다.
script.js 파일을 연 후 파일 맨끝에 아래 코드를 추가합니다.
$(window).on('load', function(){
$.instagramFeed({
'username': 'sachajuankorea',
'container': "#instafeed",
'display_profile': false,
'display_biography': false,
'items': 8,
'items_per_row': 4,
'margin': 0.5,
'styling': true
});
});
- 'username': 'sachajuankorea', - 인스타그램 이름. 본인 인스타그램 이름이나 기타 다른 인스타그램 이름을 사용.
- 'container': "#instafeed", - 생성된 인스타그램 피드 태그들이 들어갈 식별자
- 'display_profile': false, - 프로필 정보 표시 여부 ( true/false )
- 'display_biography': false, - 소개글 표시 여부 ( true/false )
- 'items': 8, - 최대 표시 포스트 갯수
- 'items_per_row': 4, - 한줄당 표시 포스트 갯수 ( 기본 설정 css 적용됨. 아래 styling 옵션을 false 로 끈 경우 줄당 표시 옵션은 무시됨.)
- 'margin': 0.5, - 이미지 사이 공간을 퍼센트 값으로 지정. 기본값은 0.5%.
- 'styling': true - css로 별도의 레이아웃을 구현할 것이 아니면 true 로 사용. ( true/false )
-> 1. 인스타그램 위젯 생성 서비스를 이용해 내 인스타그램 피드를 붙이기 - 스냅위젯
-> 2. 인스타그램 개발자 API로 내 인스타그램 피드를 연결하기
-> 3. 프록시 서비스를 이용해 인스타그램 피드를 원격으로 연결하기
-> 4. 블로그와 워드프레스에 내 인스타그램 피드/위젯 붙이기 -라이트위젯
'티스토리스킨 > 스킨 활용&패치' 카테고리의 다른 글
| 티스토리 사이드바 최근글, 인기글에 썸네일 이미지 표시하기 (5) | 2019.04.19 |
|---|---|
| 티스토리 신스킨 커버 슬라이드 2.0 기능 확장 버전 배포합니다. 슬라이드 인디케이터 및 자동 스크롤 지원 (13) | 2019.04.09 |
| 티스토리 블로그에 인스타그램 피드/위젯 붙이기 완벽정리1 - 스냅위젯 서비스를 이용해 인스타그램 위젯 연결하기 (3) | 2019.04.08 |
| 티스토리 블로그에 인스타그램 피드/위젯 붙이기 완벽정리2 - 인스타그램 개발자 API를 이용해 내 인스타그램 연결하기 (3) | 2019.04.08 |
| 티스토리 블로그에 인스타그램 피드/위젯 붙이기 완벽정리3 - 프록시 서비스를 이용해 릴레이로 연결하기 (4) | 2019.04.08 |
| 블로그와 워드프레스에 인스타그램 피드/위젯 붙이기 완벽정리 - 라이트위젯 위젯 생성 서비스를 이용 (0) | 2019.04.08 |
| 광고차단앱(애드블록) 디텍터로 티스토리 블로그에 광고차단 해제 안내 문구를 표시하기 (0) | 2019.02.07 |
| 티스토리 이미지 썸네일 치환자 완벽정리 (15) | 2019.02.07 |
| 티스토리 글을 최근 작성 글로 끌어올리기 (0) | 2019.02.02 |
감사합니다. 도움이 많이 됐습니다 :)
=^^=/
좋은 정보 감사합니다.
감사합니다.