쉽고 간편한 인스타그램 추가 방법을 알려드려요. 천천히 따라와 보세요!
인스타그램 추가
인스타그램 리스트에서 인스타그램 추가 버튼을 클릭하면 연동 계정을 선택하는 화면으로 이동해요.
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% 활용하고 싶다면?
