> For the complete documentation index, see [llms.txt](https://workspace-help.nhn-commerce.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://workspace-help.nhn-commerce.com/contents/recommended/undefined.md).

# \[프로/엔터프라이즈] 쇼핑몰에 인스타그램 위젯을 적용해보세요!

&#x20;업데이트 일자: 2022. 04. 25<br>

```
[API 소개]

최근 업데이트된 주요 API에 대해 소개하고 
해당 API에 대한 문의나 활용 방법을 함께 논의하기 위해 작성된 콘텐츠 입니다. 
활용 시 쇼핑몰 매출 상승에 임팩트가 있는 API를 중점적으로 소개할 예정입니다. 

앞으로도 지속적으로 API 관련 콘텐츠를 업로드할 예정이니
API에 대해 더 궁금한 점을 아래 댓글을 통해 알려주시면, 다음 콘텐츠에 반영될 수 있습니다.
```

<br>

#### 인스타그램 위젯기능 및 API <a href="#ec-9d-b8-ec-8a-a4-ed-83-80-ea-b7-b8-eb-9e-a8-ec-9c-84-ec-a0-af-ea-b8-b0-eb-8a-a5-eb-b0-8f-api" id="ec-9d-b8-ec-8a-a4-ed-83-80-ea-b7-b8-eb-9e-a8-ec-9c-84-ec-a0-af-ea-b8-b0-eb-8a-a5-eb-b0-8f-api"></a>

#### 01. 간단 소개 <a href="#ea-b0-84-eb-8b-a8-ec-86-8c-ea-b0-9c" id="ea-b0-84-eb-8b-a8-ec-86-8c-ea-b0-9c"></a>

* 기능 요약\
  쇼핑몰 인스타그램 계정을 생성 후, 인스타그램 연동을 하면 게시물을 쇼핑몰에 노출 시킬 수 있습니다.<br>
* 기능 추가 방법\
  \- 샵바이 프로: 어드민> 설정> 기본정책> 외부서비스 설정 내 각 쇼핑몰 별로 연동 가능\
  \- 샵바이 프리미엄: 서비스 어드민 > 서비스관리 > 쇼핑몰 관리 > 서비스 수정 페이지에서 각 쇼핑몰 별로 설정 가능\
  (참고: [인스타그램 위젯 기능 추가 안내](https://www.nhn-commerce.com/customer/patch-view.gd?sno=4023))\ <br>
* 왜 만들었을까?\
  인스타그램 기반으로 성장한 인플루언서 쇼핑몰이거나, 인스타그램 소통이 활발한 쇼핑몰에서 핵심적인 기능입니다.\
  쇼핑몰 브랜딩 특색을 나타낼 수 있는 것은 물론, 인스타그램 계정을 노출하여 팔로우 수를 늘릴 수 있습니다.\
  인스타그램 해당 포스팅으로 즉시 링크 이동이 가능하므로, 구매 욕구를 상승시키는 인스타그램 피드나 이벤트 마케팅, 사용자 리뷰 등을 노출할 수 있습니다.\
  스킨(skin) 커스텀 시 중요도가 높은 매출상승 관련 API입니다.

<br>

<br>

▼ PC화면 예시<br>

![](https://rlyfaazj0.toastcdn.net/20220425/114358.431967000/image.png)

▼ 모바일화면 예시

<figure><img src="/files/kE8vOhl5F7dsDhh3zdR2" alt=""><figcaption></figcaption></figure>

#### 02. API 소개 <a href="#api-ec-86-8c-ea-b0-9c" id="api-ec-86-8c-ea-b0-9c"></a>

■ [instagram 피드 조회 API 바로 확인하기](https://docs.shopby.co.kr/?url.primaryName=manage/#/Instagram/get-instagram-media)&#x20;

```
GET /shopby/instagram/media 
위젯을 통해 인스타그램 피드(게시글 목록)을 조회하는 API입니다.
```

위 하이퍼링크를 통해 API 문서를 직접 확인해보세요. 해당 API의 파라미터, 응답 값 등 상세 내용을 확인할 수 있습니다.\
이 중 일부 추가 설명이 필요한 응답 값에 대해서 아래 안내 드립니다.

\
■ 응답 값(Responses) 소개\
→  해당 API는 페이스북과 통신한 API 값을 가공 없이 내려주고 있습니다.\
&#x20;   (참고: <https://developers.facebook.com/docs/instagram-basic-display-api/reference/media?locale=ko_KR>)\ <br>

* `media_type`: 미디어 유형으로 IMAGE(이미지), VIDEO(동영상),  CAROUSEL\_ALBUM(스와이프를 통한 여러 사진 또한 동영상 포스팅) 유형으로 응답됩니다.\
  &#x20; 인스타그램 릴스(Reels, 15분 미만의 짧은 동영상 포스팅)의 경우 현시점에서는 페이스북에서 응답 값으로 제공하고 있지 않습니다.\
  &#x20; IPTV 역시 제공되지 않습니다.
* `media_url`: 해당 미디어의 위치 URL입니다.
* `permalink`: 인스타그램 개별 포스팅 링크로, 쇼핑몰에서 개별 포스팅 클릭 시 해당 포스팅으로 링크 이동합니다.\ <br>

■ [API 호출 URI](https://shopby.works/guide/dev-cover/call-api?lv=6)\
\- 잠깐, 만약 샵바이 API를 어떻게 호출하는지 모른다면 위 가이드 문서부터 참고해보세요.

\ <br>

#### 03. 꼭 참고해주세요 <a href="#ea-bc-a-d-ec-b0-b8-ea-b3-a0-ed-95-b4-ec-a3-bc-ec-84-b8-ec-9a-94" id="ea-bc-a-d-ec-b0-b8-ea-b3-a0-ed-95-b4-ec-a3-bc-ec-84-b8-ec-9a-94"></a>

* 페이스북 비지니스 계정이 아닌 개인 계정도 연동 가능합니다.
* 쇼핑몰에 연동된 인스타그램 썸네일 클릭 시 해당 게시물 URL로 새 창 링크 이동됩니다.
* 이미지 캐시의 경우 1시간마다 자동 갱신됩니다. 인스타그램에 게시한 포스팅이 즉시 쇼핑몰에 적용되지 않더라도 놀라지 마세요!\ <br>
* 스킨 패치 (샵바이프로)\
  NHN커머스에서 직접 관리하는 기본 스킨(스킨명:Another)이 아닌, 고객사/외부 에이전시를 통해 자유롭게 커스텀된 스킨의 경우\
  스킨 내 변경 소스가 적용되지 않습니다.\
  따라서 샵바이프로는 샵바이프리미엄과 다르게 스킨을 통해 해당 기능이 제공되므로 스킨패치가 필요합니다. (ZIP, GIT방식 모두 동일합니다.)
* 스킨 패치(skin patch)란: 쇼핑몰 기능 개선/신규 기능 추가에 따른 쇼핑몰 스킨을 업데이트를 의미합니다. \
  NHN커머스 쇼핑몰은 각각의 쇼핑몰 특성에 맞게 자유롭게 디자인 작업을 진행하여 운영되기 때문에, 시각적으로 표현되는 쇼핑몰 스킨을 일괄적으로 수정할 수 없습니다. 따라서 스킨패치는 필요에 따라 운영자가 직접 진행해야 합니다.\ <br>
* 스킨 패치 소스와 내용에 대해서는  `샵바이 스킨 패치 릴리즈 노트` 링크를 참고하시길 바랍니다.\
  ■ [샵바이 스킨 패치 릴리즈 노트](https://gitlab-themes.shopby.co.kr/nhn-commerce-fe/releases/shopby-pro-easy-skin/-/releases/v1.1.0) \ <br>
* 샵바이 프로 \
  \- 인스타그램에 등록된 게시글이 12개 미만일 시, 등록된 게시글만큼 위젯에 출력됩니다.\
  \- 아래와 같은 case에서, 쇼핑몰 화면 내 인스타그램 위젯 영역이 자동으로 숨김처리 됩니다.\
  ① 유효하지 않은 토큰 및 통신오류로 인한 에러 발생 시\
  ② 관리자가 직접 어드민에서 연동해제 시\
  ③ 게시글이 없는 인스타그램 계정이 연동될 시\ <br>
* 샵바이 프리미엄\
  \- 샵바이프로와 달리 샵바이프리미엄은, 위와 같은 case의 처리방식을 각 고객사/개발사의 개발 과정에서 자유롭게 구현 가능합니다.

<br>

<br>

#### 04. API 활용 방법 <a href="#api-ed-99-9c-ec-9a-a9-eb-b0-a9-eb-b2-95" id="api-ed-99-9c-ec-9a-a9-eb-b0-a9-eb-b2-95"></a>

\
현재 샵바이프로에서 제공하는 인스타그램 위젯을 자유롭게 변형하여 스킨(skin)을 수정해보세요.

\
기본 스킨에서는 인스타그램 위젯을 PC(6\*2) / 모바일 (3\*4)로 노출하고 있으나,  그리드 모양을 변형하거나 '더보기'를 통해 감추기를 구현하는 등 자유롭게 수정 가능합니다.  (인스타그램 포스팅 노출 개수에는 제한이 없습니다.)\
API를 통한 노출 영역 위치도 자유롭게 수정 가능합니다.

\
스킨 코드 관련해서 아래 내용을 참고하실 수 있습니다!\
위에서 소개드린 샵바이프로의 [스킨패치 릴리즈노트](https://gitlab-themes.shopby.co.kr/nhn-commerce-fe/releases/shopby-pro-easy-skin/-/releases/v1.1.0)에서\
'업데이트 내용'으로 들어가서 코멘트나 'Changes'를 확인하면 스킨 코드를 수정하는데 도움을 받으실 수 있을 거에요.

\ <br>

<figure><img src="https://rlyfaazj0.toastcdn.net/20220425/120320.373349000/image.png" alt=""><figcaption></figcaption></figure>

`width : 16.6666%` 속성은 한 열에 콘텐츠를 몇의 비율로 표시할지 결정합니다.\
한 열에 6개의 콘텐츠가 아닌 4개의 콘텐츠를 표시하고자 할 경우 뷰포트의 너비 100% 를 4로 나눈 `width: 25%` 로 표기합니다.

<br>

<figure><img src="https://rlyfaazj0.toastcdn.net/20220425/120346.52246000/image.png" alt=""><figcaption></figcaption></figure>

연동된 인스타그램의 콘텐츠 개수(`data.length`)가 0 이라면 인스타그램 콘텐츠 섹션 자체를 렌더링하지 않습니다.

![](https://rlyfaazj0.toastcdn.net/20220425/120406.788490000/image.png)

`this.getHTMLTemplate()` 의 두번째 인자는 몇 개의 콘텐츠를 슬라이스해서 사용할지 결정합니다.\
가령 이 값이 16이라면 콘텐츠가 16개 이상일 때 16개의 인스타그램 콘텐츠 템플릿을 생성합니다.\
존재하는 인스타그램 연동 콘텐츠의 개수가 16 미만이라면, 존재하는 콘텐츠의 개수만큼 인스타그램 콘텐츠 템플릿을 생성합니다.