Amazon Astore를 Facebook 페이지에 무료로 포함하는 방법

페이스 북의 스토어?

제휴 마케팅이 당신을위한 것이라고 결정하셨습니다. Amazon aStore를 구축했습니다. 당신은 당신의 시간을 보냈고, 그것에 추가 할 제품들을 부지런히 살펴 보았습니다…

소셜 미디어의 힘을 활용하여 제휴 마케팅 활동에 전념하는 Facebook 페이지도 있습니다… 페이지를 시각적으로 명확하게 표현하기 위해 타임 라인 표지 사진을 만들었습니다… 특정 제품에 대한 링크와 함께 해당 Facebook 페이지에 상태 업데이트를 게시합니다. 당신의 상점에서…

하지만 페이스 북 페이지에서 aStore 전체를 보여줄 수 있다면 멋지지 않을까요? 글쎄… 넌 할 수있어!

사용자 정의 탭은 관리하기가 매우 쉽습니다. 탭 자체에 표시되는 이미지와 제목 텍스트를 사용자 지정할 수도 있습니다.

예

예를 들어 Communist Closet Facebook 페이지를 살펴보십시오. "소비에트 상점?"이라는 탭이 있습니다.

소련 상점은 약간의 HTML과 "Facebook-legal"앱이있는 Facebook 페이지에 직접 삽입 된 Amazon aStore입니다. 아니, 우리는 아무것도 해킹하지 않고 단지 자원을 사용합니다.

필요한 것

Facebook 페이지에 대한 관리자 액세스 (만든 경우 이미 관리자 액세스 권한이 있음)
무료 사용자 정의 탭 앱 (정적 HTML 사용: iframe 탭)
Amazon aStore 및 관련 링크

호의를 베푸십시오… Facebook 및 Amazon Associate Central을 별도의 브라우저 탭 (또는 원하는 경우 별도의 브라우저)에서 열도록하십시오. 이렇게하면 필요한 경우 둘 사이를 오갈 수 있습니다.

앱 추가

Facebook 내 앱 (위 링크 포함)으로 이동하고 "설치"버튼을 클릭하여 앱을 페이지에 추가합니다. 다음 화면에서 두 개 이상의 Facebook 페이지를 관리하는 경우 앱이 설치 대상 (앱을 설치할 페이지)을 확인하라는 메시지를 표시합니다.

적절한 대상 페이지를 선택하고 "설치"버튼을 클릭하여 확인합니다. 예, 정말 간단합니다.

탭 내용 편집

앱 설치가 완료되면 페이지로 돌아갑니다. "환영합니다!"라는 새 탭이 있습니다. 화면에. 그것을 클릭하고 약간의 마술을하자!

아직 탭 제목과 이미지에 대해 걱정하지 마십시오. 곧 이에 대해 설명하겠습니다.

새 환영 탭을 클릭하면이 편집 화면으로 이동합니다. 여기에서 다음을 수행 할 수 있습니다.

index.html 섹션에서 "코드"호스팅
style.css 및 script.js 섹션에서 추가 코드 구성 (고급 사용자 용)
탭 설정 변경
Fan-Gate 만들기 (다른 허브에서 수행)

기본적으로 앱의 index.html 섹션으로 이동합니다 (여기에서 모든 작업을 수행합니다). 해당 섹션의 기존 텍스트를 삭제하십시오.

스토어 코드 받기

Amazon의 Associate Central에서:

화면 왼쪽 상단의 드롭 다운 메뉴를 사용하여 aStore의 적절한 추적 ID를 선택하십시오. (동일한 계정에 여러 개의 aStore가있는 경우에만 필요합니다. aStore가 하나뿐이라면이 단계에 대해 걱정하지 마십시오.)
왼쪽 메뉴에서 "링크 가져 오기"를 클릭합니다.
페이지에 "당신의 상점이 게시되었습니다!"라는 새 화면이 표시됩니다. 공지 사항 바로 아래에 여러 버전의 aStore 링크가 표시됩니다.
"인라인 프레임을 사용하여 내 상점 삽입"옵션을 선택하십시오. 이 코드를 약간 수정하여 Facebook 통합에 최적화 할 것입니다.
텍스트 상자의 모든 코드를 복사하여 Facebook 내의 앱 (index.html 섹션)에 붙여 넣습니다.

작업 할 코드는 다음과 같아야합니다.

보안 URL

링크 코드를 앱에 처음 붙여 넣으면 aStore URL이 안전하지 않다는 경고 메시지가 표시됩니다. 아니요, 링크는 소스 코드가 뚱뚱해 보이는지 묻지 않습니다. 그러나 일부 브라우저는 스토어가 보안 서버에서 호스팅된다고 "생각"하지 않기 때문에 귀하의 aStore를 제대로 표시하지 못할 수 있습니다. 이것은 쇼핑 할 때 잠재 고객을 편집증으로 만들고 싶지 않기 때문에 여기서 특히 중요합니다.

자, 먼저… 코드 내의 http: //를 http s: //로 변경하십시오.

디스플레이 치수 조정

이제 Facebook 페이지 내에서 aStore의 표시 크기를 변경합니다.

너비가 90 %로 설정되어 있습니다. 이것은 브라우저가 현재 페이지 크기로 계산하는 것의 90 %입니다. 이것은 절대적으로 정확하지 않을 것입니다. iframe 앱에 맞게 너비를 815 픽셀로 지정하겠습니다.

width = "90 %"를 width = "815px"로 변경합니다.

또한 높이를 (대폭) 1000 또는 1200 픽셀로 줄이는 것이 좋습니다. 그것은 당신의 콘텐츠를 조금 더 포함시킬 것입니다…

height = "4000"을 height = "1200px"로 변경하십시오.

스크롤 허용

aStore는 상당히 길어질 수 있습니다 (지정된 원래 4000 픽셀보다 길어도 됨). 이는 일반적으로 제품 설명이 길고 여러 제품 리뷰가 게시 된 경우에 발생합니다. 기본적으로 스크롤은 비활성화되어 있으며 지정된 높이를 초과하는 콘텐츠가 잘립니다. 귀하의 aStore를 제한하고 싶지 않기 때문에 스크롤을 활성화합니다.

scrolling = "no"를 scrolling = "yes"로 변경하십시오.

완성 된 코드는 이제 다음과 같이 보일 것입니다.

오른쪽 상단 모서리에있는 "저장 및 게시"버튼을 누르는 것을 잊지 마십시오. 또한 인접한 "미리보기"버튼을 사용하여 언제든지 작업을 미리 볼 수 있습니다.

까다 롭다, 까다 롭다…

좋아, 나는 꼼꼼히하겠다… 우리는 iframe 앱 내에 iframe 코드를 가지고있다. 예, 중복됩니다. 예, 수정해야합니다. 하지만이 초급 레벨 가이드에서는 사용하기 쉽도록 그대로 두겠습니다. 나를 판단하지 마십시오.

맞춤형 버튼

이제 aStore 통합이 완료되었으므로 성가신 "환영합니다!" 좀 더 의미있게 보이도록 첫 페이지의 버튼을 누르세요.

Facebook 페이지의 "프론트 엔드"로 돌아갑니다.
모든 페이지 탭의 바로 오른쪽에있는 작은 버튼 (아래쪽을 향한 삼각형이있는)을 클릭합니다.
페이지가 확장되면 새로운 "환영합니다!"위로 마우스를 가져갑니다. 탭.
탭 위에 새 아이콘 (연필)이 나타납니다. 새 드롭 다운 메뉴를 보려면이 아이콘을 클릭하십시오.

드롭 다운 메뉴에서 "설정 수정"을 클릭합니다.
탭 이름을 변경하고 버튼으로 표시 할 사용자 지정 이미지를 추가 할 수있는 팝업 창이 나타납니다.
원하는대로 탭을 사용자 정의하십시오.