8 مكونات AMP لتكامل الوسائط الاجتماعية
أكبر صراع أن جوجل معيار الويب المحمول, تسارع صفحات الجوال يحتاج إلى حل هو جعل مواقع المحمول أسرع, في حين الحفاظ عليها وظيفية وغنية المحتوى. في هذه الأيام بالكاد يمكن تخيل المحتوى الغني والجذاب دون تضمين من مواقع التواصل الاجتماعي الشهيرة - التغريدات ومقاطع الفيديو والتسجيلات الصوتية والمنشورات والصور.
مكونات AMP الموسعة - من بين الميزات الرائعة الأخرى - وفر طريقة رائعة للتكامل AMP المستندات ذات أنواع المحتوى الاجتماعي المختلفة.
كيف الموسعة AMP مكونات العمل
في صميم فلسفة AMP هناك جوجل أفضل ممارسات الأداء. لتحسين أوقات تحميل الصفحة ، يتم تقييد معايير AMP كيف يمكنك استخدام التقنيات الأمامية. على سبيل المثال ، لا يمكنك استخدام JavaScript مخصص وأوراق أنماط خارجية وأي عنصر HTML يقوم بتحميل موارد خارجية ، مثل
في المقابل ، تحصل على مجموعة من مكونات AMP يمكنك استخدامها ل عرض الموارد الخارجية, مثل الصور ومقاطع الفيديو والتسجيلات الصوتية والإعلانات وغيرها على موقعك.
مكونات AMP هي علامات HTML محددة التي يمكن استخدامها على غرار علامات HTML العادية. عدد قليل منهم بنيت في إلى وقت التشغيل AMP ، في حين أن الأغلبية يعمل امتدادات. المكونات التي تجعل تكامل الوسائط الاجتماعية ممكنًا على صفحات AMP كلها مكونات ممتدة.
تتطلب مكونات AMP الموسعة استيراد البرنامج النصي الانتماء في ال مقطع من وثيقة AMP HTML الخاصة بك. نظرًا لأن AMP مشروع مفتوح المصدر ، فقد يزداد عدد المكونات الموسعة في المستقبل.
في هذا المنشور ، جمعنا حفنة من مكونات AMP التي يمكن أن تساعدك مع التكامل وسائل الاعلام الاجتماعية. ضع في اعتبارك أن إصدارات البرامج النصية قد تتغير مع مرور الوقت, لذلك دقق دائمًا في الوثائق قبل تضمينها على موقعك.
1. أمبير الفيسبوك
تحتاج دائما إلى تحديد أبعاد النشر المضمن, مما يعني أنك بحاجة إلى إضافة عرض و ارتفاع السمة مع القيم في عدد صحيح بكسل. يمكنك العثور على الأبعاد المناسبة بالنقر فوق قائمة "التضمين" الموجودة أعلى منشور Facebook.
أنت أيضا مطلوب ل أضف عنوان URL للنشر المحدد في ال بيانات أ href صفة، عزا. يمكنك العثور على عنوان URL بالنقر فوق الطابع الزمني لنشر Facebook ، وسيقوم المتصفح بإدراج عنوان URL الفريد في شريط العناوين.
أذا أردت تضمين مقطع فيديو دون مشاركة Facebook الانتماء, إضافة اختياري = "فيديو"، تضمين، كبيانات صفة، عزا
أذا أردت جعل تضمين الخاص تستجيب استخدم ال نسق السمة مع "استجابة" القيمة. يمكنك أيضا استخدام اختياري نسق السمة على أي مكون AMP آخر للتحكم في تخطيطه.
مثال على الكود:
معاينة الرمز:
البرنامج النصي لتشمل:
2. أمبير تويتر
يمكنك تضمين التغريدات في صفحات AMP باستخدام
للقيام بذلك ، تحتاج إلى تحديد معرف سقسقة في ال بيانات tweetid صفة، عزا. يمكنك تعديل كيفية عرض التغريدات من خلال إضافة أي من خيارات العرض على Twitter APi البيانات-* سمة HTML5.
على سبيل المثال ، في المثال التالي ، استخدمت واجهة برمجة تطبيقات Twitter linkColor خيار العرض كما ربط البيانات لون (انها البيانات-* التنسيق) لتغيير لون الرابط الافتراضي إلى اللون الذي يستخدمه Hongkiat.com على حساب Twitter الخاص به.
مثال على الكود:
معاينة الرمز:
ال لا يوفر Twitter حاليًا واجهة برمجة تطبيقات تؤدي إلى تضمين نسبة العرض إلى الارتفاع الثابتة
.
هذا يعني أنك بحاجة إلى تعيين يدويا عرض و ارتفاع سمات, نظرًا لأن وقت تشغيل AMP لا يعرض أحيانًا جزءًا (عادةً ما يكون الجزء السفلي) من التغريدات.
من الجيد دائمًا التحقق من شكل التغريدات المضمنة قبل نشر صفحة AMP.
إضافة عنصر نائب
على الرغم من أنه غير مطلوب ، توصي الوثائق إضافة عنصر نائب في حالة عدم تحميل التغريدة مرة واحدة.
ال نائب يمكن استخدام السمة على كل مكون AMP. العنصر النائب هو يظهر على الفور إذا كانت الموارد النهائية غير متوفرة. عندما يتم تحميل عنصر AMP ، فإنه يخفي نائبها.
ألقِ نظرة على كيفية ظهور رمز المثال أعلاه مع عنصر نائب. على Twitter ، قمت ببساطة بالنقر فوق الزر Embed Tweet ، وقم بنسخ اللصق القابل للتضمين (بدون النص في النهاية) ، ثم قمت بإضافة نائب السمة إلى بطاقة.
مثال على الكود مع العنصر النائب:
كيفية التحقق من صحة صفحات الجوال المتسارعة (#AMP) #جوجل #seo https://t.co/eVOSAtr5Ax
- هونجكيات (هونج كونج) 15 أغسطس 2016
البرنامج النصي لتشمل:
3. أمبير-الانستقرام
مع
أنت مطلوب ل تحديد الأبعاد من تضمين مع عرض و ارتفاع سمات ، وعليك أيضا أن أضف المعرف من Instagram الصورة أو الفيديو باستخدام بيانات الرمز القصير صفة، عزا.
يمكنك العثور على المعرف في نهاية عنوان URL ، على سبيل المثال للصورة الموجودة أسفل عنوان URL https://www.instagram.com/p/-PFt7tF8Km/, لذلك أنا بحاجة إلى استخدام -PFt7tF8Km كقيمة لل بيانات الرمز القصير صفة، عزا.
مثال على الكود:
معاينة الرمز:
لتخطيطات استجابة, AMP تلقائيا بحساب المساحة المطلوبة والتي أيضا يشمل “انستغرام كروم” (اسم الحساب ، التاريخ ، عدد الإعجابات ، إلخ).
هذا يعني أنه يمكنك استخدام أي قيمة لـ عرض و ارتفاع, حتى ال قيمتين متساوية (عادةً ما تكون صور Instagram مربعة) ، حيث يعمل وقت تشغيل AMP على تغيير حجم الصورة وفقًا للمساحة المتاحة.
إذا لم تكن الصورة مربعة ، فيجب عليك تحديد صورتها الفعلية عرض و ارتفاع القيم.
إلى عن على تخطيطات ثابتة, أنت بحاجه إلى تشمل مساحة اضافية (أعلى وأسفل: + 48 بكسل ، اليسار واليمين: + 8 بكسل) اللازمة لكروم Instagram عند حساب أبعاد الصورة.
البرنامج النصي لتشمل:
4. أمبير موقع Pinterest
تضمين دبوس القطعة
لتضمين عنصر واجهة المستخدم ، يجب عليك تحديد الأبعاد وعنوان URL للدبوس باستخدام ، رابط البيانات السمة ، وتحتاج أيضا إلى إضافة بيانات دو = "embedPin" صفة، عزا.
مثال على الكود (الحجم الافتراضي):
نظرًا لأن أداة Pin الافتراضية هي صغيرة جدًا ، يمكنك أيضًا اختيار إصدار أكبر باستخدام العرض البيانات = "المتوسط" صفة، عزا.
مثال على الكود (الحجم المتوسط):
معاينة الرمز (الحجم المتوسط):
عرض زر Pin It
بامكانك ايضا أضف زر Pin It إلى صفحة AMP الخاصة بك بمساعدة عرض و ارتفاع الأبعاد ، أنت مطلوب لتحديد أربع سمات من أجل تضمين زر Pin It:
بيانات دو = "buttonPin"لإعلام وقت تشغيل AMP بأن هذا سيكون زر Pin It، رابط البياناتمع عنوان URL الذي تريد مشاركتهوسائل الإعلام البياناتباستخدام عنوان URL المطلق للصورة التي تريد من المستخدمين تثبيتهابيانات الوصفمع الوصف الذي تريده أن يظهر في نموذج إنشاء دبوس
هناك العديد من أحجام زر مختلفة, للاختيار من بينها ، تحقق من المستندات لجميع الأحجام المتوفرة.
مثال على الكود:
في هذا المثال ، قمت بإنشاء زر Pin It يتيح للمستخدمين تثبيت صورة من منشور Hongkiat.com السابق. اعتدت حجم زر مستطيل صغير.
معاينة الرمز:
لاحظ أنك تحتاج إلى استخدام CSS إضافي لعرض الزر Pin It أعلى الصورة.
يمكنك أيضًا إنشاء زر متابعة Pinterest باستخدام بيانات دو = "buttonFollow" السمة ، وتحديد الاسم الذي تريد عرضه داخل الزر "متابعة" في التسمية البيانات & URL الخاص بحسابك في بيانات أ href صفة، عزا.
مثال على الكود (زر المتابعة):
البرنامج النصي لتشمل:
5. أمبير-SoundCloud لل
SoundCloud عبارة عن نظام أساسي لتوزيع الصوت حيث يمكن للمستخدمين مشاركة موسيقاهم. مع مساعدة من
هذا المكون يمكن يمكن استخدامها فقط مع الارتفاع ثابت نسق مما يعني أنك تحتاج فقط لتحديد ارتفاع, وسيتم حساب العرض بواسطة وقت تشغيل AMP. نتيجةً لذلك سوف يقوم مشغل الصوت SoundCloud المضمن ملء جميع المساحة الأفقية المتاحة.
ال البيانات البصرية السمة إلى أي منهما صحيح أو خاطئة (الافتراضي هو خاطئة).
في كلا الوضعين ، عليك استخدام بيانات خاصية TrackID يعزو إلى تحديد المعرف من الصوت. يمكنك العثور على معرف الصوت بالنقر فوق الزر "مشاركة" أسفل مشغل الصوت على SoundCloud.com ، والبحث عن عنوان URL طويل الشكل داخل رمز التضمين.
الوضع الكلاسيكي
ال الوضع الكلاسيكي يعرض صورة مصغرة صغيرة على اليسار ، ومشغل الصوت على اليمين. يمكنك الحصول على القيمة المناسبة لل ارتفاع السمة من كود التضمين على SoundCloud.com.
في الوضع الكلاسيكي ، يمكنك تحديد لون مشغل الصوت إذا كنت تريد استخدام بيانات اللون سمة (لا يمكنك القيام بذلك في الوضع المرئي).
مثال على الكود (النمط الكلاسيكي):
معاينة الرمز (الوضع الكلاسيكي):
الوضع البصري
في الوضع البصري, تمتد الصورة المميزة خلف مشغل الصوت. هنا ، يمكنك أيضا العثور على السليم ارتفاع ينتمون إلى الوضع المرئي في رمز التضمين على SoundCloud.com.
مثال على الكود (الوضع المرئي):
مثال على الكود (الوضع المرئي):
أذا أردت تضمين الصوت الخاص, استخدام اختياري سري بيانات رمزية صفة، عزا.
البرنامج النصي لتشمل:
6. أمبير كرمة
Vine هو موقع قصير لمشاركة الفيديو يمكنك من خلاله مشاركة مقاطع فيديو مدتها 6 ثوانٍ مع أصدقائك. ال
هذا المكون AMP بسيط للغاية ، تحتاج فقط إلى إضافة الأبعاد ، ومعرف الفيديو Vine في بيانات vineid صفة، عزا. يمكنك الحصول على معرف من URL لكل فاين.
نظرًا لأن Vines عبارة عن مربعات ، إذا استخدمت التخطيط المتجاوب ، يتم تطبيق نفس القاعدة كما هو الحال مع تضمين Instagram ؛ يمكنك إضافة أي قيمة إلى عرض و ارتفاع سمات, حتى يكونوا متساوين سوف يعملون بشكل صحيح.
مثال على الكود:
معاينة الرمز:
البرنامج النصي لتشمل:
7. أمبير-يوتيوب
يمكنك تضمين أشرطة فيديو يوتيوب على صفحات AMP بمساعدة
للقيام بذلك ، تحتاج إلى إضافة الأبعاد ، بالإضافة إلى معرف الفيديو في بيانات معرف الفيديو صفة، عزا. عند تحديد عرض و ارتفاع, من المهم أن إيلاء الاهتمام لنسبة الارتفاع.
بامكانك ايضا استخدام معلمات التضمين يوتيوب في مستندات AMP ، فقط أدخل اسم المعلمة بعد بيانات المعلمة- اختصار.
مثال على الكود:
في هذا المثال ، استفدت من بداية يوتيوب المعلمة في ، المعلمة البيانات بداية السمة من أجل جعل الفيديو يبدأ في 43 ثانية.
معاينة الرمز:
البرنامج النصي لتشمل:
خدمات مشاركة الفيديو الأخرى
يحتوي AMP أيضًا على مكونات متعلقة بخدمات مشاركة الفيديو الأخرى العمل مماثل ل
8. أمبير الاجتماعية حصة
بصرف النظر عن تضمين وسائل الإعلام الاجتماعية ، يمكنك أيضًا عرض أزرار المشاركة الاجتماعية على صفحات AMP الخاصة بك باستخدام
ميزة المشاركة الاجتماعية هي تم تكوينها مسبقا لبعض مقدمي الخدمات, ولكن مع الإعدادات الصحيحة يمكنك استخدام
أزرار المشاركة سابقة التهيئة
أزرار المشاركة التي تم تكوينها مسبقًا لا تتطلب الكثير من الإعدادات ؛ عليك ان تحدد عرض (الافتراضي هو 60 بكسل) و ارتفاع (الافتراضي هو 44 بكسل) وسمات موفر الوسائط الاجتماعية في نوع صفة، عزا.
مع Facebook ، يلزمك أيضًا تحديد معرف تطبيق Facebook في ، المعلمة بيانات APP_ID صفة، عزا.
مثال على الكود:
معاينة الرمز:
ما قبل التكوين يجعل الافتراضات أن عنوان URL الذي ترغب في مشاركته هو عنوان URL الأساسي للصفحة الحالية ، والنص الذي تريد تضمينه في مشاركتك هو عنوان الصفحة.
إذا كنت ترغب في استخدام تهيئة أخرى ، يمكنك القيام بذلك بما يلي ثلاث سمات اختيارية:
النص البياناتللنص الذي تريد تضمينه في المشاركة، رابط البياناتلعنوان URL الذي تريد مشاركتهبيانات الإسنادللحصول على اسم الشخص أو المزود الذي تريد أن تنسب مشاركتك إليه
أزرار مشاركة غير مهيأة
لعرض أزرار المشاركة الاجتماعية من مقدمي غير مؤهلين, مثل ال WhatsApp ، تحتاج إلى تحديد بروتوكول مخصص للمزود في ال بيانات حصة نقطة النهاية صفة، عزا. تحقق في مستندات كيف يمكنك القيام بذلك.
البرنامج النصي لتشمل:
