الزر مشاركة

يتيح الزر "مشاركة" للأشخاص إضافة رسائل شخصية للروابط قبل مشاركتها على يومياتهم، أو في المجموعات، أو مع أصدقائهم عبر رسائل فيسبوك.

إذا كان تطبيقك مخصصًا لنظام iOS أو نظام Android، نوصي باستخدام مربع الحوار مشاركة لنظام iOS أو مربع الحوار مشاركة لنظام التشغيل Android بدلاً من ذلك.

إذا لم يكن موقعك على الويب يحتاج لوجود زر من أجل فتح مربع الحوار مشاركة أو إذا كان الزر الذي يوفره فيسبوك لا يتناسب مع تصميم موقعك على الويب، يتم أيضًا توفير مربع الحوار مشاركة على الويب لمشاركة الروابط. لاحظ أنك لست بحاجة إلى تنفيذ تسجيل دخول فيسبوك أو طلب أي أذونات إضافية عبر مراجعة التطبيق كي تتمكن من استخدام هذا المكون الإضافي.

الخطوات التفصيلية

1. اختيار عنوان URL أو صفحة

اختر عنوان URL لموقع ويب أو صفحة فيسبوك تريد مشاركتها.

2. أداة تكوين الرموز

الصق عنوان URL في أداة تكوين الرموز ثم اضبط إعدادات layout للزر "مشاركة". انقر على الزر Get Code لإنشاء رمز الزر "مشاركة".

3. نسخ جزء رمز HTML البرمجي ولصقه

انسخ جزء الرمز البرمجي والصقه داخل رموز HTML بموقع الويب المقصود.

أداة تكوين الزر "مشاركة"

عنوان URL المطلوب مشاركته
التخطيط
حجم الزر

نموذج رمز برمجي كامل

انسخ نموذج الرمز والصقه بموقعك على الويب. بعد ذلك، اضبط قيمة data-href بوضع عنوان URL لموقعك على الويب. بعد ذلك، استخدم علامات التعريف og:*** لضبط معاينة رابطك. ويجب أن تستخدم og:url وdata-href عنوان URL نفسه.

<html>
<head>
  <title>Your Website Title</title>
    <!-- You can use Open Graph tags to customize link previews.
    Learn more: https://developers.facebook.com/docs/sharing/webmasters -->
  <meta property="og:url"           content="http://www.your-domain.com/your-page.html" />
  <meta property="og:type"          content="website" />
  <meta property="og:title"         content="Your Website Title" />
  <meta property="og:description"   content="Your description" />
  <meta property="og:image"         content="http://www.your-domain.com/path/image.jpg" />
</head>
<body>

  <!-- Load Facebook SDK for JavaScript -->
  <div id="fb-root"></div>
  <script>(function(d, s, id) {
    var js, fjs = d.getElementsByTagName(s)[0];
    if (d.getElementById(id)) return;
    js = d.createElement(s); js.id = id;
    js.src = "//connect.facebook.net/en_US/sdk.js#xfbml=1";
    fjs.parentNode.insertBefore(js, fjs);
  }(document, 'script', 'facebook-jssdk'));</script>

  <!-- Your share button code -->
  <div class="fb-share-button" 
    data-href="http://www.your-domain.com/your-page.html" 
    data-layout="button_count">
  </div>

</body>
</html>

الإعدادات

الإعداد سمة HTML5 الوصف القيمة الافتراضية

href

data-href

عنوان URL المطلق للصفحة التي ستتم مشاركتها.

يتم تعيين القيم الافتراضية لإصدارات XFBML وHTML5 لعنوان URL الحالي.

layout

data-layout

يحدد أحد التنسيقات المختلفة المتاحة لهذا المكون الإضافي. والقيم التي يمكن استخدمها هي box_count أو button_count أو button.

icon_link

mobile_iframe

data-mobile_iframe

إذا تم تعيين القيمة إلى true، سيفتح زر المشاركة مربع حوار المشاركة في إطار iframe (بدلاً من إطار منبثق) أعلى موقعك على الويب عند تصفحه من الهاتف المحمول. هذا الخيار يتوفر فقط للهواتف المحمولة، وليس لأجهزة الكمبيوتر. لمزيد من المعلومات، راجع مربع حوار المشاركة من ويب الهاتف المحمول.

false

size

data-size

يتم توفير الزر في حجمين هما large وsmall.

small