كيفية إنشاء أزرار مشاركة لموقعك خطوة بخطوة

نشرت: 2021-05-21

تعد أزرار المشاركة الاجتماعية عنصرًا لا غنى عنه في كل موقع ويب. سواء كانت مدونة شخصية أو تجارية ، أو محفظة عبر الإنترنت ، أو مشروع تجارة إلكترونية ، فإن الأزرار الاجتماعية تمكن العملاء من نشر الحديث بسهولة عن المحتوى الخاص بك على Facebook أو Twitter أو Instagram أو Pinterest. أثناء تنفيذ أزرار المشاركة الاجتماعية السهلة في مورد الويب الخاص بك ، يمكنك توسيع نطاق وصولك بشكل كبير والترحيب بالعملاء الجدد للقدوم إلى موقعك بحثًا عن محتوى أو سلع قيّمة. لا ينبغي الاستهانة بقوة شبكات التواصل الاجتماعي هذه الأيام. إذا تعذر العثور على شركة على Facebook أو Instagram ، فإنها تفقد فرصة للوصول إلى جمهورها المستهدف وتسويق سلعها وخدماتها لمزيد من الأشخاص. كما يوحي الاسم ، تجعل أزرار المشاركة الاجتماعية المحتوى الخاص بك أكثر قابلية للمشاركة على الويب. من الممارسات الشائعة للمستخدمين الحديثين مشاركة الروابط الخاصة بمنتجاتهم المفضلة على صفحاتهم على Facebook. يمكن الوصول إلى كل منشور اجتماعي من قبل المتابعين الذين لديهم نفس الاهتمامات والتفضيلات مثل عميلك.

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

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

كيفية إنشاء زر مشاركة خطوة بخطوة

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

دورات تصميم المواقع

  • دروس الترميز عبر الإنترنت للتعلم في المنزل
  • أكمل حزمة إتقان Photoshop

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

الخطوة 1

أول شيء يجب عليك فعله هو فتح ملف HTML ولصق الكود أدناه

<a onclick="Share.facebook('URL','TITLE','IMG_PATH','DESC')"> {sharing is sexy}</a>
<a onclick="Share.twitter('URL','TITLE')"> {sharing is sexy}</a>

أو
<a href="http://www.facebook.com/sharer/sharer.php?s=100&
p%5Btitle%5D=TITLE&p%5Bsummary%5D=DESC&p%5Burl%5D=
URL&p%5Bimages%5D%5B0%5D=IMG_PATH" target="_blank" onclick="return Share.me(this);">{sharing is sexy}</a>
<a href="https://twitter.com/intent/tweet?original_referer=
http%3A%2F%2Ffiddle.jshell.net%2F_display%2F&text=TITLE&url
=URL" target="_blank" onclick="return Share.me(this)">{sharing is sexy}</a>

كيفية إنشاء أزرار مشاركة لموقعك خطوة بخطوة 1

الخطوة 2

الآن قم بإنشاء ملف js يحتوي على هذه المعلومات:

Share = {
facebook: function(purl, ptitle, pimg, text) {
url = 'http://www.facebook.com/sharer.php?s=100';
url += '&p[title]=' + encodeURIComponent(ptitle);
url += '&p[summary]=' + encodeURIComponent(text);
url += '&p[url]=' + encodeURIComponent(purl);
url += '&p[images][0]=' + encodeURIComponent(pimg);
Share.popup(url);
},
twitter: function(purl, ptitle) {
url = 'http://twitter.com/share?';
url += 'text=' + encodeURIComponent(ptitle);
url += '&url=' + encodeURIComponent(purl);
url += '&counturl=' + encodeURIComponent(purl);
Share.popup(url);
},
popup: function(url) {
window.open(url,'','toolbar=0,status=0,width=626, height=436');
}
};

هذا كل شيء :) طريقة بسيطة للغاية لتتبع إحصائيات النقر فوق زر المشاركة الذي يتم وضعه مباشرة على صفحة المشاركة. تم حل هذه المشكلة بمساعدة جدول في قاعدة البيانات و ajax البسيط:

popup: function(url,soc) {
window.open(url,'','toolbar=0,status=0,width=626, height=436');

}

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

بالطبع ، هذا المثال بدائي بعض الشيء ، لكن من الجيد أن تبدأ في إنشاء أزرار المشاركة الرائعة الخاصة بك. جربها!

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

كيفية إضافة زر مشاركة Facebook

تتيح أزرار المشاركة على Facebook لعملائك مشاركة الروابط التي توجههم إلى المنشورات أو الصفقات على موقع الويب الخاص بك مع جزء من النص المكتوب خصيصًا.

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

الآن دعونا نلقي نظرة على ما تعنيه بعض الحقول في صفحة الإعداد.

  • URL to Like - يضيف هذا الحقل صفحة الموقع التي نريد مشاركتها على Facebook.
  • العرض - يتم تعيين عرض الزر هنا.
  • فعل للعرض - هنا يمكننا تحديد النص في زر "أعجبني" أو "أوصي".
  • مخطط الألوان - هنا يمكنك اختيار تصميم الزر للمواقع المضيئة أو المظلمة.
  • الخط - حدد الخط لتسميات الأزرار.

بعد أن حددنا الإعدادات ، ابحث عن زر "Get Code" وانقر فوقه. بعد ذلك ، سيتم عرض نافذة بها الكود ، ويجب أيضًا إدخالها على مرحلتين:

أدخل الرمز مباشرة بعد علامة <body>.

كود عرض الزر:

الصق هذا الرمز حيث يجب عرض الزر من facebook:

كيفية إضافة Twitter Share Button

أثناء إضافة أزرار مشاركة Twitter إلى موقع الويب الخاص بك ، هناك العديد من الأشياء التي يوصي مطورو Twitter بتذكرها:

  • إذا لم يقم المستخدم بتسجيل الدخول إلى حساب Twitter الخاص به ، فسيُطلب منه تسجيل الدخول لإرسال رسالتك.
  • سيتم ربط التغريدة بصفحة الويب التي زارها الشخص. قد يشعر المستخدم بالحرية في تعديل رسالة التغريدة بالطريقة التي يريدها.
  • بعد النقر فوق "تغريد" ، سيكشف المربع المنبثق قائمة بالحسابات ذات الصلة على Twitter. قد يقرر المستخدم مكان متابعته أو يتجاهله.
  • لا يوجد حد لعدد المرات في اليوم الواحد ويمكن للمستخدم نفسه أن يغرد شيئًا ما على الخط الزمني.

لإضافة زر مشاركة Twitter ، قم بما يلي:

  • انتقل إلى publish.twitter.com واضغط على Twitter Buttons.
  • اختر نوع زر مشاركة Twitter الذي تريد إضافته إلى موقعك.
  • اضبط التغريدة والرسالة التي ستتضمنها مع ذكر الحساب الذي تريد ذكره.
  • بمجرد الانتهاء من ذلك ، انسخ الكود والصقه في موقعك.

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