Tistory/Tistory Skin Edit

티스토리 블로그에 인스타그램 피드 Access Token & API 없이 사용하기

별깡솔 2020. 10. 20. 10:27

안녕하세요 별깡솔입니다 : )

별깡솔 블로그를 방문하신 모든 분들 진심으로 감사드립니다

인스타그램 피드 Access Token & API 없이 사용하기

카페24 앱스토어에 인스타그램 위젯 기능을 사용한 경험이 있어서
티스토리에도 적용하고 싶었습니다

티스토리에서 인스타그램 위젯 기능을 제공하지 않기 때문에
인스타그램 피드를 가져와 사용하기가 초보자 입장에선 매우 어려웠습니다

스냅 위젯을 사용하는 방법이 있지만 내가 원하는 레이아웃을 만들기 어렵고

페이스북 개발자 페이지에서 앱을 만들어 토큰을 얻어 사용하는 방법도 어렵습니다

페이스북에 인스타 연결부터 시작해서 해야할 것이 많습니다

그리고 힘들게 얻은 토큰을 장기 토큰으로 만들고 그 토큰마저 60일 제한이라 토큰을 관리하기가 짜증납니다

인스타그램 아이디만 가지고 사용하는 방법에 대해서 알아보겠습니다

소스 코드 수정 전에 반드시 스킨 백업 하시길 바랍니다

instafeed.js 파일 연결 후 html, css 작성입니다

html과 css에 대해 잘 모르신다면 제가 올린 소스코드를 해당 위치에 붙이시길 바랍니다

https://github.com/jsanahuja/InstagramFeed에서
InstagramFeed-master.zip 파일을 받습니다

압축을 풀면 src 폴더 안에 js 파일이 있습니다 (instagramFeed.min.js - dist 폴더)

파일을 받습니다

InstagramFeed.js

InstagramFeed.min.js


js 소스 내용입니다


티스토리 블로그 관리 - 스킨 편집 - html 편집 - 파일업로드에 js 파일을 업로드 합니다

js 업로드 방법


html 편집에서 js 파일을 연결합니다

<head> 와 <head> 사이에 아래 코드를 넣습니다

<script src="./images/instagramFeed.js"></script>


js 코드 위치

코드 삽입 위치만 참고하세요



html


5가지 Example 중에서 마음에 드는 레이아웃을 선택합니다


Example 1

Example1


인스타그램 피드를 표시할 곳에 아래 코드를 넣습니다


<div id="instagram-feed"></div>
        <script>
    (function(){
        new InstagramFeed({
            'username': '인스타아이디',
            'container': document.getElementById("instagram-feed"),
            'display_profile': true,
            'display_biography': true,
            'display_gallery': true,
            'callback': null,
            'styling': true,
            'items': 8,
            'items_per_row': 4,
            'margin': 1,
            'lazy_load': true,
            'on_error': console.error
        });
    })();
</script>


Example 2

Example2


<div id="instagram-feed"></div>
        <script>
    (function(){
        new InstagramFeed({
            'username': '인스타아이디',
            'container': document.getElementById("instagram-feed"),
            'display_profile': false,
            'display_biography': false,
            'display_gallery': true,
            'callback': null,
            'styling': true,
            'items': 8,
            'items_per_row': 4,
            'margin': 1 
        });
    })();
</script>


Example 3

Example3


<div id="instagram-feed"></div>
        <script>
    (function(){
        new InstagramFeed({
            'username': '인스타아이디',
            'container': document.getElementById("instagram-feed"),
            'display_profile': false,
            'display_biography': false,
            'display_gallery': true,
            'callback': null,
            'styling': true,
            'items': 12,
            'items_per_row': 6,
            'margin': 0.25
        });
    })();
</script>


Example 4

Example4


<div id="instagram-feed"></div>
<script>
    (function(){
        new InstagramFeed({
            'tag': '태그',
            'container': document.getElementById("instagram-feed"),
            'display_profile': true,
            'display_gallery': true,
            'items': 15,
            'items_per_row': 5,
            'margin': 0.5
        });
    })();
</script>


Example 5

Example5


<div id="instagram-feed"></div>
<script>
    (function(){
        new InstagramFeed({
            'username': '인스타아이디',
            'container': document.getElementById("instagram-feed"),
            'display_profile': false,
            'display_biography': false,
            'display_gallery': false,
            'display_igtv': true,
            'callback': null,
            'styling': true,
            'items': 8,
            'items_per_row': 4,
            'margin': 1 
        });
    })();
</script>


css


html 코드를 수정해서 붙여 넣으셨다면 피드 내용이 보일 것입니다

'styling' 디폴트 값이 true 입니다
'styling': false, 로 하지 않는다면 Example과 같은 레이아웃으로 표시됩니다

'items': 숫자, 원하는 출력 개수를 입력하세요

'items_per_row': 한 줄에 표시할 개수를 입력하세요


옵션을 참고하세요

option


별깡솔 스타일


제가 사용중인 레이아웃을 참고하실 분들은 아래 코드를 사용하세요

instagramFeed.js 소스 코드가 다릅니다

instagramFeed.js

js


html ( footer에 위치합니다)


css ( 'font-awesome'을 사용합니다. 사용 방법을 아래 링크를 참고하세요 )

2020/10/20 - [티스토리/티스토리 꾸미기] - Web Font XEIcon & Font-awesome 사용하기



나쁜 의도로 악용하는 일이 절대적으로 없어야 합니다

해당 포스트가 문제 된다면 댓글 남겨주세요

똑같이 따라했는데 작동 안 하는 분들도 댓글 남겨주세요


제 인스타그램 피드는 수지 인스타입니다

단지 갤러리 예시 용도입니다


본 포스트 javascript 출처는 https://github.com/jsanahuja/InstagramFeed 입니다

오픈 소스 코드 저장소 무상 서비스입니다


별깡솔 블로그를 방문하신 모든 분들 다시 한번 진심으로 감사드립니다

구독과 좋아요 감사합니다 : )


저작자표시 비영리 변경금지

'Tistory > Tistory Skin Edit' 카테고리의 다른 글

나만의 헤더 만들기 상단에 고정시키기  (0) 2020.10.28
Web Font XEIcon & Font-awesome 사용하기  (0) 2020.10.20
사이드 tag, 태그 꾸미기  (0) 2020.10.16
사이드 최신글 인기글 꾸미기 날짜 형식 영어로 변경하기  (0) 2020.10.15
사이드 카테고리 꾸미기  (0) 2020.10.11

'Tistory/Tistory Skin Edit'의 다른글

  • 현재글티스토리 블로그에 인스타그램 피드 Access Token & API 없이 사용하기

관련글

댓글

티스토리툴바