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

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



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

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

إضافة أزرار المشاركة إلى Blogger / بلوغسبوت

1. تسجيل الدخول إلى حساب Blogger الخاص بك

2. انتقل إلى القالب> تحرير HTML

3. انقر فوق المربع المسمى "توسيع قوالب عناصر واجهة المستخدم" 

4. البحث عن هذا الكود :


</head>


5. لصق هذا الكود فوقه:

<script type="text/javascript" src="http://w.sharethis.com/button/buttons.js"></script>

<script type="text/javascript">stLight.options({publisher: "ur-47c9cca-cf33-f245-f3f6-43ed7a58f34f"}); </script>


6. الآن البحث عن هذا:
<data:post.body/>


ملاحظة أنه سيكون لديك أكثر من واحد من هذا الكود إذا كنت تستخدم قالب نمط المجلة. يجب أن الاستمرار في المحاولةا تلو الآخر حتى تجد الكود المطلوب و معينة مدونتك كل مرة تقوم فيها بتنفيذ الكود التاليلمعرفة إذا يعمل.

7. نسخ هذا الكود :

<b:if cond='data:blog.pageType == &quot;item&quot;'>

<style>

.doncaprio-share-buttons

{

-webkit-border-radius: 5px;

-moz-border-radius: 5px;

border-radius: 5px;

border:1px solid #BBBBBB;

background-color:#FFFFFF;

-webkit-box-shadow: #B3B3B3 5px 5px 5px;

-moz-box-shadow: #B3B3B3 5px 5px 5px;

box-shadow: #B3B3B3 5px 5px 5px;

padding: 5px;

margin: 10px;

}

</style>

<p align='center' class='doncaprio-share-buttons'>

<span class='st_facebook_hcount' displayText='Facebook'/>

<span class='st_plusone_hcount' displayText='Google +1'/>

<span class='st_twitter_hcount' displayText='Tweet'/>

<span class='st_pinterest_hcount' displayText='Pinterest'/>

<span class='st_digg_hcount' displayText='Digg'/>

<span class='st_stumbleupon_hcount' displayText='StumbleUpon'/>

<span class='st_fblike_hcount' displayText='Facebook Like'/>

</p>

</b:if>



إذا كنت تريد أن تظهر الأزرار فوق مشاركاتك، لصق الكود اعلاه <data:post.body/>.

إذا كنت تفضل أن تكون الأزرار مشاركة أسفل محتوى موقعك، قم بلصق الكود بعد <data:post.body/>.

يمكنك كذلك وضع الكود في كل المواقف إذا أردت.

يمكنك تغيير CSS لتغيير الشكل والمظهر إذا كنت تريد. هل رأيت الجزء الملون من الكود ؟ هذه هي الطريقة التي يتم ترتيب الأزرار. يمكنك إزالة تلك التي لا تحب أو تغيير الترتيب.

إضافة أزرار مشاركة في ووردبريس 

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

1. نسخ هذا الكود :



<script type="text/javascript" src="http://w.sharethis.com/button/buttons.js"></script>

<script type="text/javascript">stLight.options({publisher: "ur-47c9cca-cf33-f245-f3f6-43ed7a58f34f"}); </script>

والصقه في القسم head .

بالنسبة للمستخدمين ثيم Genesis، ببساطة اذهب الى 

Genesis > Theme Settings > Header and Footer Scripts

ولصق الكود .

إذا كنت تستخدم أي السمة وردبريس أخرى تثبيت المكون الإضافيHeader and Footer. ثم انتقل إلى

Settings > Header and Footer > Code to be added on HEAD section of every page

  ولصق الكود هناك.

إذا كنت تريد أن تظهر أزرار على MobilePress، تسجيل الدخول إلى وحة التحكم إدارة الملفات وانتقل إلى 

…public_html/wp-content/plugins/mobilepress/system/themes/default/header.php.


 تحرير header.php الخاص ولصق الكود قبل العلامة الإغلاق </head> .


2. والثاني هذا الكود يحتاج Post Layout plugin  للعمل. هذه الإضافة تحدد كيفية تبدو مشاركة الخاص بك وماذا تريد أن تضع قبله, أو بعد وحتى في وسط المحتوى الخاص بك. يمكنك حتى استخدامها لإضافة أكواد ادسينس ولكن تلك قصة أخرى ;).

بعد تثبيت الوظيفة الإضافية؟ وننتقل الآن إلى

Settings > Post Layout > Before the content 

و / أو

  Before the content.

و لصق هذا الكود هناك :

<style>

.doncaprio-share-buttons

{

-webkit-border-radius: 5px;

-moz-border-radius: 5px;

border-radius: 5px;

border:1px solid #BBBBBB;

background-color:#FFFFFF;

-webkit-box-shadow: #B3B3B3 5px 5px 5px;

-moz-box-shadow: #B3B3B3 5px 5px 5px;

box-shadow: #B3B3B3 5px 5px 5px;

padding: 5px;

margin: 10px;

}

</style>

<p align='center' class='doncaprio-share-buttons'>

<span class='st_facebook_hcount' displayText='Facebook'/>

<span class='st_plusone_hcount' displayText='Google +1'/>

<span class='st_twitter_hcount' displayText='Tweet'/>

<span class='st_pinterest_hcount' displayText='Pinterest'/>

<span class='st_digg_hcount' displayText='Digg'/>

<span class='st_stumbleupon_hcount' displayText='StumbleUpon'/>

<span class='st_fblike_hcount' displayText='Facebook Like'/>

</p>


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

1 تعليقات

أحدث أقدم