كيفية إضافة أزرار مشاركة اجتماعية عائمة في مواقع بلوجر ووردبريس؟

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

هذا هو المكان الذي تأتي فيه أزرار المشاركة الاجتماعية!

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

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

دليل خطوة بخطوة حول كيفية إضافة أزرار المشاركة الاجتماعية العائمة في مواقع Blogger

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

كود HTML

 <div class="social-share"> <a href="#" class="facebook"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M20.05,0H3.95A3.952,3.952,0,0,0,0,3.95V20.05A3.952,3.952,0,0,0,3.95,24H12.63V14.71H9.62v-3H12.63v-1.5c0-3.6,2.2-5.55,5.38-5.55a28.475,28.475,0,0,1,3.18.16v3L18.79,9c-1.7,0-2,.81-2,1.95v1.5h4.05l-.53,3.05H16.8V24H20.05A3.952,3.952,0,0,0,24,20.05V3.95A3.952,3.952,0,0,0,20.05,0Z"/></svg> </a> <a href="#" class="whatsapp"><svg viewBox="0 0 64 64"><path d="M6.9,48.4c-0.4,1.5-0.8,3.3-1.3,5.2c-0.7,2.9,1.9,5.6,4.8,4.8l5.1-1.3c1.7-0.4,3.5-0.2,5.1,0.5 c4.7,2.1,10,3,15.6,2.1c12.3-1.9,22-11.9,23.5-24.2C62,17.3,46.7,2,28.5,4.2C16.2,5.7,6.2,15.5,4.3,27.8c-0.8,5.6,0,10.9,2.1,15.6 C7.1,44.9,7.3,46.7,6.9,48.4z M21.3,19.8c0.6-0.5,1.4-0.9,1.8-0.9s2.3-0.2,2.9,1.2c0.6,1.4,2,4.7,2.1,5.1c0.2,0.3,0.3,0.7,0.1,1.2 c-0.2,0.5-0.3,0.7-0.7,1.1c-0.3,0.4-0.7,0.9-1,1.2c-0.3,0.3-0.7,0.7-0.3,1.4c0.4,0.7,1.8,2.9,3.8,4.7c2.6,2.3,4.9,3,5.5,3.4 c0.7,0.3,1.1,0.3,1.5-0.2c0.4-0.5,1.7-2,2.2-2.7c0.5-0.7,0.9-0.6,1.6-0.3c0.6,0.2,4,1.9,4.7,2.2c0.7,0.3,1.1,0.5,1.3,0.8 c0.2,0.3,0.2,1.7-0.4,3.2c-0.6,1.6-2.1,3.1-3.2,3.5c-1.3,0.5-2.8,0.7-9.3-1.9c-7-2.8-11.8-9.8-12.1-10.3c-0.3-0.5-2.8-3.7-2.8-7.1 C18.9,22.1,20.7,20.4,21.3,19.8z"></path></svg></a> <a href="#" class="pinterest"><svg viewBox="0 0 64 64"><path d="M14.4,53.8c2.4,2,6.1,0.6,6.8-2.4l0-0.1c0.4-1.8,2.4-10.2,3.2-13.7c0.2-0.9,0.2-1.8-0.1-2.7 C24.2,34,24,32.8,24,31.5c0-4.1,2.4-7.2,5.4-7.2c2.5,0,3.8,1.9,3.8,4.2c0,2.6-1.6,6.4-2.5,9.9c-0.7,3,1.5,5.4,4.4,5.4 c5.3,0,8.9-6.8,8.9-14.9c0-6.1-4.1-10.7-11.6-10.7c-8.5,0-13.8,6.3-13.8,13.4c0,2.4,0.7,4.2,1.8,5.5c0.5,0.6,0.6,0.9,0.4,1.6 c-0.1,0.5-0.4,1.8-0.6,2.2c-0.2,0.7-0.8,1-1.4,0.7c-3.9-1.6-5.7-5.9-5.7-10.7c0-8,6.7-17.5,20-17.5c10.7,0,17.7,7.7,17.7,16 c0,11-6.1,19.2-15.1,19.2c-1.9,0-3.8-0.7-5.2-1.6c-0.9-0.6-2.1-0.1-2.4,0.9c-0.5,1.9-1.1,4.3-1.3,4.9c-0.1,0.5-0.3,0.9-0.4,1.4 c-1,2.7,0.9,5.5,3.7,5.7c2.1,0.1,4.2,0,6.3-0.3c12.4-2,22.1-12.2,23.4-24.7C61.5,18.1,48.4,4,32,4C16.5,4,4,16.5,4,32 C4,40.8,8.1,48.6,14.4,53.8z"></path></svg></a> <a href="#" class="linkedin"><svg viewBox="0 0 64 64"><path d="M8,54.7C8,55.4,8.6,56,9.3,56h9.3c0.7,0,1.3-0.6,1.3-1.3V23.9c0-0.7-0.6-1.3-1.3-1.3H9.3 c-0.7,0-1.3,0.6-1.3,1.3V54.7z"></path><path d="M46.6,22.3c-4.5,0-7.7,1.8-9.4,3.7c-0.4,0.4-1.1,0.1-1.1-0.5l0-1.6c0-0.7-0.6-1.3-1.3-1.3h-9.4 c-0.7,0-1.3,0.6-1.3,1.3c0.1,5.7,0,25.4,0,30.7c0,0.7,0.6,1.3,1.3,1.3h9.5c0.7,0,1.3-0.6,1.3-1.3V37.9c0-1,0-2,0.3-2.7 c0.8-2,2.6-4.1,5.7-4.1c4.1,0,6,3.1,6,7.6v15.9c0,0.7,0.6,1.3,1.3,1.3h9.3c0.7,0,1.3-0.6,1.3-1.3V37.4C60,27.1,54.1,22.3,46.6,22.3 z"></path><path d="M13.9,18.9L13.9,18.9c3.8,0,6.1-2.4,6.1-5.4C19.9,10.3,17.7,8,14,8c-3.7,0-6,2.3-6,5.4 C8,16.5,10.3,18.9,13.9,18.9z"></path></svg></a> </div>

كود CSS

 <style> .social-share{position:fixed;left:20px;top:50%;transform:translateY(-50%);z-index:9999;}.social-share a{display:flex;justify-content:center;align-items:center;margin-bottom:10px;width:40px;height:40px;border-radius:50%;background-color:#fff;box-shadow:0 2px 4px rgba(0, 0, 0, 0.2);transition:all 0.3s ease-in-out;}.social-share a:hover{transform:translateY(-5px);box-shadow:0 4px 8px rgba(0, 0, 0, 0.2);}.social-share a svg{width:20px;height:20px;fill:#555;vertical-align:middle;}.social-share a.facebook svg{fill:#3b5998;}.social-share a.whatsapp svg{fill:#25d366;}.social-share a.pinterest svg{fill:#bd081c;}.social-share a.linkedin svg{fill:#0077b5;}@media only screen and (max-width:600px){.social-share{display:none;}}</style>

كود جافا سكريبت

 <script> var socialShareButtons = document.querySelectorAll('.social-share a'); function shareOnFacebook() { var title = document.title; var url = window.location.href; var shareUrl = 'https://www.facebook.com/sharer.php?u=' + encodeURIComponent(url) + '&t=' + encodeURIComponent(title); window.open(shareUrl, '', 'menubar=no,toolbar=no,resizable=yes,scrollbars=yes,height=300,width=600'); } function shareOnWhatsApp() { var title = document.title; var url = window.location.href; var shareUrl = 'https://wa.me/?text=' + encodeURIComponent(title + ' ' + url); window.open(shareUrl, '', 'menubar=no,toolbar=no,resizable=yes,scrollbars=yes,height=300,width=600'); } function shareOnPinterest() { var title = document.title; var url = window.location.href; var shareUrl = 'https://www.pinterest.com/pin/create/button/?url=' + encodeURIComponent(url) + '&media=&description=' + encodeURIComponent(title); window.open(shareUrl, '', 'menubar=no,toolbar=no,resizable=yes,scrollbars=yes,height=300,width=600'); } function shareOnLinkedIn() { var title = document.title; var url = window.location.href; var shareUrl = 'https://www.linkedin.com/sharing/share-offsite/?url=' + encodeURIComponent(url) + '&title=' + encodeURIComponent(title); window.open(shareUrl, '', 'menubar=no,toolbar=no,resizable=yes,scrollbars=yes,height=300,width=600'); } socialShareButtons.forEach(function(button) { button.addEventListener('click', function(event) { event.preventDefault(); var shareType = this.classList[0]; switch(shareType) { case 'facebook': shareOnFacebook(); break; case 'whatsapp': shareOnWhatsApp(); break; case 'pinterest': shareOnPinterest(); break; case 'linkedin': shareOnLinkedIn(); break; } }); }); </script>

هنا ، أضفت أزرار Facebook و Whatsapp و Pinterest و Linkedin في أداة المشاركة الاجتماعية العائمة هذه.

كيفية إضافة المزيد من الرموز في زر المشاركة العائم هذا

لنفترض أنك تريد إضافة المزيد من الرموز مثل Telegram ، فأنت بحاجة إلى تعديل كل رمز أعلاه.

يمكنك إضافة كود HTML مثل هذا بين علامة div الأصلية. (تحقق من النص الغامق)

 <a href="#" class="telegram"><svg viewBox="0 0 64 64"><path d="M56.4,8.2l-51.2,20c-1.7,0.6-1.6,3,0.1,3.5l9.7,2.9c2.1,0.6,3.8,2.2,4.4,4.3l3.8,12.1c0.5,1.6,2.5,2.1,3.7,0.9 l5.2-5.3c0.9-0.9,2.2-1,3.2-0.3l11.5,8.4c1.6,1.2,3.9,0.3,4.3-1.7l8.7-41.8C60.4,9.1,58.4,7.4,56.4,8.2z M50,17.4L29.4,35.6 c-1.1,1-1.9,2.4-2,3.9c-0.2,1.5-2.3,1.7-2.8,0.3l-0.9-3c-0.7-2.2,0.2-4.5,2.1-5.7l23.5-14.6C49.9,16.1,50.5,16.9,50,17.4z"></path></svg></a>

هنا ، قمنا بإضافة اسم فئة “ telegram ” وقمنا بتغيير كود SVG.

الآن دعنا نضيف كود CSS للتلجرام أيضًا.

 .social-share a.telegram svg{fill:#0088cc;}

هنا ، أضفنا لون أيقونة التلغرام.

أنت الآن بحاجة إلى تعديل كود Javascript لكي يعمل زر Telegram. (حساسية الموضوع)

 <script> var socialShareButtons = document.querySelectorAll('.social-share a'); function shareOnFacebook() { var title = document.title; var url = window.location.href; var shareUrl = 'https://www.facebook.com/sharer.php?u=' + encodeURIComponent(url) + '&t=' + encodeURIComponent(title); window.open(shareUrl, '', 'menubar=no,toolbar=no,resizable=yes,scrollbars=yes,height=300,width=600'); } function shareOnWhatsApp() { var title = document.title; var url = window.location.href; var shareUrl = 'https://wa.me/?text=' + encodeURIComponent(title + ' ' + url); window.open(shareUrl, '', 'menubar=no,toolbar=no,resizable=yes,scrollbars=yes,height=300,width=600'); } function shareOnPinterest() { var title = document.title; var url = window.location.href; var shareUrl = 'https://www.pinterest.com/pin/create/button/?url=' + encodeURIComponent(url) + '&media=&description=' + encodeURIComponent(title); window.open(shareUrl, '', 'menubar=no,toolbar=no,resizable=yes,scrollbars=yes,height=300,width=600'); } function shareOnLinkedIn() { var title = document.title; var url = window.location.href; var shareUrl = 'https://www.linkedin.com/sharing/share-offsite/?url=' + encodeURIComponent(url) + '&title=' + encodeURIComponent(title); window.open(shareUrl, '', 'menubar=no,toolbar=no,resizable=yes,scrollbars=yes,height=300,width=600'); } function shareOnTelegram() { var title = document.title; var url = window.location.href; var shareUrl = 'https://www.linkedin.com/sharing/share-offsite/?url=' + encodeURIComponent(url) + '&title=' + encodeURIComponent(title); window.open(shareUrl, '', 'menubar=no,toolbar=no,resizable=yes,scrollbars=yes,height=300,width=600'); } وظيفة shareOnTelegram () {
  var title = document.title ؛
  var url = window.location.href ؛
  var shareUrl = 'https://t.me/share/url؟url=' + encodeURIComponent (url) + '& text =' + encodeURIComponent (العنوان) ؛
  window.open (shareUrl، ''، 'menubar = لا ، شريط الأدوات = لا ، تغيير الحجم = نعم ، أشرطة التمرير = نعم ، الارتفاع = 300 ، العرض = 600') ؛
}
  
socialShareButtons.forEach (الوظيفة (الزر) {
  button.addEventListener ('click' ، الوظيفة (الحدث) {
    event.preventDefault () ،
    var shareType = this.classList [0] ،
    التبديل (نوع المشاركة) {
      حالة "facebook":
        أنشرها على الفيسبوك()؛
        استراحة؛
      حالة "whatsapp":
        ShareOnWhatsApp () ؛
        استراحة؛
      حالة "بينتيريست":
        ShareOnPinterest () ،
        استراحة؛
      حالة "linkedin":
        shareOnLinkedIn () ،
        استراحة؛
        
      حالة "برقية":
        ShareOnTelegram () ،
        استراحة؛
    }
  }) ؛
}) ؛
</script>

لنفترض أنك تريد إضافة زر بريد إلكتروني يمكنك تعديل كود js مثل هذا. واتبع نفس العملية لإضافة كود HTML و CSS أيضًا.

 function shareOnEmail() { var title = document.title; var url = window.location.href; var shareUrl = 'mailto:?subject=' + encodeURIComponent(title) + '&body=' + encodeURIComponent(url); window.location.href = shareUrl; }

أتمنى أن تكون قد فهمت كيف يمكنك إضافة المزيد من رموز المشاركة الاجتماعية.

كيفية إضافة أزرار المشاركة الاجتماعية العائمة في Wordpress

في Wordpress ، يكون الترميز هو نفسه كما تمت مناقشته أعلاه. يمكنك لصق الشفرة مباشرة أعلى علامة </body> في ملف footer.php.

أو يمكنك استخدام البرنامج المساعد لمدير الكود مثل WP Code - أدخل الرؤوس والتذييلات.

خاتمة

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

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