كود المشاركة في المواقع الاجتماعية

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

لذلك أقدم لكم رابط لمشاركة المقال على كل مواقع التواصل الإجتماعى. ولنبدأ بموقع الفيسبوك الشهير.

رابط المشاركة على موقع فيسبوك 🔗

<a href='https://www.facebook.com/sharer.php?u=the_text_to_share' target='_blank'>
    Share to Facebook
</a>

رابط المشاركة على موقع تويتر 🔗

<a href='http://twitter.com/share?url=tweet_text' target='_blank'>
    Tweet this
</a>

بعد شراء إيلون ماسك لموقع تويتر ، غيّر تسميته إلى “إكس”. ورابط المشاركة إلى منصة إكس أصبح كالتالي.

<a href='http://x.com/share?url=post_text' target='_blank'>
    Post this on X
</a>

رابط المشاركة على موقع لينكدإن 🔗

<a href='http://www.linkedin.com/shareArticle?mini=true&url=text_to_share' target='_blank'>
    Share to LinkedIn
</a>

رابط المشاركة عبر واتساب 🔗

<a href='whatsapp://send?text=text_to_share'>
    Send via WhatsApp
</a>

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

أما النص المكتوب قيل </a> مباشرةَ فهو عبارة عن الكلام الذى يظهر للمستخدم وعندما يضغط عليه يُشارك المقال. ويُمكنك أن تستخدم أيقونة (صورة) بدلاً من الكلمات عن طريق استخدام وسم <img> أو عن طريق خط Font Awesome الشهير.

طريقة استخدام وسم الصورة <img> 🔗

كل ما عليك فعله هو استبدال المحتوى النصي بوسم الصورة كما ترى فى الكود التالى

<a href='whatsapp://send?text=text_to_share'>
    <img alt='whatsapp icon' src='https://cdn3.iconfinder.com/data/icons/social-network-30/512/social-01-512.png' />
</a>

أما طريقة استخدام خط Font Awesome فهى عبارة عن إضافة الخط ثم اضافة كود أيقوناته حسب الطلب.

ضع هذا الكود قبل وسم </head> فى الصفحات التى تستخدم بها الأيقونات

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.2/css/all.css"/>

ثم استخدم وسم أيقونات الخط كما تريد. على سبيل المثال هذا هو رابط المشاركة عبر واتساب

<a href='whatsapp://send?text=text_to_share'>
    <i class='fa fa-whatsapp'/>
</a>

حيث أن الكود <i class='fa fa-whatsapp'/> هو عبارة عن أيقونة الواتساب من خط أوسم (Font Awesome). وإليك قائمة الأيقونات الشهيرة من خط أوسم (Font Awesome):

• أيقونة الواتساب: <i class='fa fa-whatsapp'/>
• أيقونة الفيسبوك: <i class='fa fa-facebook'/>
• أيقونة لينكدإن: <i class='fa fa-linkedin'/>
• أيقونة تويتر: <i class='fa fa-twitter'/>

ويُمكنك معرفة واستخدام باقى الأيقونات من موقع فونت أوسم هنا .

انتهينا من توضيح روابط المشاركة الإجتماعية. ولكن إن كان لديك أى سؤال أو استفسار اطلبه فى تعليق. للوصول لنا بسرعة أكتب على جوجل “موقع أبانوب” بعد أن تكتب طلبك. مثال “كود روابط التواصل الإجتماعى موقع أبانوب”.