소셜 미디어 통합을위한 8 가지 AMP 구성 요소
Google 모바일 웹 표준의 가장 큰 충돌, 가속 모바일 페이지 해결할 필요가있다. 모바일 사이트를 더 빠르게 만들기, 동안 기능적으로 풍부하고 내용이 풍부하다.. 요즘 풍부하고 매력적인 콘텐츠는 인기있는 소셜 미디어 사이트 (짹짹, 동영상, 오디오, 게시물, 사진)에서 퍼지지 않으면 상상할 수 없습니다..
확장 된 AMP 구성 요소 - 다른 훌륭한 기능들과 함께 - 통합 할 수있는 좋은 방법을 제공합니다. AMP 다양한 소셜 콘텐츠 유형이있는 문서.
확장 된 AMP 구성 요소의 작동 방식
AMP의 철학 핵심에는 Google의 최고의 실적 사례. 페이지로드 시간을 개선하기 위해 AMP 표준은 프론트 엔드 기술을 사용하는 방법. 예를 들어 맞춤 자바 스크립트, 외부 스타일 시트 및 외부 리소스를로드하는 HTML 요소를 사용할 수 없습니다 (예 :
교환으로, 당신은 무리를 얻을 AMP 구성 요소 ~ 할 수있어. 외부 자원 표시, 귀하의 사이트에있는 이미지, 비디오, 오디오, 광고 등과 같은.
AMP 구성 요소 특정 HTML 태그 일반 HTML 태그와 유사하게 사용할 수 있습니다. 그들 중 몇 명은 내장 AMP 런타임에 확장 기능으로 작동합니다.. AMP 페이지에서 소셜 미디어 통합을 가능하게하는 구성 요소 모두 확장 된 구성 요소입니다..
확장 된 AMP 구성 요소를 사용하려면 소속 된 스크립트 가져 오기 ~ 안에 AMP HTML 문서의 섹션. AMP는 오픈 소스 프로젝트이기 때문에 향후 확장 된 구성 요소의 수가 증가 할 수 있습니다..
이 게시물에서 우리는 AMP 구성 요소를 수집하여 소셜 미디어 통합. 스크립트의 버전 시간이 지나면 바뀔지도 모른다., 항상 사이트에 문서를 포함하기 전에 문서를 확인하십시오..
1. 앰프 페이스 북
당신은 항상 삽입 된 게시물의 크기를 지정하십시오., 즉, 폭 및 신장 값이 정수 픽셀 인 속성. Facebook 게시글의 상단에있는 '퍼가기'메뉴를 클릭하여 적절한 크기를 찾을 수 있습니다.
너는 또한 요구된다. 주어진 게시물의 URL을 추가하십시오. ~ 안에 데이터 href 속성. Facebook 게시물의 타임 스탬프를 클릭하여 URL을 찾을 수 있으며 브라우저는 주소 표시 줄에 고유 한 URL을 삽입합니다.
네가 원한다면 소속 된 Facebook 게시물없이 동영상을 퍼가십시오., 선택 사항을 추가하십시오. data-embed-as = "비디오" 속성
네가 원한다면 당신의 embed을 반응 적으로 만드십시오. 사용 형세 속성이있는 "반응 형" 값. 선택 사항 인 형세 레이아웃을 제어하기 위해 다른 AMP 구성 요소의 속성.
코드 예 :
코드 미리보기 :
포함시킬 스크립트 :
2. amp-twitter
너는 할 수있다. 트윗 삽입 를 사용하여 AMP 페이지로
그렇게하려면 짹짹의 ID를 지정하십시오 ~ 안에 데이터 tweetid 속성. Twitter APi의 디스플레이 옵션 중 하나를 a로 추가하여 트윗이 표시되는 방식을 수정할 수 있습니다 데이터-* HTML5 속성.
예를 들어, 아래 예제에서 나는 Twitter API를 사용했다. linkColor 옵션을 다음과 같이 표시하십시오. 데이터 링크 색 (그 데이터-* 형식)을 사용하여 Hongkiat.com이 Twitter 계정에서 사용하는 색상으로 기본 링크 색상을 변경합니다.
코드 예 :
코드 미리보기 :
그만큼 트위터는 현재 고정 된 종횡비의 트위터를 산출하는 API를 제공하지 않습니다.
.
즉, 수동으로 폭 과 신장 속성들, AMP 런타임에서 트윗의 일부 (대개 하단)를 표시하지 않는 경우가 있으므로.
AMP 페이지를 게시하기 전에 포함 된 트윗이 어떻게 보이는지 항상 확인하는 것이 좋습니다..
자리 표시 자 추가
필수는 아니지만 문서에서는 자리 표시 자 추가 한 번에 트윗이로드되지 않는 경우.
그만큼 자리 표시 자 속성은 각 AMP 구성 요소에서 사용될 수 있습니다. 자리 표시 자 즉시 보임 최종 자원을 사용할 수없는 경우 AMP 요소가로드되면 자리 표시자를 숨 깁니다..
위의 예제 코드가 어떻게 생겼는지 살펴보십시오. 자리 표시 자 포함. 트위터에서, 나는 간단하게 Embed Tweet 버튼을 클릭하고, embedding 가능한 blockquote를 복사하여 (마지막에는 스크립트없이) 추가했다. 자리 표시 자 속성을 꼬리표.
자리 표시자를 사용한 코드 예제 :
가속 모바일 페이지의 유효성을 검사하는 방법 (#AMP) #google #seo https://t.co/eVOSAtr5Ax
- 홍 키아트 (홍 흥트) 2016 년 8 월 15 일
포함시킬 스크립트 :
삼. 앰프 - 인스 타 그램
와
당신은해야합니다. 치수를 지정하십시오 의 임베드 폭 과 신장 속성을 사용하면 식별자 추가 를 사용하여 Instagram 사진 또는 비디오의 데이터 - 단축 코드 속성.
URL 끝의 식별자는 URL 아래의 사진에 대한 예입니다. https://www.instagram.com/p/-PFt7tF8Km/, 그래서 나는 사용할 필요가있다. -PFt7tF8Km 에 대한 가치로서 데이터 - 단축 코드 속성.
코드 예 :
코드 미리보기 :
응답 성있는 레이아웃, AMP는 필요한 공간을 자동으로 계산합니다. ~을 포함한다. “Instagram chrome” (계정 이름, 날짜, 좋아요 수 등).
즉, 모든 값을 사용할 수 있음을 의미합니다. 폭 과 신장, 까지 두 값이 같다. (Instagram 사진은 일반적으로 사각형입니다.) AMP 런타임은 사용 가능한 공간에 따라 이미지의 크기를 조정하므로.
사진이 정사각형이 아닌 경우 실제 사진을 지정해야합니다. 폭 과 신장 가치.
에 대한 고정 레이아웃, 너는 ~해야 해. 여분의 공간을 포함시키다. 이미지 크기를 계산할 때 Instagram 크롬에 필요한 (위쪽 및 아래쪽 : +48 픽셀, 왼쪽 및 오른쪽 : + 8 픽셀).
포함시킬 스크립트 :
4. amp-pinterest
핀 위젯 삽입
Pin 위젯을 임베드하려면 핀의 치수, URL을 지정해야합니다. 데이터 URL 속성을 추가해야합니다. data-do = "embedPin" 속성.
코드 예제 (기본 크기) :
기본 Pin 위젯은 매우 작기 때문에 더 큰 버전을 선택하려면 data-width = "medium" 속성.
코드 예제 (중간 크기) :
코드 미리보기 (중간 크기) :
핀 고정 단추 표시
당신은 또한 수 Pin It 버튼 추가 의 도움으로 AMP 페이지로 폭 과 신장 치수, 당신은 네 가지 속성을 지정하는 데 필요합니다. Pin It 버튼을 삽입하려면 다음을 수행하십시오.
data-do = "buttonPin"AMP 런타임에 Pin It 버튼이 될 것임을 알립니다.데이터 URL당신이 공유하고 싶은 URL로데이터 미디어사용자가 고정 할 이미지의 절대 URL데이터 기술핀 만들기 양식에 표시 할 설명이 포함되어 있습니다.
있다 다양한 버튼 크기, 선택할 수있는 모든 크기의 문서를 확인하십시오..
코드 예 :
이 예에서는 전 Hongkiat.com 게시물의 이미지를 고정 할 수있는 Pin It 버튼을 만들었습니다. 작은 직사각형 버튼 크기를 사용했습니다..
코드 미리보기 :
추가 CSS를 사용하여 이미지 상단에 Pin It 버튼을 표시해야합니다..
다음을 사용하여 Pinterest Follow 버튼을 만들 수도 있습니다. 데이터 - 할 = "buttonFollow" 속성을 선택하고 표시하려는 이름을 데이터 라벨 의 귀하의 계정 URL 데이터 href 속성.
코드 예제 (Follow 단추) :
포함시킬 스크립트 :
5. amp-soundcloud
SoundCloud는 사용자가 음악을 공유 할 수있는 인기있는 오디오 배포 플랫폼입니다. 의 도움으로
이 구성 요소는 오직 함께 사용 고정 높이 형세 즉, 신장, 너비는 AMP 런타임에 의해 계산됩니다. 결과적으로 임베디드 SoundCloud 오디오 플레이어는 이용 가능한 모든 수평 공간을 채우다..
그만큼 데이터 비주얼 속성을 참된 또는 그릇된 (기본값은 그릇된).
두 모드 모두에서 데이터 추적자 ~에 대한 속성 식별자를 지정하십시오. 오디오의; SoundCloud.com의 오디오 플레이어 아래에있는 공유 버튼을 클릭하고 Embed 코드에서 긴 형식의 URL을 찾아 오디오 ID를 찾을 수 있습니다.
클래식 모드
그만큼 클래식 모드 왼쪽에는 작은 미리보기 이미지가 표시되고 오른쪽에는 오디오 플레이어가 표시됩니다. 당신은 적절한 가치를 얻을 수 있습니다. 신장 SoundCloud.com의 소스 코드에서 가져온 속성.
클래식 모드에서는 오디오 플레이어의 색상을 지정할 수 있습니다. 데이터 - 색상 속성 (비주얼 모드에서는이 작업을 수행 할 수 없습니다).
코드 예 (기본 모드) :
코드 미리보기 (기본 모드) :
비주얼 모드
에서 비주얼 모드, 추천 이미지는 오디오 플레이어 뒤에 있습니다. 여기에서 적절한 도구를 찾을 수 있습니다. 신장 SoundCloud.com의 소스 코드에서 비주얼 모드에 속한다..
코드 예제 (비주얼 모드) :
코드 예제 (비주얼 모드) :
네가 원한다면 비공개 오디오를 삽입하다., 선택 사항을 사용하십시오. 데이터 - 비밀 토큰 속성.
포함시킬 스크립트 :
6. 포도 나무
Vine은 친구와 6 초 길이의 동영상을 공유 할 수있는 짧은 형식의 동영상 공유 사이트입니다. 그만큼
이 AMP 구성 요소는 매우 간단합니다. 치수 및 Vine 비디오의 ID를 데이터 vineid 속성. 각 포도 나무의 URL에서 ID를 얻을 수 있습니다..
Vines가 사각형이기 때문에 응답 레이아웃을 사용하면 Instagram 포함과 동일한 규칙이 적용됩니다. 어떤 값을 폭 과 신장 속성들, 그들이 같을 때까지 그들은 제대로 일할거야..
코드 예 :
코드 미리보기 :
포함시킬 스크립트 :
7. amp-youtube
너는 할 수있다. YouTube 동영상 퍼가기 의 도움으로 AMP 페이지에
그렇게하려면 크기를 추가하고 동영상의 ID를 데이터 - 비디오 ID 속성. 지정시 폭 과 신장, 그것은 중요합니다. 종횡비에주의를 기울이십시오..
당신은 또한 수 YouTube 퍼가기의 매개 변수 사용 AMP 문서에서 매개 변수의 이름을 삽입하기 만하면됩니다. 후 데이터 매개 변수- 접두사.
코드 예 :
이 예에서는 스타트 YouTube 매개 변수 데이터 - 매개 변수 시작 동영상을 43 초에 시작하기위한 속성.
코드 미리보기 :
포함시킬 스크립트 :
기타 비디오 공유 서비스
AMP는 또한 다른 비디오 공유 서비스와 관련된 구성 요소를 가지고 있습니다. ~와 비슷하게 작동하다
8. amp-social-share
소셜 미디어 퍼가기와 별개로 소셜 공유 버튼 표시 당신의 AMP 페이지에
소셜 공유 기능은 다음과 같습니다. 일부 공급자를 위해 사전 구성, 올바른 설정을 사용하면
미리 구성된 공유 단추
사전 구성된 공유 버튼 너무 많은 설정이 필요하지 않습니다. 당신은 폭 (기본값은 60 픽셀 임) 신장 (기본값은 44 픽셀) 속성에있는 소셜 미디어 공급자의 이름 유형 속성.
Facebook에서 Facebook 앱 ID를 지정해야합니다. data-param-app_id 속성.
코드 예 :
코드 미리보기 :
사전 구성 가정을한다. 공유하려는 URL이 현재 페이지의 표준 URL이고 공유에 포함 할 텍스트가 페이지 제목입니다..
다른 설정을 사용하려면 다음과 같이 설정하십시오 세 가지 선택적 속성:
데이터 - 텍스트공유에 포함시킬 텍스트데이터 URL당신이 공유하고 싶은 URL을 위해데이터 속성귀하의 공유가 귀속되기를 원하는 사람이나 제공자의 이름
구성되지 않은 공유 단추
의 소셜 공유 버튼을 표시하려면 구성되지 않은 공급자, WhatsApp와 같이 프로 바이더의 커스텀 프로토콜을 지정한다 ~ 안에 데이터 공유 엔드 포인트 속성. 문서에서이 작업을 수행하는 방법을 확인하십시오..
포함시킬 스크립트 :
