코드앤버터 사용 가이드
home

인스타그램 추가하기

쉽고 간편한 인스타그램 추가 방법을 알려드려요. 천천히 따라와 보세요!

인스타그램 추가

인스타그램 리스트에서 인스타그램 추가 버튼을 클릭하면 연동 계정을 선택하는 화면으로 이동해요.

1단계. 계정 연동

인스타그램의 계정을 연동하는 단계에요.
❶ 인스타그램명
인스타그램명에 커서를 올리거나, 클릭하여 인스타그램명을 수정할 수 있어요.
❷ 인스타그램의 단계 버튼
인스타그램 피드를 꾸미고 노출하는 각 단계로 이동할 수 있는 버튼이에요.
인스타그램의 계정을 연동하는 계정 연동, 원하는 목적에 따라 인스타그램을 꾸밀 수 있는 꾸미기, 인스타그램을 노출시킬 수 있는 스크립트 추가의 단계가 있어요.
❸ 내 계정 피드 가져오기 버튼 클릭 시
인스타그램 로그인 > 개인 정보 동의 및 권한 허용 팝업
❹ 타 계정 피드 가져오기 버튼 클릭 시
페이스북 로그인 > 개인 정보 동의 팝업 > 권한 허용 팝업 → 인스타그램 계정 선택 또는 검색 (비즈니스, 크리에이터 계정만 가능해요.)

2단계. 꾸미기

인스타그램을 원하는 목적에 따라 꾸밀 수 있는 꾸미기 단계에요.
❶ 레이아웃과 셀 간격 설정
인스타그램의 레이아웃과 셀 간격을 설정할 수 있어요.
❷ 레이어
레이어에서 수정이 필요한 부분을 선택할 수 있어요.
❸ 디자인과 설정
디자인 수정과 이동될 페이지를 설정할 수 있어요.
❹ 수정 화면
클릭 및 드래그하여 팝업을 수정할 수 있어요.

3단계. 스크립트 추가

인스타그램 추가하기의 마지막 단계에요. 스크립트를 추가해야 사이트에 팝업을 노출할 수 있어요.
❶ 스크립트 설치 방법

방법 1. HTML 방식을 사용할 수 있는 경우

<div data-cb-embedded="instagram-v2" data-campaign-id="iqvjidsociaz"></div>
Markup
복사
2.
위의 인스타그램 피드 <HTML> 코드를 원하는 영역에 붙여 넣으세요. (<Body>와 </Body> 사이)
3.
이제 웹사이트를 새로고침하면 인스타그램이 노출된 것을 확인할 수 있어요.
4.
만약 인스타그램 크기나 세부적인 위치 조절이 필요하다면 CSS나 붙여 넣은 태그 안에 스타일 속성을 이용하여 꾸며주세요.
❷ 다른 방법은 없나요?

방법 2. HTML 방식을 사용할 수 없는 경우 (iframe 방식)

<iframe src="https://buttr.dev/widget/instagram-v2.html?siteId=litysesthx&campaignId=iqvjidsociaz"></iframe>
Markup
복사
1.
(이 방법은 코드앤버터 스크립트를 설치하지 않아도 돼요.)
2.
위의 인스타그램 피드 <iframe> 코드를 원하는 영역에 붙여 넣으세요.(<Body>와 </Body> 사이)
3.
이제 웹사이트를 새로고침하면 인스타그램이 노출된 것을 확인할 수 있어요.
4.
만약 인스타그램 크기나 세부적인 위치 조절이 필요하다면 CSS나 붙여 넣은 태그 안에 스타일 속성을 이용하여 꾸며주세요.
[마케팅 레시피] 인스타그램 기능을 200% 활용하고 싶다면?