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

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

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

الطريقة :

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

ما عليك الان إلا اتباع المراحل التالية :

1- انتقل إلى لوح تحكم مدونتك ، إختر " تخطيط ".

2- اضغط على إضافة أداة أو عنصر واجهة ( ويدجيت ) Widget.

3- اختر HTML/JAVASCRIPT

4- أضف الكود التالي :

<!--SideBar Floating Share Buttons Code Start-->
<style>#pageshare {position:fixed; bottom:15%; left:9%; float:left; border-radius:5px;-moz-border-radius:5px;-webkit-border-radius:5px;background-color:#fff;padding:0 0 2px 0;z-index:10;}
#pageshare .sbutton {float:left;clear:both;margin:5px 5px 0 5px;}
.fb_share_count_top {width:48px !important;}
.fb_share_count_top, .fb_share_count_inner {-moz-border-radius:3px;-webkit-border-radius:3px;}
.FBConnectButton_Small, .FBConnectButton_RTL_Small {width:49px !important; -moz-border-radius:3px;-webkit-border-radius:3px;}
.FBConnectButton_Small .FBConnectButton_Text {padding:2px 2px 3px !important;-moz-border-radius:3px;-webkit-border-radius:3px;font-size:8px;}
</style>
<div id='pageshare' title="Share This With Your Friends">
<div class='sbutton' id='gb'>
<script src="http://connect.facebook.net/fr_FR/all.js#xfbml=1"></script><fb:like layout="box_count" show_faces="false" font=""></fb:like></div>
<div class='sbutton' id='rt'>
<a href="http://twitter.com/share" class="twitter-share-button" data-count="vertical" >Tweet</a><script src='http://platform.twitter.com/widgets.js' type="text/javascript"></script></div>
<div class='sbutton' id='gplusone'>
<script type="text/javascript" src="https://apis.google.com/js/plusone.js"></script><g:plusone size="tall"></g:plusone></div>
<br/><div style="clear: both;font-size: 9px;text-align:center;">
<a href=" http://afkarpro.blogspot.com " target="blank"><font color="black">[share this]<font></font></font></a></div>
</div>
<!--SideBar Floating Share Buttons Code End-->

*! إذا واجهت أي مشكل في تثبيت القطعة، لا تتردد في ترك سؤالك في الأسفل، سأجيب بالتأكيد! إن شاء الله.