By aPOST in 티스토리스킨 —

티스토리 블로그에 인스타그램 피드/위젯 붙이기 완벽정리3 - 프록시 서비스를 이용해 릴레이로 연결하기

자신의 인스타그램뿐만 아니라 다른 사용자 인스타그램도 가져다 붙일 수 있습니다.

기본적으로는 자체 서버가 있는 경우에 사용할 수 있는 방법이지만, 제작자가 헤로쿠(Heroku) 클라우드에 프록시 서비스를 올려놓고 서비스를 해주고 있기 때문에 이걸 이용하면 별도 서버가 없어도 구현이 가능합니다.

다만, 개인이 제공하는 서비스여서 어느날 갑자기 헤로쿠 클라우드에 올려놓은 서비스를 종료해버리는 경우 직접 이 프록시를 자체 서버에 올려야하기 때문에 쪼끔은 안정성이 떨어집니다.

구현 방식은 CORS(Cross Origin Resource Sharing) 문제를 회피하기 위해 node.js 로 만든 프록시 서버 서비스를 올리고 프록시 서버로 릴레이한 인스타그램 피드를 자바스크립트 라이브러리를 이용해 내 블로그에 붙이는 방법입니다.

즉, 중간에 인스타그램 피드를 가져오는 서비스가 하나 더 있는 것입니다.

다소 난이도가 있는 방법이므로 기술적인 부분에 대해 잘 모르는 경우 추천하지 않습니다.

오픈소스이므로 만약의 경우 별도의 서버사이드 서비스를 구축해야 하는 경우 아래 URL에서 프록시 서버 소스를 다운 받을 수 있습니다.

GitHub - Rob--W/cors-anywhere: CORS Anywhere is a NodeJS reverse proxy which adds CORS headers to the proxied request.
CORS Anywhere is a NodeJS reverse proxy which adds CORS headers to the proxied request. - GitHub - Rob--W/cors-anywhere: CORS Anywhere is a NodeJS reverse proxy which adds CORS headers to the proxi…
GitHubRob--W

티스토리에 다른 유저의 인스타그램 피드를 붙일 필요가 있을 경우 쓸만한 방법입니다.

데모사이트가 있으므로 실제 동작하는 것을 확인할 수 있습니다.

jquery.instagramFeed

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>

3. 자바스크립트 라이브러리 초기화 설정하기

이제 자바스크립트 라이브러리를 초기화합니다.

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
  });
});

script.js 파일은 티스토리 스킨에서 기본 자바스크립트 코드를 실행하기 위해 사용하는 자바스크립트 파일입니다.파일명은 다를 수 있으므로 스킨에 포함된 자바스크립트 파일을 확인해 해당 파일을 열어 코드를 추가하면 됩니다.초기화 옵션값들의 사용법은 다음과 같습니다.

  • '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 ) 

스킨에 사용한 자바스크립트 파일이 없을 경우, 새 파일을 생성해 업로드 한 후 skin.html 맨 아래에 다음과 같은스크립트 링크를 추가해주면 됩니다.<script src="./images/자바스크립트파일명"></script>작성한 script.js 파일을 업로드한 후 블로그를 접속하면 인스타그램 피드가 해당 위치에 표시됩니다.

4. CSS 커스터마이징주의!"styling" 옵션을 "false" 로 해서 기본 css 적용을 끈 상태에서 별도의 css 적용없이 인스타그램 피드를 붙이면 원본 이미지 크기로 피드가 붙기 때문에 상당히 커다란 이미지들이 붙게 됩니다. 별도롤 css 레이아웃을 구현할게 아니면 "styling"은 "true"로 사용하는 것을 추천합니다.styling 옵션을 끝 경우 아래처럼 기본 태그로 구성된 인스타그램 피드가 컨테이너(Container)로 지정한 태그 안에 붙게 됩니다.(이미지 경로는 생략)

<div class="instagram_gallery">
    <a href="https://www.instagram.com/p/BvbpRE8Fe3_" target="_blank"
    ><img src="..."
    /></a>
    <a href="https://www.instagram.com/p/Bu4oVrrFNev" target="_blank"
    ><img src="..."
    /></a>
    <a href="https://www.instagram.com/p/BqeiC2fFX-x" target="_blank"
    ><img src="..."
    /></a>
    <a href="https://www.instagram.com/p/BqMcZHhlWVv" target="_blank"
    ><img src="..."
    /></a>
    <a href="https://www.instagram.com/p/Bp4MzpdlJUi" target="_blank"
    ><img src="..."
    /></a>
    <a href="https://www.instagram.com/p/Bp1TDv8FtmU" target="_blank"
    ><img src="..."
    /></a>
    <a href="https://www.instagram.com/p/BplmxrnlBCV" target="_blank"
    ><img src="..."
    /></a>
    <a href="https://www.instagram.com/p/BpgynpvlasC" target="_blank"
    ><img src="..."
    /></a>
</div>

아래 css 코드 샘플을 style.css 파일에 추가로 붙여넣은 후 css 속성값을 정의하면 인스타그램 피드 이미지들을 재배치 할 수 있습니다.

.instagram_gallery {  /* 피드 전체 레이아웃 */}
.instagram_gallery > a {  /* 피드 개별 이미지 하이퍼링크 */}
.instagram_gallery img {  /* 피드 개별 이미지 크기 및 속성 */}
티스토리스킨 관련글
글 229 개 모두보기 →