دليل المدون

2012-08-22

أفضل طريقة لإضافة أزرار الفيس بوك وتويتر وجوجل بلس لموقعك

بسم الله الرحمن الرحيم
والصلاة والسلام على أشرف المرسلين
سيدنا محمد وعلى آله وصحبه أجمعين

من أهم الأدوات التى تؤدى إلى نشر مواضيع المدونات  هي إضافة أزرار المشاركة عبر جميع المواقع الاجتماعية مثل الفيس بوك، تويتر،جوجل بلس،..............إلخ،لأن نشر المواضيع بهذه المواقع يؤدى إلى المزيد من الزوار والمتابعين.
 ومن وسائل النشر أيضا أزرار الإعجاب بالموضوعات مثل: 
 Like بالفيس بوك
(tweet) على تويتر
(+g) جوجل بلس
like-tweet-google plus-share

وقد عرضت من قبل طريقة إضافة زر أعجبنى وصندوق الإعجاب  Like box,Like 

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


أزرار الإعجاب الأفقية:

like-tweet-google plus-share

<!-- AddThis Button BEGIN -->
<div class="addthis_toolbox addthis_default_style ">
<a class="addthis_button_facebook_like" fb:like:layout="button_count"></a>
<a class="addthis_button_tweet"></a>
<a class="addthis_button_pinterest_pinit"></a>
<a class="addthis_counter addthis_pill_style"></a>
</div>
<script type="text/javascript">var addthis_config = {"data_track_addressbar":true};</script>
<script type="text/javascript" src="http://s7.addthis.com/js/250/addthis_widget.js#pubid=ra-4f756ef243bad71a"></script>
<!-- AddThis Button END -->

أزرار المشاركة الأفقية:

like-tweet-google plus-share


<!-- AddThis Button BEGIN -->
<div class="addthis_toolbox addthis_default_style addthis_32x32_style">
<a class="addthis_button_preferred_1"></a>
<a class="addthis_button_preferred_2"></a>
<a class="addthis_button_preferred_3"></a>
<a class="addthis_button_preferred_4"></a>
<a class="addthis_button_compact"></a>
<a class="addthis_counter addthis_bubble_style"></a>
</div>
<script type="text/javascript">var addthis_config = {"data_track_addressbar":true};</script>
<script type="text/javascript" src="http://s7.addthis.com/js/250/addthis_widget.js#pubid=ra-4f756ef243bad71a"></script>
<!-- AddThis Button END -->

أزرار الإعجاب الرأسية العائمة:
like-tweet-google plus-share 
تظهر بجانب الموضوع عائمة من جهة اليسار

<!-- AddThis Button BEGIN -->
<div class="addthis_toolbox addthis_floating_style addthis_counter_style" style="left:50px;top:50px;">
<a class="addthis_button_facebook_like" fb:like:layout="box_count"></a>
<a class="addthis_button_tweet" tw:count="vertical"></a>
<a class="addthis_button_google_plusone" g:plusone:size="tall"></a>
<a class="addthis_counter"></a>
</div>
<script type="text/javascript">var addthis_config = {"data_track_addressbar":true};</script>
<script type="text/javascript" src="http://s7.addthis.com/js/250/addthis_widget.js#pubid=ra-4f756ef243bad71a"></script>
<!-- AddThis Button END -->

وهذا الكود إذا كنت تريد الإضافة جهة اليمين

<!-- AddThis Button BEGIN -->
<div class="addthis_toolbox addthis_floating_style addthis_counter_style" style="right:0px;top:320px;">
<a class="addthis_button_facebook_like" fb:like:layout="box_count"></a>
<a class="addthis_button_tweet" tw:count="vertical"></a>
<a class="addthis_button_google_plusone" g:plusone:size="tall"></a>
<a class="addthis_counter"></a>
</div>
<script type="text/javascript">var addthis_config = {"data_track_addressbar":true};</script>
<script type="text/javascript" src="http://s7.addthis.com/js/250/addthis_widget.js#pubid=ra-4f756ef243bad71a"></script>
<!-- AddThis Button END -->

 أزرار المشاركة رأسية عائمة:
like-tweet-google plus-share

<!-- AddThis Button BEGIN -->
<div class="addthis_toolbox addthis_floating_style addthis_32x32_style" style="left:50px;top:50px;">
<a class="addthis_button_preferred_1"></a>
<a class="addthis_button_preferred_2"></a>
<a class="addthis_button_preferred_3"></a>
<a class="addthis_button_preferred_4"></a>
<a class="addthis_button_compact"></a>
</div>
<script type="text/javascript">var addthis_config = {"data_track_addressbar":true};</script>
<script type="text/javascript" src="http://s7.addthis.com/js/250/addthis_widget.js#pubid=ra-4f756ef243bad71a"></script>
<!-- AddThis Button END -->

أزرار الإعجاب أسفل كل موضوع على حدة:

like-tweet-google plus-share

<span id="st_finder"></span><script type="text/javascript" src="http://w.sharethis.com/widget/stblogger2.js"></script><script type="text/javascript">var switchTo5x=true;stBlogger2.init("http://w.sharethis.com/button/buttons.js", {"fblike":["vcount","Facebook Like",""],"fbsend":["vcount","Facebook Send",""],"twitter":["vcount","Tweet",""],"googleplus":["vcount","Google +",""],"delicious":["vcount","Delicious",""],"sharethis":["vcount","ShareThis",""]} , "476ff4f2-24ab-4bcb-aebb-22fe2df9ef0c");var f = document.getElementById("st_finder");var c = f.parentNode.parentNode.childNodes;for (i=0;i<c.length;i++) { try { c[i].style.display = "none"; } catch (err) {}}</script>
 
بالنسبة لتركيب الإضافة لمدونات بلوجر :
  1. الذهاب إلى لوحة التحكم
  2. تخطيط أو تصميم
  3. عناصر الصفحة
  4. أضف أداة
  5. اختار Html/Javascript
 ثم إنسخ الكود كاملاً وألصقه بالأداة
 
هذه الأكواد من موقعى (Add this) ، (share this) ويمكنك التسجيل بهم وإختيار ما يناسب موقعك .
تابع أيضا
 4 نوافذ متحركة صندوق معجبين الفيس بوك مع صندوق محادثة تويتر وزر جوجل +1 والإشتراك بالقائمة البريدية لمدونات بلوجر
تنبيه : المرجو عدم نسخ الموضوع بدون ذكر مصدره المرفق بالرابط المباشر للموضوع الأصلي وإسم المدونة وشكرا
تصميم مواقع إلكترونية و تطبيقات بأقل الأسعار

هناك 47 تعليقًا

  1. يشرفني أن أكون أول من يرد

    جهد رائع و إضافات أروع تشكرين عليها

    ردحذف
  2. عواافي اختي العزيزه ع هذي الأضافه الجميله أزرار الإعجاب الأفقية عندي هيا الأجمل..والأفضل..والأروع

    ردحذف
  3. اخي انا لدي منتدى على استضافه مجانيه من منتديات احلى منتدى و مواضيعكم تعجبني لكن لا اعلم اين تتم اضافة الاكواد في ورقة css او هتمل او جافا سكريبت فارجوك وضح لنا و انا من متابعيكم .... رابط المنتدى الخاص بي http://islam22.forumarabia.com/

    ردحذف
  4. السلام عليكم أختي العزيزة / هل يمكن معرفة فقط سكربت ايقونة الفيس بوك "اعجبني" مع العداد, لأنها تختلف عن الأيقونةالتي تم في بداية الموضوع.

    ردحذف
  5. سكربت ايقونة الفيس بوك "اعجبني" مع العداد
    يمكن متابعة هذا الموضوع
    http://conda3ianllkhir.blogspot.com/2012/02/like-boxlike.html

    ردحذف
  6. ابداع ولكي جزيل الشكر

    ردحذف
  7. ارجوك يا اخي اريد كود صفحتك الجانبية فيس بوك وتويتر وجوجل بلس على اليسار مثل ما انت مركبة في موقعك ارجوك بحثت كثير ولم اجد الكود من اليسار فقط من اليمين ايميلي iq.nabeel@gmail.com

    ردحذف
  8. kemal
    شكرا لمرورك
    العراق
    الإضافة على هذا الرابط
    http://conda3ianllkhir.blogspot.com/2012/05/4-1.html
    شكرا لمرورك

    ردحذف
  9. ممكن طريقة لا ضافة صفحة الفيس بوك للمدونة من اسفل لا اعلي كما فى الصورة

    http://www10.0zz0.com/2012/11/17/19/673493217.png

    ردحذف
  10. مبدعة يادكتورة جزاكِ الله خير
    الإضافات الأفقية لكل موضوع على حده جميلة جدا

    ردحذف
  11. شكرااا لك

    معهد أرباحي

    www.arba7i.com

    ردحذف
  12. أزال المؤلف هذا التعليق.

    ردحذف
  13. السلام عليكم ...
    جربت و نجحت بارك الله فيكم

    ردحذف
  14. جهد رائع و إضافات أروع تشكرين عليها

    http://arabe-tutorial.blogspot.com/

    ردحذف
  15. تمااااااااام إضافه جميله لكن انا عايز اخلي الأزرار دي لفوق شويه علشان الأزرار مغطيه ع زر الصعود لأعلي
    يا ريت الحل
    دي مدونتي http://brmgny4okrn.blogspot.com/

    ردحذف
  16. تم حل المشكله
    الف شكر

    ردحذف
  17. اخي من فضلك انا مبتدا واريد اضافة تعليقات الفايسبوك في موقعي

    ردحذف
  18. شكرا عل الاضافة
    تمت بنجاح http://tech-19.blogspot.com/

    ردحذف
  19. السلام عليكم ورحمة الله وبركاته
    بصراحة ربنا يجزيكي خير في الدنيا والاخرة
    حقيقي انا كنت محتار علشان اضيف الازرار دي وانا قرات مواضيع جميلة ومفيدة في مدونتك من قبل وارجو ان تقبليني احد اعضاء المدونة ربنا يجزيكي خيرا
    مدونة "شباب العرب"
    goldsboy33.blogspot.com

    ردحذف
  20. السلام عليكم .. مشكورين على هذه المجهودات .. بس بالله يا حضرة المهندس لو سمحت اين تتم اضافة هذه الاكواد .. يعني اين اجد css وكيف يتم عرضها واين بالضبط تتم لصق هذه الاكواد ثم كيف نعمل تخزين لها ورن .. انا لدي مجموعة في الفيس واريد ان اعرض صور الاعضاء المتواجدين حاليا بحيث تكون في اعلى الصفحة افقيا .. الرجاء توضيح ذلك لي وجزاك الله كل خير وهذه عنوان المجموعة .. https://www.facebook.com/profile.php?id=1469617609926437&ref=ts&fref=ts

    ردحذف
  21. @ hesham hussin
    هذه الأكواد خاصة بصفحات الويب أى المواقع والمدونات وليس لمجموعات الفيس بوك
    شكرا لمتابعتك

    ردحذف
  22. شكرا جزيلا على المجهودات و على هذه الإضافات جزاكم الله خيرا

    ردحذف
  23. يا أخى أنا أريد وضعها على اليمين التى تكون عائمة

    ردحذف
  24. بارك الله فيك . استفدت الكثير من هذا الموضوع . شكرا لمجهوداتك .
    جزاك الله خيرا

    ردحذف
  25. عفوا لا تظهر عندي --- تبقل مروري---- ما الحل

    ردحذف
  26. شكرا لمجهودك الرائع
    http://kitabilakom.blogspot.com/

    ردحذف
  27. يعطيك العافية أخي .. ممكن ازرار الاعجاب الموجودة على موقعك حاليا ..

    صراحة انا تعبت وانا بدور على هادي الازرار ومش ملاقيها ..

    تفضل بزيارة مدونتي ..
    palestine-mix.blogspot.com

    ردحذف
  28. أشكركم جميعًا على متابعتكم القيمة وأتمنى لكم التوفيق

    @ Palestinian فلسطيني
    هذه الأزرار بالفعل من موقع Add this الموجود بالموضوع

    ردحذف
  29. جزاك الله خير استفدت كثير من مواضيعك الرائعة في تطوير مدونتي ربنا يعلي مراتبك .



    لنك مدونتي فضلا زوروني و اعطوني ارائكم في مواضيعي:
    metehnopc.blogspot.com

    ردحذف
  30. @محمد الامين للتكنلوجيا
    شكرا جزيلا...أتمنى لكم التوفيق

    ردحذف
  31. بارك الله فيك على المجهود الطيب

    ردحذف
  32. يعطيك العافية أخي

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

    ردحذف
    الردود
    1. لكى يعمل الكود بشكل جيد يفضل تسجيل حساب فى موقع http://www.addthis.com/
      واختيار الاضافة المناسبة لك ونسخ الكود الخاص بحسابك

      حذف
    2. شكرااا سأحاول من جديد

      حذف
  34. عفوا( خارج الموضوع) .. لي رجاء خاص "Dr. R.O" أرجوا أن تفيديني عن التخصص العلمي لحضرتك، وهل يمكن للشخص احتراف التعامل مع برمجيات صناعة الانفوجرافيك، وتحديثات مدونات بلوجر ووردبريس دون أن تكون له تخصص علمي يدعمه، أنا من ليبيا وأود أن استعين بمحترف يقوم بتدريبي لكن لم أعرف إلي من أتوجه بطلبي مع العلم أن تخصصي مقارب للمجال . شكرا مقدما.

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

      حذف
  35. مدونتي متخصصة في تربية النحل و النباتات الطبية
    هل هذا مخالف لشروط ادسنس
    http://gamal3ok.blogspot.com.eg/

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

      حذف
  36. اختي شكرا علي مجهودك الرائع
    جربت اكواد ازرار اللايك بس بيطلب confirm عشان يعمل لايك عكس الازرار الراسيةالموجوده علي موقعك الان
    ممكن اكواد الازارا التي تستخدميها
    like
    share
    tweet
    G+1
    +share add

    ردحذف
  37. جزاكِ الله خيرا على مجهودك الرائع
    بس أنا عندى مشكلة وهى أشبه السهل الممتنع وهى انى أضفت كود الشكل الأخير ولكنه لم يظهر فى المدونة مكتملاً بل ظهر بدون زر اعجاب الفيس بوك والارسال , بعد كده حاولت اضيفهم بطرق تانية كثيرة وكان احيانا يظهروا ويرجعوا يختفوا تانى بدون تدخل منى وعلى فكرة أنا ماعرفتش اسجل ازاى فى add this ويا ريت تساعدينى فى حل مشكلة زر الاعجاب والارسال دى بسرعة لانى بجد تعبت منها قوى ودا رابط مدونتى http://www.e5rakat.blogspot.com بارك الله فيكِِ

    ردحذف
    الردود
    1. ممكن تكون المشكلة فى عدم تحميل زر الاعجاب المتصفح ويمكن اختبار ذلك بالتجربة على متصفح اخر ويفضل التسجيل بحساب خاص بك لتظهر الازرار بشكل سليم

      حذف
  38. يعطيكي العافية موضوع جميل

    ردحذف
  39. شكرا اخي موقعك جميل واتمني ان تلقي نظره علي موقعي ايضا https://seha-tk.blogspot.com

    ردحذف

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

Privacy-Policy | إعلن لدينا
جميع الحقوق محفوظة لــ كن داعيا للخير 2011-2022 ©

تصميم كن مدون