8 AMP רכיבים עבור מדיה חברתית אינטגרציה

הסכסוך הגדול ביותר שעומד בתקן האינטרנט של Google לנייד, דפים ניידים מואצים צריך לפתור הוא מה שהופך אתרים ניידים מהר יותר - -, בזמן לשמור אותם פונקציונליים & עשירים בתוכן. בימים אלה קשה להעלות על הדעת תוכן עשיר ומרתק ללא טמבלים מאתרי מדיה חברתית פופולריים - טוויטים, סרטונים, אודיאו, פוסטים, תמונות.

רכיבי AMP מורחבים - בין שאר תכונות נהדר - לספק דרך מצוינת לשלב AMP מסמכים עם סוגי תוכן חברתי שונים.

כיצד רכיבי AMP מורחבים עבודה

בליבת הפילוסופיה של AMP יש של גוגל שיטות הביצועים הטובים ביותר. כדי לשפר את זמני טעינת הדף, תקני AMP מגבילים כיצד ניתן להשתמש בטכנולוגיות חזיתיות. לדוגמה, לא ניתן להשתמש ב- JavaScript מותאם אישית, גיליונות סגנונות חיצוניים וכל רכיב HTML הטעון משאבים חיצוניים, כגון תג.

בתמורה, אתה מקבל חבורה של רכיבי AMP אתה יכול להשתמש בו להציג משאבים חיצוניים, כגון תמונות, סרטונים, אודיוסים, פרסומות וכו 'באתר שלך.

רכיבי AMP הם תגי HTML ספציפיים שניתן להשתמש בהם באופן דומה לתגי HTML רגילים. כמה מהם מובנה כדי ריצה של AMP, בעוד הרוב פועל כהרחבות. רכיבים המאפשרת שילוב מדיה חברתית על דפי AMP כל הרכיבים המורחבים.

רכיבי AMP מורחבים מחייבים אותך ייבא את התסריט השייך בתוך ה של מסמך ה- AMP HTML שלך. כמו AMP הוא קוד פתוח הפרויקט, מספר רכיבים המורחבת עשויה לגדול בעתיד.

בפוסט הזה אספנו קומץ של רכיבי AMP שיכולים לעזור לך עם שילוב מדיה חברתית. זכור שהגירסאות של הסקריפטים עשוי להשתנות עם הזמן, לכן בדוק תמיד את התיעוד לפני שתכלול אותם באתר שלך.

1. amp-facebook

מאפשר להטביע פוסט פייסבוק או וידאו לתוך דף AMP.

אתה תמיד צריך ציין את ממדי הפוסט המשובץ, מה שאומר שאתה צריך להוסיף רוחב א גובה תכונה עם ערכים בפיקסלים שלמים. אתה יכול למצוא את הממדים הנכונים על ידי לחיצה על "שבץ" בתפריט בחלק העליון של פוסט פייסבוק.

אתה גם נדרש הוסף את כתובת האתר של הפוסט הנתון בתוך ה נתוני href תכונה. תוכל למצוא את כתובת האתר על ידי לחיצה על חותמת הזמן של הפוסט בפייסבוק, והדפדפן יוסיף את כתובת האתר הייחודית לשורת הכתובת.

אם אתה רוצה להטביע וידאו ללא השייכות פוסט, הוסף את האופציה data-embed-as = "וידאו" תכונה

אם אתה רוצה להפוך את התגובה שלך להגיב להשתמש ב פריסה מייחסים עם "תגובה" ערך. ניתן גם להשתמש באופציה פריסה תכונה על כל רכיב AMP אחר כדי לשלוט על הפריסה שלה.

קוד לדוגמה:

תצוגה מקדימה של קוד:

סקריפט לכלול:

2. amp-twitter

אתה יכול טוויטים להטביע לתוך דפי AMP באמצעות רכיב.

לשם כך, עליך ציין את מזהה הציוץ בתוך ה טוויטיד נתונים תכונה. אתה יכול לשנות איך ציוץ מוצג על ידי הוספת כל האפשרויות של display של טווי API כמו נתונים-* תכונה HTML5.

לדוגמה, בדוגמה הבאה השתמשתי ב- API של Twitter צבע קישור אפשרות להציג כמו נתונים קישור צבע (שלה נתונים-* פורמט) כדי לשנות את צבע הקישור ברירת המחדל של צבע Hongkiat.com משתמש על חשבון טוויטר שלה.

קוד לדוגמה:

תצוגה מקדימה של קוד:

ה רכיב אינו מושלם עדיין, Github דוק אומר את זה טוויטר אינו מספק כרגע API כי התשואות יחס הממדים קבוע ציוץ.

זה אומר שאתה צריך להגדיר ידנית את רוחב ו גובה תכונות, כמו זמן ריצה של AMP לפעמים לא להציג חלק (בדרך כלל בתחתית) של ציוץ.

זה תמיד רעיון טוב לבדוק איך טוויטים מוטבע שלך נראה לפני פרסום דף AMP.

הוסף מציין מיקום

למרות שזה לא נדרש, התיעוד ממליץ הוספת מציין מיקום במקרה tweet אינו נטען בבת אחת.

ה מציין מיקום תכונה ניתן להשתמש על כל רכיב AMP. מציין המיקום הוא מוצג מיד אם המשאבים הסופיים אינם זמינים. כאשר רכיב AMP נטען, הוא מסתיר את מציין המיקום שלו.

תסתכל איך את הקוד לדוגמה לעיל נראה עם מציין מיקום. בטוויטר, פשוט לחצתי על הלחצן הטמע ציוץ, להעתיק את הדבק את בלוקוטה שצוין (ללא התסריט בסוף), והוסיף מציין מיקום רכוש post

תג.

קוד לדוגמה עם מציין מיקום:

  
 
כיצד לאמת דפי אינטרנט מואצים (#AMP) #google #seo https://t.co/eVOSAtr5Ax 
 - הונגקאט (@hongkiat)  15 באוגוסט, 2016 
  

סקריפט לכלול:

3. amp-instagram

עם , אתה יכול להטביע Instagram תמונות וקטעי וידאו לתוך דפי AMP שלך.

אתה נדרש ציין את הממדים של הטבעת עם רוחב ו גובה תכונות, ואתה גם צריך הוסף את המזהה של תמונה או וידאו Instagram באמצעות קוד נתונים קצר תכונה.

תוכל למצוא את המזהה בסוף כתובת האתר, לדוגמה עבור התמונה שמתחת לכתובת האתר https://www.instagram.com/p/-PFt7tF8Km/, אז אני צריך להשתמש -PFt7tF8Km ערך עבור קוד נתונים קצר תכונה.

קוד לדוגמה:

תצוגה מקדימה של קוד:

עבור פריסות קשובות, AMP מחשב באופן אוטומטי את השטח הדרוש אשר גם כולל את “כרום” (שם החשבון, תאריך, מספר אוהב, וכו ').

זה אומר שאתה יכול להשתמש בכל ערך עבור רוחב ו גובה, עד ה שני ערכים שווים (תמונות Instagram בדרך כלל מרובע), כמו זמן ריצה AMP יהיה לשנות את גודל התמונה על פי השטח הזמין.

אם התמונה אינה במקרה ריבוע, עליך לציין את הממשק שלה רוחב ו גובה ערכים.

ל פריסות קבועות, אתה צריך כולל את החלל הנוסף (למעלה או למטה: +48 פיקסלים, ימין ושמאל: + 8 פיקסלים) הדרושים לכרום Instagram בעת חישוב מידות התמונה.

סקריפט לכלול:

4. amp-pinterest

מאפשר לך ל להטביע או יישומון פין או כפתור פין זה לתוך מסמך AMP HTML.

הטמע פין יישומון

כדי להטביע widget widget, עליך לציין את המאפיינים, את כתובת האתר של הסיכה באמצעות כתובת אתר תכונה, ואתה גם צריך להוסיף את data-do = "embedPin" תכונה.

קוד לדוגמה (גודל ברירת מחדל):

כמו יישומון ברירת המחדל פין הוא די קטן, אתה יכול גם לבחור גרסה גדולה יותר באמצעות data-width = "בינוני" תכונה.

קוד לדוגמה (גודל בינוני):

קוד תצוגה מקדימה (בינונית):

להציג לחצן פין זה

אתה יכול גם להוסיף כפתור פין זה לדף AMP שלך בעזרת רכיב. חוץ מ רוחב ו גובה ממדים, אתה נדרש לציין ארבע תכונות כדי להטביע את כפתור Pin It:

1. data-do = "buttonPin" כדי לאפשר את זמן ריצה AMP יודע שזה יהיה כפתור פין זה
2. כתובת אתר עם כתובת האתר שברצונך לשתף
3. מדיה נתונים עם כתובת האתר המוחלטת של התמונה שברצונך למשתמשים להצמיד
4. תיאור נתונים עם תיאור אתה רוצה להופיע את הצמד ליצור טופס

יש הגדלים כפתור רבים, כדי לבחור, לבדוק את המסמכים עבור כל הגדלים הזמינים.

קוד לדוגמה:

בדוגמה זו, יצרתי כפתור פין זה שיאפשר למשתמשים להצמיד תמונה מהודעה זו של Hongkiat.com לשעבר. השתמשתי בגודל הכפתור המלבני הקטן.

תצוגה מקדימה של קוד:

שים לב שעליך להשתמש ב- CSS נוסף כדי להציג את הלחצן 'הצמד' בחלק העליון של התמונה.

ניתן גם ליצור לחצן מעקב Pinterest באמצעות data-do = "buttonFollow" תכונה, וציון השם שברצונך להציג בלחצן עקוב ב תווית נתונים כתובת האתר של החשבון שלך נתוני href תכונה.

קוד לדוגמה (לחצן 'עקוב'):

סקריפט לכלול:

5. amp-soundcloud

SoundCloud הוא פלטפורמה פופולארית להפצת אודיו, שבה משתמשים יכולים לשתף את המוסיקה שלהם. בעזרתו של רכיב אתה יכול לנגן שירים SoundCloud ממש מדף ה- AMP שלך ב- HTML.

רכיב זה יכול רק עם גובה קבוע פריסה כלומר אתה רק צריך לציין את גובה, ואת רוחב יחושב על ידי ריצה AMP. כתוצאה מכך את נגן SoundCloud מוטבע יהיה למלא את כל שטח אופקי זמין.

ה רכיב ניתן להציג ב - Windows XP או קלאסי או מצב חזותי. ניתן לבחור מבין שני המצבים על ידי הגדרת הערך של נתונים ויזואליים תכונה אחת נכון או שקר (ברירת המחדל היא שקר).

בשני המצבים, אתה צריך להשתמש מעקב אחר נתונים מייחס ל ציין את המזהה של האודיו; תוכל למצוא את מזהה השמע על-ידי לחיצה על הלחצן שתף מתחת לנגן השמע ב- SoundCloud.com, ובחינת כתובת האתר של הטופס הארוך בתוך קוד הטמעה.

מצב קלאסי

ה מצב קלאסי מציג תמונה ממוזערת קטנה בצד שמאל, ואת נגן אודיו בצד ימין. אתה יכול לקבל את הערך הנכון עבור גובה תכונה מקוד שבץ ב- SoundCloud.com.

במצב קלאסי, אתה יכול לציין את הצבע של נגן השמע אם אתה רוצה להשתמש צבעי נתונים (לא ניתן לעשות זאת במצב חזותי).

קוד לדוגמה (מצב קלאסי):

תצוגה מקדימה של קוד (מצב קלאסי):

מצב חזותי

ב מצב חזותי, את התמונה המוצגת משתרע מאחורי נגן אודיו. כאן, אתה יכול גם למצוא את הנכון גובה השייכים למצב חזותי בקוד שבץ ב- SoundCloud.com.

קוד לדוגמה (מצב חזותי):

קוד לדוגמה (מצב חזותי):

אם אתה רוצה להטביע אודיו פרטי, השתמש באופציה נתונים- secret-token תכונה.

סקריפט לכלול:

6. אמפ-גפן

Vine הוא אתר שיתוף וידאו קצר טופס שבו אתה יכול לשתף קטעי וידאו 6 שניות עם חברים שלך. ה רכיב מאפשר את זה בקלות להטביע Vine videos לתוך דפי AMP HTML שלך.

רכיב זה AMP הוא די פשוט, אתה רק צריך להוסיף את הממדים, ואת מזהה הווידאו גפן ב נתונים ויניד תכונה. אתה יכול לקבל את תעודת הזהות של כתובת האתר של כל גפן.

כמו גפנים הם ריבועים, אם אתה משתמש פריסה תגובה, אותו כלל חל כמו עם emstreams Instagram; אתה יכול להוסיף כל ערך רוחב ו גובה תכונות, עד שהם שווים הם יעבדו כראוי.

קוד לדוגמה:

תצוגה מקדימה של קוד:

סקריפט לכלול:

7. amp-youtube

אתה יכול להטביע קטעי וידאו של YouTube על דפי AMP בעזרת רכיב.

לשם כך, עליך להוסיף את המאפיינים, בנוסף למזהה של הסרטון ב- נתוני וידאו תכונה. בעת ציון רוחב ו גובה, זה חשוב ל לשים לב יחס הממדים.

אתה יכול גם להשתמש בפרמטרים של embeds YouTube במסמכי AMP, פשוט הכנס את שם הפרמטר לאחר פרמטר נתונים- קידומת.

קוד לדוגמה:

בדוגמה זו, השתמשתי להתחיל פרמטר ב- YouTube נתונים- param-start תכונה כדי להפוך את הווידאו מתחיל ב 43s.

תצוגה מקדימה של קוד:

סקריפט לכלול:

שירותי שיתוף וידאו אחרים

AMP גם יש רכיבים הקשורים לשירותי שיתוף וידאו אחרים, כי עבודה דומה . תוכל להשתמש ברכיבי AMP המורחבים הבאים עבור הטמעות וידאו מספקים אחרים מלבד YouTube:

• עבור Vimeo embeds
• עבור Dailymotion embeds
• עבור Brightcove embeds

8. amp-social-share

מלבד embeds מדיה חברתית, אתה יכול גם להציג לחצני המניות החברתיים על דפי AMP שלך באמצעות רכיב.

תכונת המניות החברתית היא שהוגדרו מראש עבור ספקים מסוימים, אבל עם ההגדרות הנכונות אתה יכול להשתמש רכיב עבור כל לחצני שיתוף חברתי אחרים.

לחצני שיתוף מוגדרים מראש

לחצני שיתוף מוגדרים מראש לא דורשים הגדרות רבות מדי; אתה צריך להגדיר את רוחב (ברירת המחדל היא 60px) גובה (ברירת המחדל היא 44px) תכונות, ואת השם של ספק מדיה חברתית ב הקלד תכונה.

עם פייסבוק, אתה נדרש גם לציין את מזהה יישום Facebook ב data-param-app_id תכונה.

קוד לדוגמה:

תצוגה מקדימה של קוד:

תצורה מראש עושה הנחות שכתובת האתר שברצונך לשתף היא כתובת האתר הקנונית של הדף הנוכחי, והטקסט שברצונך לכלול בנתח שלך הוא כותרת הדף.

אם ברצונך להשתמש בתצורה אחרת, תוכל לעשות זאת באמצעות האפשרויות הבאות שלוש תכונות אופציונליותYou

1. טקסט-נתונים עבור הטקסט שברצונך לכלול בנתח
2. כתובת אתר עבור כתובת האתר שברצונך לשתף
3. ייחוס נתונים עבור השם של האדם או הספק שברצונך לייחס את החלק שלך אליו

לחצני שיתוף לא מוגדרים

כדי להציג לחצני שיתוף חברתיים של ספקי unconfigured, כגון WhatsApp, אתה צריך ציין את הפרוטוקול המותאם אישית של הספק בתוך ה נתונים-נקודת קצה תכונה. בדוק את המסמכים איך אתה יכול לעשות את זה.

סקריפט לכלול: