8 AMP Components สำหรับการรวม Social Media

ความขัดแย้งที่ยิ่งใหญ่ที่สุดที่ Google เป็นเว็บมาตรฐานมือถือ, เร่งหน้ามือถือ ต้องแก้คือ ทำให้ไซต์บนมือถือเร็วขึ้น, ในขณะที่ ทำให้พวกเขาใช้งานได้และมีเนื้อหาสมบูรณ์. วันนี้เนื้อหาที่สมบูรณ์และมีส่วนร่วมแทบจะไม่สามารถจินตนาการได้โดยไม่ต้องฝังจากเว็บไซต์สื่อสังคมยอดนิยม - ทวีต, วิดีโอ, ไฟล์เสียง, โพสต์, ภาพถ่าย.

ส่วนประกอบ AMP เพิ่มเติม - ท่ามกลางคุณสมบัติที่ยอดเยี่ยมอื่น ๆ - เป็นวิธีที่ยอดเยี่ยมในการผสานรวม แอมป์ เอกสารที่มีประเภทเนื้อหาโซเชียลต่าง ๆ.

ส่วนประกอบแอมป์ขยายทำงานอย่างไร

แก่นแท้ของปรัชญาของ AMP นั้นเป็นของ Google แนวทางปฏิบัติที่ดีที่สุด. เพื่อปรับปรุงเวลาในการโหลดหน้าเว็บมาตรฐานของ AMP จำกัด วิธีที่คุณสามารถใช้เทคโนโลยีส่วนหน้า. ตัวอย่างเช่นคุณไม่สามารถใช้ JavaScript ที่กำหนดเองสไตล์ชีตภายนอกและองค์ประกอบ HTML ใด ๆ ที่โหลดทรัพยากรภายนอกเช่น แท็ก.

ในการแลกเปลี่ยนคุณจะได้รับ ส่วนประกอบของ AMP คุณสามารถใช้เพื่อ แสดงทรัพยากรภายนอก, เช่นรูปภาพวิดีโอไฟล์เสียงโฆษณา ฯลฯ ในเว็บไซต์ของคุณ.

ส่วนประกอบของ AMP คือ แท็ก HTML เฉพาะ ที่สามารถใช้คล้ายกับแท็ก HTML ทั่วไป ไม่กี่ของพวกเขาคือ สร้างขึ้นใน เพื่อรันไทม์ AMP ในขณะที่ส่วนใหญ่ ทำงานเป็นส่วนขยาย. ส่วนประกอบที่ทำให้การรวมสื่อสังคมออนไลน์เป็นไปได้ในหน้า AMP เป็นส่วนประกอบเพิ่มเติมทั้งหมด.

แอมป์ขยายเพิ่มเติมต้องการให้คุณ นำเข้าสคริปต์ที่เป็นของ ใน ส่วนของเอกสาร AMP HTML ของคุณ เนื่องจาก AMP เป็นโครงการโอเพ่นซอร์สจำนวนส่วนประกอบที่ขยายอาจเพิ่มขึ้นในอนาคต.

ในโพสต์นี้เราได้รวบรวม AMP Components ที่สามารถช่วยคุณได้ ด้วยการรวมสื่อสังคมออนไลน์. โปรดทราบว่าเวอร์ชันของสคริปต์ อาจมีการเปลี่ยนแปลงเมื่อเวลาผ่านไป, ดังนั้นโปรดตรวจสอบเอกสารก่อนที่จะรวมไว้ในเว็บไซต์ของคุณ.

1. แอมป์ Facebook

ทำให้มันเป็นไปได้ ฝังโพสต์หรือวิดีโอ Facebook ลงในหน้า AMP.

คุณจำเป็นต้อง ระบุขนาดของโพสต์ฝังตัว, ซึ่งหมายความว่าคุณต้องเพิ่ม ความกว้าง และ ความสูง คุณลักษณะที่มีค่าเป็นพิกเซลจำนวนเต็ม คุณสามารถค้นหาขนาดที่เหมาะสมได้โดยคลิกที่เมนู "ฝัง" ที่ด้านบนของโพสต์ Facebook.

คุณจะต้อง เพิ่ม URL ของโพสต์ที่ได้รับ ใน ข้อมูล href คุณลักษณะ คุณสามารถค้นหา URL ได้โดยคลิกที่เวลาประทับของโพสต์ Facebook และเบราว์เซอร์จะแทรก URL ที่ไม่ซ้ำกันลงในแถบที่อยู่.

ถ้าคุณต้องการ ฝังวิดีโอโดยไม่มีโพสต์ Facebook ที่เป็นของ, เพิ่มตัวเลือก ข้อมูลฝัง-AS = "วิดีโอ" คุณลักษณะ

ถ้าคุณต้องการ ทำให้การฝังของคุณตอบสนอง ใช้ แบบ คุณลักษณะที่มี "ตอบสนอง" ราคา. คุณยังสามารถใช้ตัวเลือก แบบ คุณลักษณะของส่วนประกอบ AMP อื่น ๆ เพื่อควบคุมการจัดวาง.

ตัวอย่างรหัส:

ตัวอย่างโค้ด:

สคริปต์ที่จะรวม:

2. แอมป์ทวิตเตอร์

คุณสามารถ ทวีตฝัง ลงในหน้า AMP โดยใช้ ส่วนประกอบ.

ในการทำเช่นนั้นคุณต้อง ระบุ ID ของทวีต ใน ข้อมูล tweetid คุณลักษณะ คุณสามารถแก้ไขวิธีการแสดงทวีตโดยเพิ่มตัวเลือกการแสดงใด ๆ ของ Twitter APi เป็น ข้อมูล-* คุณลักษณะ HTML5.

ตัวอย่างเช่นในตัวอย่างด้านล่างฉันใช้ Twitter API linkColor แสดงตัวเลือกเป็น เชื่อมโยงข้อมูลสี (ของมัน ข้อมูล-* รูปแบบ) เพื่อเปลี่ยนสีลิงค์เริ่มต้นเป็นสี Hongkiat.com ใช้ในบัญชี Twitter.

ตัวอย่างรหัส:

ตัวอย่างโค้ด:

องค์ประกอบยังไม่สมบูรณ์ Github docs บอกว่า Twitter ไม่ได้จัดทำ API ที่ให้อัตราส่วนภาพคงที่ทวีตฝัง.

ซึ่งหมายความว่าคุณต้อง ตั้งค่าด้วยตนเอง ความกว้าง และ ความสูง แอตทริบิวต์, เนื่องจากบางครั้งรันไทม์ของ AMP ไม่แสดงส่วนของทวีต.

เป็นความคิดที่ดีเสมอที่จะตรวจสอบว่าทวีตฝังตัวของคุณมีลักษณะอย่างไรก่อนเผยแพร่หน้า AMP.

เพิ่มตัวแทน

แม้ว่าจะไม่จำเป็นต้องใช้เอกสารแนะนำ เพิ่มตัวแทน ในกรณีที่ทวีตไม่โหลดขึ้นมาทันที.

ตัวยึด สามารถใช้แอตทริบิวต์ในแต่ละส่วนประกอบ AMP ตัวยึดตำแหน่งคือ แสดงทันที หากทรัพยากรสุดท้ายไม่สามารถใช้ได้ เมื่อองค์ประกอบ AMP โหลดขึ้นมา ซ่อนตัวยึดตำแหน่ง.

ลองดูว่าโค้ดตัวอย่างข้างต้นมีลักษณะเป็นอย่างไร กับตัวแทน. บน Twitter ฉันเพียงคลิกที่ปุ่มทวีตฝังคัดลอกบล็อกโควต้าที่ฝังได้ (ไม่มีสคริปต์ในตอนท้าย) และเพิ่ม ตัวยึด คุณลักษณะของ

แท็ก.

ตัวอย่างรหัสกับตัวยึดตำแหน่ง:

  
 
วิธีตรวจสอบความถูกต้องของหน้ามือถือเร่งความเร็ว (#AMP) #Google #seo https://t.co/eVOSAtr5Ax 
 - หงคีต (@hongkiat)  15 สิงหาคม 2559 
  

สคริปต์ที่จะรวม:

3. แอมป์ Instagram

กับ , คุณสามารถ ฝังรูปภาพและวิดีโอ Instagram ลงในหน้า AMP ของคุณ.

คุณจะต้อง ระบุขนาด ของการฝังด้วย ความกว้าง และ ความสูง คุณลักษณะและคุณต้อง เพิ่มตัวระบุ ของรูปภาพ Instagram หรือวิดีโอโดยใช้ ข้อมูลรหัสผู้ใช้ คุณลักษณะ.

คุณสามารถหาตัวระบุที่ท้าย URL ได้ตัวอย่างเช่นภาพถ่ายด้านล่าง URL คือ https://www.instagram.com/p/-PFt7tF8Km/, ดังนั้นฉันต้องใช้ -PFt7tF8Km เป็นค่าสำหรับ ข้อมูลรหัสผู้ใช้ คุณลักษณะ.

ตัวอย่างรหัส:

ตัวอย่างโค้ด:

สำหรับเลย์เอาต์ตอบสนอง, AMP คำนวณพื้นที่ที่ต้องการโดยอัตโนมัติเช่นกัน รวมถึง “โครเมี่ยม Instagram” (ชื่อบัญชีวันที่จำนวนรายการที่ชอบ ฯลฯ ).

ซึ่งหมายความว่าคุณสามารถใช้ค่าใดก็ได้สำหรับ ความกว้าง และ ความสูง, จนกระทั่ง สองค่าเท่ากัน (ภาพถ่าย Instagram มักเป็นรูปสี่เหลี่ยม) เนื่องจาก AMP runtime จะปรับขนาดรูปภาพตามพื้นที่ว่าง.

หากภาพถ่ายไม่ได้เป็นรูปสี่เหลี่ยมจัตุรัสคุณต้องระบุจริง ความกว้าง และ ความสูง ค่า.

สำหรับ รูปแบบคงที่, คุณต้องการ รวมถึงพื้นที่พิเศษ (บนและล่าง: +48 px, ซ้ายและขวา: + 8px) จำเป็นสำหรับ Chrome chrome เมื่อคุณคำนวณขนาดภาพ.

สคริปต์ที่จะรวม:

4. แอมป์ pinterest

ช่วยให้คุณ ฝังวิดเจ็ต Pin หรือปุ่ม Pin It ลงในเอกสาร AMP HTML.

ฝังวิดเจ็ต Pin

ในการฝังวิดเจ็ต Pin คุณจะต้องระบุขนาด URL ของหมุดโดยใช้ ข้อมูล URL คุณลักษณะและคุณต้องเพิ่ม ข้อมูลทำ = "embedPin" คุณลักษณะ.

ตัวอย่างรหัส (ขนาดเริ่มต้น):

เนื่องจากวิดเจ็ต Pin เริ่มต้นมีขนาดค่อนข้างเล็กคุณสามารถเลือกใช้รุ่นที่ใหญ่กว่าได้โดยใช้ ข้อมูล width = "กลาง" คุณลักษณะ.

ตัวอย่างรหัส (ขนาดกลาง):

ตัวอย่างโค้ด (ขนาดกลาง):

แสดงปุ่ม Pin It

นอกจากนี้คุณยังสามารถ เพิ่มปุ่ม Pin It ไปที่หน้า AMP ของคุณด้วยความช่วยเหลือของ ส่วนประกอบ นอกเหนือจาก ความกว้าง และ ความสูง ขนาดคุณ ต้องระบุแอตทริบิวต์สี่รายการ เพื่อที่จะฝังปุ่ม Pin It:

1. ข้อมูลทำ = "buttonPin" เพื่อให้ AMP runtime รู้ว่านี่จะเป็นปุ่ม Pin It
2. ข้อมูล URL ด้วย URL ที่คุณต้องการแบ่งปัน
3. ข้อมูลสื่อ ด้วย URL ที่แน่นอนของภาพที่คุณต้องการให้ผู้ใช้ตรึง
4. ข้อมูลรายละเอียด ด้วยคำอธิบายที่คุณต้องการให้ปรากฏในแบบฟอร์มสร้างพิน

มี มีปุ่มหลายขนาด, เพื่อเลือกจากตรวจสอบเอกสารสำหรับทุกขนาดที่มี.

ตัวอย่างรหัส:

ในตัวอย่างนี้ฉันสร้างปุ่ม Pin It ที่จะอนุญาตให้ผู้ใช้ตรึงรูปภาพจากโพสต์ Hongkiat.com เดิมนี้ ฉันใช้ปุ่มสี่เหลี่ยมขนาดเล็ก.

ตัวอย่างโค้ด:

โปรดทราบว่าคุณต้องใช้ CSS เพิ่มเติมเพื่อแสดงปุ่ม Pin It ที่ด้านบนของภาพ.

คุณยังสามารถสร้างปุ่มติดตาม Pinterest โดยใช้ปุ่ม ข้อมูลทำ = "buttonFollow" แอตทริบิวต์และระบุชื่อที่คุณต้องการแสดงภายในปุ่มติดตามใน ข้อมูลฉลาก & URL ของบัญชีของคุณใน ข้อมูล href คุณลักษณะ.

ตัวอย่างรหัส (ปุ่มติดตาม):

สคริปต์ที่จะรวม:

5. แอมป์ SoundCloud

SoundCloud เป็นแพลตฟอร์มการกระจายเสียงยอดนิยมที่ผู้ใช้สามารถแบ่งปันเพลงของพวกเขา ด้วยความช่วยเหลือของ องค์ประกอบที่คุณสามารถ เล่นแทร็ก SoundCloud ได้จากหน้า AMP HTML ของคุณ.

ส่วนประกอบนี้สามารถ ใช้กับเท่านั้น คงสูง แบบ ซึ่งหมายความว่าคุณจะต้องระบุ ความสูง, และความกว้างจะถูกคำนวณโดยรันไทม์ AMP ดังนั้นเครื่องเล่นเสียง SoundCloud ในตัวจะ เติมช่องว่างแนวนอนทั้งหมดที่มีอยู่.

สามารถแสดงส่วนประกอบใน ทั้งโหมดคลาสสิกหรือภาพ. คุณสามารถเลือกจากสองโหมดโดยการตั้งค่าของ ข้อมูลภาพ คุณลักษณะที่ทั้ง จริง หรือ เท็จ (ค่าเริ่มต้นคือ เท็จ).

ในทั้งสองโหมดคุณจะต้องใช้ ข้อมูล TrackID คุณลักษณะของ ระบุตัวระบุ ของเสียง; คุณสามารถค้นหารหัสเสียงได้โดยคลิกที่ปุ่มแบ่งปันใต้เครื่องเล่นเสียงบน SoundCloud.com และค้นหา URL แบบยาวภายในรหัสฝัง.

โหมดคลาสสิก

โหมดคลาสสิก แสดงภาพย่อขนาดเล็กทางด้านซ้ายและเครื่องเล่นเสียงทางด้านขวา คุณสามารถรับค่าที่เหมาะสมสำหรับ ความสูง คุณลักษณะจากรหัสฝังบน SoundCloud.com.

ในโหมดคลาสสิกคุณสามารถระบุสีของเครื่องเล่นเสียงได้หากคุณต้องการใช้ ข้อมูลสี คุณลักษณะ (คุณไม่สามารถทำได้ในโหมดภาพ).

ตัวอย่างรหัส (โหมดคลาสสิค):

ตัวอย่างโค้ด (โหมดคลาสสิค):

โหมดภาพ

ใน โหมดภาพ, รูปภาพเด่นจะอยู่ด้านหลังเครื่องเล่นเพลง ที่นี่คุณสามารถค้นหาสิ่งที่เหมาะสม ความสูง เป็นของโหมดภาพในรหัสฝังบน SoundCloud.com.

ตัวอย่างรหัส (โหมดภาพ):

ตัวอย่างรหัส (โหมดภาพ):

ถ้าคุณต้องการ ฝังเสียงส่วนตัว, ใช้ตัวเลือก ข้อมูลลับโทเค็น คุณลักษณะ.

สคริปต์ที่จะรวม:

6. แอมป์เถา

Vine เป็นเว็บไซต์แบ่งปันวิดีโอสั้น ๆ ซึ่งคุณสามารถแชร์วิดีโอความยาว 6 วินาทีกับเพื่อนของคุณ องค์ประกอบทำให้เป็นไปได้อย่างง่ายดาย ฝังวิดีโอ Vine ลงในหน้า AMP HTML ของคุณ.

ส่วนประกอบ AMP นี้ค่อนข้างง่ายคุณจะต้องเพิ่มขนาดและ ID ของวิดีโอ Vine ใน ข้อมูล vineid คุณลักษณะ คุณสามารถรับ ID จาก URL ของ Vine แต่ละอัน.

เนื่องจาก Vines เป็นสี่เหลี่ยมถ้าคุณใช้เลย์เอาต์ที่ตอบสนองกฎเดียวกันจะมีผลเช่นเดียวกับการฝัง Instagram คุณสามารถเพิ่มค่าใด ๆ ให้กับ ความกว้าง และ ความสูง แอตทริบิวต์, จนกว่าพวกเขาจะเท่ากัน มันจะทำงานได้อย่างถูกต้อง.

ตัวอย่างรหัส:

ตัวอย่างโค้ด:

สคริปต์ที่จะรวม:

7. แอมป์ YouTube

คุณสามารถ ฝังวิดีโอ YouTube ในหน้า AMP ด้วยความช่วยเหลือของ ส่วนประกอบ.

ในการทำเช่นนั้นคุณจะต้องเพิ่มส่วนข้อมูลรวมถึงรหัสของวิดีโอใน ข้อมูล videoid คุณลักษณะ เมื่อระบุ ความกว้าง และ ความสูง, มันเป็นสิ่งสำคัญที่จะ ให้ความสนใจกับอัตราส่วนภาพ.

นอกจากนี้คุณยังสามารถ ใช้พารามิเตอร์ของ YouTube ฝัง ในเอกสาร AMP เพียงแค่ใส่ชื่อของพารามิเตอร์ หลังจาก ข้อมูลพระราม- อุปสรรค.

ตัวอย่างรหัส:

ในตัวอย่างนี้ฉันใช้ประโยชน์จาก เริ่มต้น พารามิเตอร์ YouTube ใน ข้อมูลพระรามเริ่มต้น คุณลักษณะเพื่อให้วิดีโอเริ่มต้นที่ 43.

ตัวอย่างโค้ด:

สคริปต์ที่จะรวม:

บริการแบ่งปันวิดีโออื่น ๆ

AMP ยังมีส่วนประกอบที่เกี่ยวข้องกับบริการแบ่งปันวิดีโออื่น ๆ ด้วย ทำงานในทำนองเดียวกัน . คุณสามารถใช้ส่วนประกอบ AMP แบบขยายต่อไปนี้สำหรับวิดีโอที่ฝังจากผู้ให้บริการอื่นที่ไม่ใช่ YouTube:

• สำหรับ Vimeo ฝัง
• สำหรับการฝัง Dailymotion
• สำหรับการฝัง Brightcove

8. แอมป์ทางสังคมร่วมกัน

นอกเหนือจากโซเชียลมีเดียแล้วคุณยังสามารถ แสดงปุ่มแบ่งปันทางสังคม ในหน้า AMP ของคุณโดยใช้ ส่วนประกอบ.

คุณลักษณะการแบ่งปันทางสังคมคือ กำหนดค่าล่วงหน้าสำหรับผู้ให้บริการบางราย, แต่ด้วยการตั้งค่าที่เหมาะสมคุณสามารถใช้ องค์ประกอบสำหรับปุ่มแบ่งปันทางสังคมอื่น ๆ.

ปุ่มแชร์ที่กำหนดค่าล่วงหน้า

ปุ่มแชร์ที่กำหนดล่วงหน้า ไม่ต้องการการตั้งค่ามากเกินไป คุณต้องกำหนด ความกว้าง (ค่าเริ่มต้นคือ 60px) และ ความสูง แอ็ตทริบิวต์ (ดีฟอลต์คือ 44px) และชื่อของผู้ให้บริการสื่อสังคมออนไลน์ใน ชนิด คุณลักษณะ.

ด้วย Facebook คุณต้องระบุรหัสแอพ Facebook ใน ข้อมูลพระราม-app_id คุณลักษณะ.

ตัวอย่างรหัส:

ตัวอย่างโค้ด:

การกำหนดค่าล่วงหน้า ทำให้สมมติฐาน ว่า URL ที่คุณต้องการแบ่งปันคือ URL ตามรูปแบบบัญญัติของหน้าปัจจุบันและข้อความที่คุณต้องการรวมไว้ในการแชร์ของคุณคือชื่อหน้า.

หากคุณต้องการใช้การตั้งค่าอื่นคุณสามารถทำได้โดยทำสิ่งต่อไปนี้ สามคุณลักษณะเพิ่มเติม:

1. ข้อมูลข้อความ สำหรับข้อความที่คุณต้องการรวมไว้ในการแบ่งปัน
2. ข้อมูล URL สำหรับ URL ที่คุณต้องการแชร์
3. ข้อมูลระบุแหล่งที่มา สำหรับชื่อของบุคคลหรือผู้ให้บริการที่คุณต้องการให้มีการแบ่งปันของคุณ

ปุ่มแบ่งปันที่ไม่ได้กำหนดค่า

ในการแสดงปุ่มแชร์โซเชียลของ ผู้ให้บริการที่ไม่ได้กำหนดค่า, เช่น WhatsApp คุณต้อง ระบุโปรโตคอลที่กำหนดเองของผู้ให้บริการ ใน ข้อมูลหุ้นปลายทาง คุณลักษณะ ลองดูเอกสารที่คุณสามารถทำได้.

สคริปต์ที่จะรวม: