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

&#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 미만이라면, 존재하는 콘텐츠의 개수만큼 인스타그램 콘텐츠 템플릿을 생성합니다.


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://workspace-help.nhn-commerce.com/contents/recommended/undefined.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.