[프로/엔터프라이즈] 쇼핑몰에 인스타그램 위젯을 적용해보세요!
Last updated
Was this helpful?
Last updated
Was this helpful?
업데이트 일자: 2022. 04. 25
기능 요약 쇼핑몰 인스타그램 계정을 생성 후, 인스타그램 연동을 하면 게시물을 쇼핑몰에 노출 시킬 수 있습니다.
기능 추가 방법 - 샵바이 프로: 어드민> 설정> 기본정책> 외부서비스 설정 내 각 쇼핑몰 별로 연동 가능 - 샵바이 프리미엄: 서비스 어드민 > 서비스관리 > 쇼핑몰 관리 > 서비스 수정 페이지에서 각 쇼핑몰 별로 설정 가능 (참고: )
왜 만들었을까? 인스타그램 기반으로 성장한 인플루언서 쇼핑몰이거나, 인스타그램 소통이 활발한 쇼핑몰에서 핵심적인 기능입니다. 쇼핑몰 브랜딩 특색을 나타낼 수 있는 것은 물론, 인스타그램 계정을 노출하여 팔로우 수를 늘릴 수 있습니다. 인스타그램 해당 포스팅으로 즉시 링크 이동이 가능하므로, 구매 욕구를 상승시키는 인스타그램 피드나 이벤트 마케팅, 사용자 리뷰 등을 노출할 수 있습니다. 스킨(skin) 커스텀 시 중요도가 높은 매출상승 관련 API입니다.
▼ PC화면 예시
▼ 모바일화면 예시
위 하이퍼링크를 통해 API 문서를 직접 확인해보세요. 해당 API의 파라미터, 응답 값 등 상세 내용을 확인할 수 있습니다. 이 중 일부 추가 설명이 필요한 응답 값에 대해서 아래 안내 드립니다.
media_type: 미디어 유형으로 IMAGE(이미지), VIDEO(동영상), CAROUSEL_ALBUM(스와이프를 통한 여러 사진 또한 동영상 포스팅) 유형으로 응답됩니다.
인스타그램 릴스(Reels, 15분 미만의 짧은 동영상 포스팅)의 경우 현시점에서는 페이스북에서 응답 값으로 제공하고 있지 않습니다.
IPTV 역시 제공되지 않습니다.
media_url: 해당 미디어의 위치 URL입니다.
permalink: 인스타그램 개별 포스팅 링크로, 쇼핑몰에서 개별 포스팅 클릭 시 해당 포스팅으로 링크 이동합니다.
페이스북 비지니스 계정이 아닌 개인 계정도 연동 가능합니다.
쇼핑몰에 연동된 인스타그램 썸네일 클릭 시 해당 게시물 URL로 새 창 링크 이동됩니다.
이미지 캐시의 경우 1시간마다 자동 갱신됩니다. 인스타그램에 게시한 포스팅이 즉시 쇼핑몰에 적용되지 않더라도 놀라지 마세요!
스킨 패치 (샵바이프로) NHN커머스에서 직접 관리하는 기본 스킨(스킨명:Another)이 아닌, 고객사/외부 에이전시를 통해 자유롭게 커스텀된 스킨의 경우 스킨 내 변경 소스가 적용되지 않습니다. 따라서 샵바이프로는 샵바이프리미엄과 다르게 스킨을 통해 해당 기능이 제공되므로 스킨패치가 필요합니다. (ZIP, GIT방식 모두 동일합니다.)
스킨 패치(skin patch)란: 쇼핑몰 기능 개선/신규 기능 추가에 따른 쇼핑몰 스킨을 업데이트를 의미합니다. NHN커머스 쇼핑몰은 각각의 쇼핑몰 특성에 맞게 자유롭게 디자인 작업을 진행하여 운영되기 때문에, 시각적으로 표현되는 쇼핑몰 스킨을 일괄적으로 수정할 수 없습니다. 따라서 스킨패치는 필요에 따라 운영자가 직접 진행해야 합니다.
샵바이 프로 - 인스타그램에 등록된 게시글이 12개 미만일 시, 등록된 게시글만큼 위젯에 출력됩니다. - 아래와 같은 case에서, 쇼핑몰 화면 내 인스타그램 위젯 영역이 자동으로 숨김처리 됩니다. ① 유효하지 않은 토큰 및 통신오류로 인한 에러 발생 시 ② 관리자가 직접 어드민에서 연동해제 시 ③ 게시글이 없는 인스타그램 계정이 연동될 시
샵바이 프리미엄 - 샵바이프로와 달리 샵바이프리미엄은, 위와 같은 case의 처리방식을 각 고객사/개발사의 개발 과정에서 자유롭게 구현 가능합니다.
현재 샵바이프로에서 제공하는 인스타그램 위젯을 자유롭게 변형하여 스킨(skin)을 수정해보세요.
기본 스킨에서는 인스타그램 위젯을 PC(6*2) / 모바일 (3*4)로 노출하고 있으나, 그리드 모양을 변형하거나 '더보기'를 통해 감추기를 구현하는 등 자유롭게 수정 가능합니다. (인스타그램 포스팅 노출 개수에는 제한이 없습니다.) API를 통한 노출 영역 위치도 자유롭게 수정 가능합니다.
width : 16.6666% 속성은 한 열에 콘텐츠를 몇의 비율로 표시할지 결정합니다.
한 열에 6개의 콘텐츠가 아닌 4개의 콘텐츠를 표시하고자 할 경우 뷰포트의 너비 100% 를 4로 나눈 width: 25% 로 표기합니다.
연동된 인스타그램의 콘텐츠 개수(data.length)가 0 이라면 인스타그램 콘텐츠 섹션 자체를 렌더링하지 않습니다.
this.getHTMLTemplate() 의 두번째 인자는 몇 개의 콘텐츠를 슬라이스해서 사용할지 결정합니다.
가령 이 값이 16이라면 콘텐츠가 16개 이상일 때 16개의 인스타그램 콘텐츠 템플릿을 생성합니다.
존재하는 인스타그램 연동 콘텐츠의 개수가 16 미만이라면, 존재하는 콘텐츠의 개수만큼 인스타그램 콘텐츠 템플릿을 생성합니다.
■
■ 응답 값(Responses) 소개 → 해당 API는 페이스북과 통신한 API 값을 가공 없이 내려주고 있습니다. (참고: )
■ - 잠깐, 만약 샵바이 API를 어떻게 호출하는지 모른다면 위 가이드 문서부터 참고해보세요.
스킨 패치 소스와 내용에 대해서는 샵바이 스킨 패치 릴리즈 노트 링크를 참고하시길 바랍니다.
■
스킨 코드 관련해서 아래 내용을 참고하실 수 있습니다! 위에서 소개드린 샵바이프로의 에서 '업데이트 내용'으로 들어가서 코멘트나 'Changes'를 확인하면 스킨 코드를 수정하는데 도움을 받으실 수 있을 거에요.
