أخف وأسرع أزرار المشاركة الاجتماعية لمدونات بلوجر
أزرار المشاركة الإجتماعية هي من الأدوات التي نجدها تقريبا في كل المواقع والمدونات لأنها:
كما أشرت لذلك في موضوع تحسين سرعة مدونات بلوجر، فقد قمت سابقا باستخدام أدوات Addthis إلا أني قمت بحذفها لأنها كانت تسبب بطئ التحميل وهو أمر سيء.
بعد عملية بحث وتجربة بدائل أخرى مثل Sharethis وجدت أخيرا أداة مميزة وسريعة التحميل وهي Addtoany. الأداة توفر الكثير من الخيارات من قبيل:
إذا كنت تريد إضافتها لمدونتك، فإليك ما يجب فعله.
- تسهل للزوار مشاركة المحتوى مع الآخرين.
- تساعد صاحب الموقع أو المدونة في نشر وايصال المحتوى لأكبر عدد ممكن من الناس.
- عدد المشاركات وتأثير محتوى ما في الشبكات الاجتماعية هو أمر جيد بالنسبة ل سيو وتحسين اليات البحث.
كما أشرت لذلك في موضوع تحسين سرعة مدونات بلوجر، فقد قمت سابقا باستخدام أدوات Addthis إلا أني قمت بحذفها لأنها كانت تسبب بطئ التحميل وهو أمر سيء.
بعد عملية بحث وتجربة بدائل أخرى مثل Sharethis وجدت أخيرا أداة مميزة وسريعة التحميل وهي Addtoany. الأداة توفر الكثير من الخيارات من قبيل:
- أزرار مثبتة في الأسفل أو الأعلى أو الجانب في كل من الجوال والحاسوب.
- إختيار عدد الأزرار التي تحتاجها.
- التحكم في التصميم والألوان.
إذا كنت تريد إضافتها لمدونتك، فإليك ما يجب فعله.
إضافة أداة المشاركة الاجتماعية Addtoany لمدونات بلوجر
ستحتاج لتعديل كود قالب المدونة، لذلك قم بحفظ نسخة من القالب قبل القيام بأية تعديلات. بعد ذلك، قم بالخطوات التالية:
1. قم بالنقر على المظهر ثم تحرير HTML
2. انقر وسط كود القالب ثم Ctrl+F من لوحة المفاتيح للبحث عن </body>:
3. قم بإضافة الكود التالي، والذي سيقوم بتحميل الأزرار للمدونة، فوق </body>:
4. الآن، هناك الكثير من الخيارات لاستعمال الأزرار وطريقة ظهورها:
على الجوال مثبتة في الأسفل:
لجعلها مثبتة في الأعلى، قم بتغيير bottom ب top.
على الكمبيوتر مثبتة إلى اليمين:
لتغيير الثتبيت من اليمين إلى اليسار، غير right وضع مكانه left.
افقيا على الجوال والكمبيوتر وسط الموضوع:
قم بالبحث عن الكود التالي: <data:post.body/>
لإظهار الأداة في بداية الموضوع أسفل العنوان، ضع الكود في فوق:
ولإظهارها في نهاية الموضوع قم بالعكس أي وضع الكود أسفل.
الأداة لما أنها مجانية، فإنها تقوم باظهار اعلان أدسنس بعد نشر الموضوع من طرف الزائر. إذا كنت لا تريد ذلك، اضف الكود التالي فوق </body> :
بالنسبة لتغييرات الألوان والأزرار يمكنك العودة للموقع الرسمي ل Addtoany والحصول على الخيارات التي تلائمك.
3. قم بإضافة الكود التالي، والذي سيقوم بتحميل الأزرار للمدونة، فوق </body>:
<script async='async' src='https://static.addtoany.com/menu/page.js'/>
4. الآن، هناك الكثير من الخيارات لاستعمال الأزرار وطريقة ظهورها:
على الجوال مثبتة في الأسفل:
<b:if cond='data:blog.isMobileRequest == "true"'>
<div class='a2a_kit a2a_kit_size_32 a2a_floating_style a2a_default_style' id='my_centered_buttons' style='bottom:0px; right:0px; width=100%'>
<a class='a2a_button_facebook'/>
<a class='a2a_button_pinterest'/>
<a class='a2a_button_twitter'/>
<a class='a2a_button_whatsapp'/>
<a class='a2a_button_facebook_messenger'/>
<a class='a2a_button_linkedin'/>
<a class='a2a_button_sms'/>
<a class='a2a_button_copy_link'/>
</div>
</b:if>
<div class='a2a_kit a2a_kit_size_32 a2a_floating_style a2a_default_style' id='my_centered_buttons' style='bottom:0px; right:0px; width=100%'>
<a class='a2a_button_facebook'/>
<a class='a2a_button_pinterest'/>
<a class='a2a_button_twitter'/>
<a class='a2a_button_whatsapp'/>
<a class='a2a_button_facebook_messenger'/>
<a class='a2a_button_linkedin'/>
<a class='a2a_button_sms'/>
<a class='a2a_button_copy_link'/>
</div>
</b:if>
لجعلها مثبتة في الأعلى، قم بتغيير bottom ب top.
على الكمبيوتر مثبتة إلى اليمين:
<b:if cond='data:blog.isMobileRequest == "false"'>
<div class='a2a_kit a2a_floating_style a2a_kit_size_32 a2a_vertical_style' style='right:0px; top:150px;'>
<a class='a2a_button_facebook'/>
<a class='a2a_button_pinterest'/>
<a class='a2a_button_twitter'/>
<a class='a2a_button_linkedin'/>
<a class='a2a_button_copy_link'/>
</div>
</b:if>
<div class='a2a_kit a2a_floating_style a2a_kit_size_32 a2a_vertical_style' style='right:0px; top:150px;'>
<a class='a2a_button_facebook'/>
<a class='a2a_button_pinterest'/>
<a class='a2a_button_twitter'/>
<a class='a2a_button_linkedin'/>
<a class='a2a_button_copy_link'/>
</div>
</b:if>
لتغيير الثتبيت من اليمين إلى اليسار، غير right وضع مكانه left.
افقيا على الجوال والكمبيوتر وسط الموضوع:
قم بالبحث عن الكود التالي: <data:post.body/>
لإظهار الأداة في بداية الموضوع أسفل العنوان، ضع الكود في فوق:
<style type="text/css">
#my_centered_buttons { display: flex; justify-content: center; }
#my_centered_buttons_older { margin: 0 auto; width: 144px; }
</style>
<div class="a2a_kit a2a_kit_size_32 a2a_default_style" id="my_centered_buttons">
<a class="a2a_dd" href="https://www.addtoany.com/share"></a>
<a class="a2a_button_facebook"></a>
<a class="a2a_button_twitter"></a>
<a class="a2a_button_email"></a>
</div>
#my_centered_buttons { display: flex; justify-content: center; }
#my_centered_buttons_older { margin: 0 auto; width: 144px; }
</style>
<div class="a2a_kit a2a_kit_size_32 a2a_default_style" id="my_centered_buttons">
<a class="a2a_dd" href="https://www.addtoany.com/share"></a>
<a class="a2a_button_facebook"></a>
<a class="a2a_button_twitter"></a>
<a class="a2a_button_email"></a>
</div>
ولإظهارها في نهاية الموضوع قم بالعكس أي وضع الكود أسفل.
التعديلات
الأداة لما أنها مجانية، فإنها تقوم باظهار اعلان أدسنس بعد نشر الموضوع من طرف الزائر. إذا كنت لا تريد ذلك، اضف الكود التالي فوق </body> :
<script>
var a2a_config = a2a_config || {};
a2a_config.thanks = {
postShare: true,
ad: false,
};
</script>
var a2a_config = a2a_config || {};
a2a_config.thanks = {
postShare: true,
ad: false,
};
</script>
بالنسبة لتغييرات الألوان والأزرار يمكنك العودة للموقع الرسمي ل Addtoany والحصول على الخيارات التي تلائمك.
الإحصائيات
سنعود لاحقا عند بدء دروس جوجل أناليتكس Google Analytics للتعرف على طريقة تتبع عدد المشاركات والمواضيع الأكثر مشاركة على الشبكات الاجتماعية.