AMP
AR
English Deutsch Français Español Italiano Indonesia 日本語 한국어 Português Русский Türkçe 中文 Polski Tiếng việt

Important: this documentation is not applicable to your currently selected format email!

amp-social-share

 
You can now use this component outside valid AMP documents using the Bento version of this component. Learn more in the Bento guide.

Description

The share tracking feature is under development.

 

Required Scripts

<script async custom-element="amp-social-share" src="https://cdn.ampproject.org/v0/amp-social-share-0.1.js"></script>

Supported Layouts

يعرض هذا المكّوِن زر المشاركة على الشبكات الاجتماعية.

[جدول المحتويات]

النص البرمجي المطلوب
<script async custom-element="amp-social-share" src="https://cdn.ampproject.org/v0/amp-social-share-0.1.js"></script>
التنسيقات المعتمدة container وfill وfixed وfixed-height وflex-item وnodisplay وresponsive
أمثلة اطِّلع على مثال amp-social-share في الموقع "AMP بالمثال".

نظرة عامة

يعرض المكّوِن amp-social-share زر المشاركة على العديد من موفري منصات الشبكات الاجتماعية.

أمثلة

مثال: زر المشاركة الأساسي على الشبكات الاجتماعية

يخمّن زر المشاركة بعض الإعدادات التلقائية نيابة عنك لبعض موفري الخدمات الذين تمت تهيئتهم مسبقًا. ويفترض أن عنوان URL الأساسي للمستند الحالي هو عنوان URL الذي تريد مشاركته وأن عنوان الصفحة هو النص الذي تريد مشاركته.

<amp-social-share type="twitter"></amp-social-share>

مثال: تمرير المعلَمات

عندما تريد تمرير المعلَمات إلى نقطة نهاية المشاركة، يمكنك تحديد data-param-<attribute> التي سيتم إلحاقها بهذه النقطة.

<amp-social-share type="linkedin" width="60" height="44"
  data-param-text="Hello world"
  data-param-url="https://example.com/">
</amp-social-share>

Linkedin هو أحد موفري الخدمات الذين تمت تهيئتهم مسبقًا، لذلك لا تحتاج إلى توفير السمة data-share-endpoint.

السمات

type (مطلوبة) تختار هذه السمة نوع موفر الخدمة. وهي مطلوبة لكل من الموفرين الذين تمت تهيئتهم مسبقًا وغيرهم.
data-target تحدد هذه السمة الهدف الذي سيتم فيه فتح الهدف. وتكون قيمتها التلقائية _blank لجميع الحالات ماعدا البريد الإلكتروني/الرسائل القصيرة على iOS حيث يتم تعيين الهدف في هذه الحالة على _top. يرجى ملاحظة أننا ننصح فقط باستخدام هذا الإلغاء للبريد الإلكتروني.
data-share-endpoint هذه السمة مطلوبة لموفري الخدمات الذين لم تتم تهيئتهم.
يملك بعض موفري الخدمات المشهورين نقاط نهاية المشاركة التي تمت تهيئتها مسبقًا. راجِع قسم موفرو الخدمات الذين تمت تهيئتهم مسبقًا للحصول على التفاصيل. بالنسبة إلى الموفرين الذين لم تتم تهيئتهم، ستحتاج إلى تحديد نقطة نهاية المشاركة.
data-param-* يتم تحويل كل السمات المبدوءة بـ data-param-* إلى معلَمات عناوين URL وتمريرها إلى نقطة نهاية المشاركة.

موفرو الخدمات الذين تمت تهيئتهم مسبقًا

يوفر المكوِّن amp-social-share بعض موفري الخدمات الذين تمت تهيئتهم مسبقًا الذين يعرفون نقاط نهاية المشاركة لديهم وكذلك بعض المعلَمات التلقائية.

موفر الخدمة النوع المعلَمات
واجهة برمجة تطبيقات المشاركة على الويب (يؤدّي إلى ظهور مربع حوار المشاركة على نظام التشغيل) system
  • data-param-text: معلَمة اختياريّة، ويتم تعيينها تلقائيًا على: "Current page title".
  • data-mode: معلَمة اختياريّة، وفي حال تعيينها على replace، تتم إزالة جميع خيارات المشاركة الأخرى.
البريد الإلكتروني email
  • data-param-subject: معلَمة اختياريّة، ويتم تعيينها تلقائيًا على: Current page title.
  • data-param-body: معلَمة اختياريّة، ويتم تعيينها تلقائيًا على: rel=canonical URL.
  • data-param-recipient: معلَمة اختياريّة، ويتم تعيينها تلقائيًا على: " (سلسلة فارغة).
Facebook facebook
  • data-param-app_id: معلَمة مطلوبة، ويتم تعيينها تلقائيًا على: none. هذه المعلَمة هي المعرِّف app_id للتطبيق Facebook وهو مطلوب لظهور مربع حوار المشاركة على Facebook.
  • data-param-href: معلَمة اختياريّة، ويتم تعيينها تلقائيًا على: rel=canonical URL.
  • data-param-quote: معلَمة اختياريّة. ويمكن استخدامها لمشاركة اقتباس أو نص.
LinkedIn linkedin
  • data-param-url: معلَمة اختياريّة، ويتم تعيينها تلقائيًا على: rel=canonical URL.
Pinterest pinterest
  • data-param-media: معلَمة اختياريّة (ولكن ننصح بتعيينها بشدة)، ويتم تعيينها تلقائيًا على: none. وهي عنوان URL للوسائط المراد مشاركتها على Pinterest. في حال عدم تعيينها، سيطلب Pinterest من المستخدِم تحميل الوسائط.
  • data-param-url: معلَمة اختياريّة، ويتم تعيينها تلقائيًا على: rel=canonical URL.
  • data-param-description: معلَمة اختياريّة، ويتم تعيينها تلقائيًا على: Current page title.
G+‎ gplus
  • data-param-url: معلَمة اختياريّة، ويتم تعيينها تلقائيًا على: rel=canonical URL.
Tumblr tumblr
  • data-param-url: معلَمة اختياريّة، ويتم تعيينها تلقائيًا على: rel=canonical URL.
  • data-param-text: معلَمة اختياريّة، ويتم تعيينها تلقائيًا على: Current page title.
Twitter twitter
  • data-param-url: معلَمة اختياريّة، ويتم تعيينها تلقائيًا على: rel=canonical URL.
  • data-param-text: معلَمة اختياريّة، ويتم تعيينها تلقائيًا على: Current page title.
Whatsapp whatsapp
  • data-param-text: معلَمة اختياريّة، ويتم تعيينها تلقائيًا على: "Current page title - current page URL".
LINE line
  • data-param-url: معلَمة اختياريّة، ويتم تعيينها تلقائيًا على: rel=canonical URL.
  • data-param-text: معلَمة اختياريّة، ويتم تعيينها تلقائيًا على: Current page title.
الرسائل القصيرة sms
  • data-param-body: معلَمة اختياريّة، ويتم تعيينها تلقائيًا على: rel=title - rel=canonical URL.

موفرو الخدمات الذين لم تتم تهيئتهم

بالإضافة إلى الموفرين الذين تمت تهيئتهم مسبقًا، يمكنك استخدام الموفرين الذين لم تتم تهيئتهم عن طريق تحديد سمات إضافية في المكّوِن amp-social-share.

مثال: إنشاء زر المشاركة لموفر لم تتم تهيئته

ينشئ المثال التالي زر المشاركة عبر Facebook Messenger عن طريق تعيين السمة data-share-endpoint على نقطة النهاية الصحيحة لبروتوكول Facebook Messenger المخصص.

<amp-social-share type="facebookmessenger"
    data-share-endpoint="fb-messenger://share"
    data-param-text="Check out this article: TITLE - CANONICAL_URL">
</amp-social-share>

ولأن هؤلاء الموفرين لم تتم تهيئتهم مسبقًا، فستحتاج إلى إنشاء صورة وتصميم للزر للموفر.

التصميمات

التصميمات التلقائية

يتضمن المكّوِن amp-social-share تلقائيًا بعض موفري الخدمات الذين تمت تهيئتهم مسبقًا. يتم تصميم أزرار لهؤلاء الموفرين باللون والشعار الرسمي للموفر. ويبلغ العرض التلقائي للتصميم 60 بكسل والارتفاع التلقائي 44 بكسل.

انتقِل إلى الموقع AMP Start للحصول على روابط مشاركة متجاوبة جاهزة التصميم والتي يمكنك استخدامها في صفحات AMP.

التصميمات المخصَّصة

تريد أحيانًا تقديم تصميمك الخاص. يمكنك ببساطة إلغاء التصميمات المتوفرة كما يلي:

amp-social-share[type="twitter"] {
  background: red;
  background-image: url(datauri:svg/myownsvgicon);
}

استبدال المتغيرات

يمكنك استخدام الاستبدال الشامل لمتغيرات AMP في العنصر <amp-social-share>. في المثال أدناه، تم استبدال TITLE بعنوان الصفحة واستبدال CANONICAL_URL بعنوان URL الأساسي للمستند.

<amp-social-share type="whatsapp"
    data-param-text="Check out this article: TITLE - CANONICAL_URL">
</amp-social-share>

التحقق

اطِّلع على قواعد amp-social-share في مواصفات مدقق AMP.

هل تحتاج إلى مزيد من المساعدة؟

لقد قرأت هذا المستند عشرات المرات ولكن ألم يُجِب عن جميع أسئلتك؟ ربما حصل ذات الأمر مع أشخاص آخرين: تواصل معهم على Stack Overflow.

الذهاب إلى Stack Overflow
هل وجدت خطأ أو تفتقد لميزة؟

يشجع مشروع AMP مشاركتك ومساهمتك بشدة! ونأمل أن تكون مشاركًا دائمًا في مجتمعنا مفتوح المصدر، ولكننا نشجع أيضًا المساهمات التي تحدث لمرة واحدة في الأمور التي تتحمس لها.

الانتقال إلى GitHub