اضافة أزرار المفضلات الإجتماعية social bookmark buttons

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

ماهي أزرار المفضلات الإجتماعية ؟

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

مواضع ادراجها :

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

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

* نقوم بتسجيل الدخول الى حساب البلوجر

* من لوحة التحكم نختار تصميم

* ثم نختار اضافة أداة ثم HTML/JavaScript

* بعده نقوم بنسخ الشفرة التالية ولصقها بمربع HTML/JavaScript ونقوم بحفظ الأداة

<style type="text/css">
#sharedock { position: fixed; bottom: 0; left: 0; width: 100%; height: 90px; z-index: 999; }
#dock { position: relative; bottom: 0; font: 13px "Trebuchet MS", Verdana, Helvetica, sans-serif; }
.dock-container { position: relative; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgBCy5Xoo6U4WXuY6ftor2iPTf8YpTJgFxIY_R99HrwFZoZYlE3oMerG56NuwxqhJ_1fXqtfzKb29dCe35ElKOqkPvBVJxf7FnLQFuiCAg9za1DRW6zT5sWNhyphenhyphenTKOVYISSjfSHB9QtMe9Q/) no-repeat bottom center; height: 50px; padding: 20px 0 20px 0; }
.dock-container .custom_images a { display: block; position: absolute; bottom: 0; text-align: center; text-decoration: none; color: #333; cursor: pointer; }
.dock-container .custom_images span { background: rgba(0,0,0,.75); display: none; padding: 2px 8px; margin-left: 17px; font-size: 11px; color: #fff; -moz-border-radius: 10px; -webkit-border-radius: 10px; }
.dock-container .custom_images img { border: 0; margin: 5px 0px 10px 0px; width: 100%; }
</style>

<div id="sharedock">
<div id="dock">
<div class="dock-container">

<div class="addthis_toolbox">

<div class="custom_images">

<a class="addthis_button_facebook"><span>Facebook</span><img src="http://addthis.com/cms-content/images/gallery/aquaticus_facebook.png" alt="Share to Facebook" /></a>
<a class="addthis_button_twitter"><span>Twitter</span><img src="http://addthis.com/cms-content/images/gallery/aquaticus_twitter.png" alt="Share to Twitter" /></a>
<a class="addthis_button_myspace"><span>MySpace</span><img src="http://addthis.com/cms-content/images/gallery/aquaticus_myspace.png" alt="Share to MySpace" /></a>
<a class="addthis_button_stumbleupon"><span>Stumble</span><img src="http://addthis.com/cms-content/images/gallery/aquaticus_stumbleupon.png" alt="Stumble It" /></a>
<a class="addthis_button_reddit"><span>Reddit</span><img src="http://addthis.com/cms-content/images/gallery/aquaticus_reddit.png" alt="Share to Reddit" /></a>
<a class="addthis_button_delicious"><span>Delicious</span><img src="http://addthis.com/cms-content/images/gallery/aquaticus_delicious.png" alt="Share to Delicious" /></a>
<a class="addthis_button_more"><span>More...</span><img src="http://addthis.com/cms-content/images/gallery/addthis_64.png" alt="More..." /></a>
</div>
</div>
</div>
</div>
</div>

<script type="text/javascript" src="http://s7.addthis.com/js/250/addthis_widget.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript" src="http://addthis.com//cms-content/images/gallery/fisheye-iutil.min.js"></script>
<script type="text/javascript">
$(function () {
// Dock initialize
$('#dock').Fisheye(
{
maxWidth: 30,
items: 'a',
itemsText: 'span',
container: '.dock-container',
itemWidth: 50,
proximity: 60,
alignment : 'left',
valign: 'bottom',
halign : 'center'
}
);
});
</script>

ادخال بعض التعديلات :

* يمكن تعديل خلفية الإداة وذالك باستبدال الصورة الموجودة بصورة مغايرة أو حذفها لتصبح مساحة ذات لون أبيض

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgBCy5Xoo6U4WXuY6ftor2iPTf8YpTJgFxIY_R99HrwFZoZYlE3oMerG56NuwxqhJ_1fXqtfzKb29dCe35ElKOqkPvBVJxf7FnLQFuiCAg9za1DRW6zT5sWNhyphenhyphenTKOVYISSjfSHB9QtMe9Q/ .

* halign : 'center' : لتبديل عرض الأيقونات وسط - يمين - يسار يمكنك وضع left أو right مكان center.

* width: 100% : لتعديل حجم الأيقونات