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

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

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

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

<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://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>

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

أما النص المكتوب بالأسود فهو عبارة عن الكلام الذى يظهر للمستخدم وعندما يضغط عليه يُشارك المقال. ويُمكنك أن تستخدم أيقونة (صورة) بدلاً من الكلمات عن طريق استخدام وسم <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>

حيث أن الكود باللون الأخضر هو عبارة عن أيقونة الواتساب من خط أوسم (Font Awesome). وإليك قائمة الأيقونات الشهيرة من خط أوسم (Font Awesome):

أيقونة الواتساب: <i class='fa fa-whatsapp'/>

أيقونة الفيسبوك: <i class='fa fa-facebook'/>

أيقونة لينكدإن: <i class='fa fa-linkedin'/>

أيقونة تويتر: <i class='fa fa-twitter'/>

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

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