كيفية اضافة ادوات الاشهار جوجل وفيس بوك وتويتر علي بلوجر بشكل اجمل

بسم الله الرحمن الرحيم نتطرق اليوم الي شرح كيفية اضافة ادوات نشر المواضيع علي صفحات التواصل الاجتماعي فيس بوك وتويتر وجوجل وهذه الادوات تساعد مدونتك علي ارشفة تدويناتك بالطرق السريعة ونشرها علي الانترنت في اسرع وقت ونشرها علي مواقع التواصل الاجتماعي facebook , twitter , google وايضا تقيم مواضيعك علي انها الافضل كلما شارك شخص ما

علي الموضوع الذي قرائه اصبح الموضوع اكثر شهرة ويفهرس بسرعة ويصبح موقعك او مدونتك من اوائل نتائج محركات البحث العربية والعالمية وشهرة تلك المواقع الاجتماعية قبل مدة لاتقل عن سنتين او اكثر كانت تعتبر من المواقع المحظور تداولها في المواقع الحكومية

والشركات اصبحت الان من الركائز المهمة للتواصل مع المواطنين بتلك الجهات الحكومية والشركات وخصوصا بعد جميع الثورات في الربيع العربي ونتابع كيفية اضافة ادوات التواصل الاجتماعي بطريقة مثالية وسهله للغاية

من لوحة التحكم بالمدونة نضغط علي قالب

ثم تحرير html ثم متابعة

ثم نضغط علي مربع توسيع قوالب عناصر واجهة المستخدم

ثم نبحث عن الكود التالي  من خلال الضغط علي  ctrl f ستجد اكثر من كود مشابه اختر الكود الثاني

<data:post.body/>

واضف الكود اتالي اسفله مباشرة

<b:if cond='data:blog.pageType == "item"'>

<style>

.promote_post_bg {

    height: 103px;

    background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjqPcxI6gQ458yon768SDKVWmPvy28YVteEIK1zbDfpqvI5mmc_1iRZ4TUS1KjAiVHj8ufBrAZkXCYB-Q8lFUumyoY-W7i9Wj82R_l_7wkIuFocOP8KU8HaeWc7TY-W4qtyYf88ckSouZQ/s400/%D8%A7%D8%AF%D9%88%D8%A7%D8%AA+%D8%A7%D9%84%D8%AA%D9%88%D8%A7%D8%B5%D9%84+%D8%A7%D9%84%D8%A7%D8%AC%D8%AA%D9%85%D8%A7%D8%B9%D9%8A+%D9%81%D9%8A%D8%B3+%D8%A8%D9%88%D9%83+%D9%88%D8%AA%D9%88%D9%8A%D8%AA%D8%B1+%D9%88%D8%AC%D9%88%D8%AC%D9%84.png) 0 -7px no-repeat;

    width: 500px;

    margin-left: 65px;

}

.promote_twitter {

    width: 130px;

    height: 38px;

    float: left;

    margin: 0 39px 0 0;

    padding: 65px 0 0 13px;

    text-align: center;

}

.promote_facebook {

    width: 115px;

    height: 40px;

    float: left;

    margin: 0 39px 0 0;

    padding: 63px 0 0 28px;

    text-align: center;

}

.promote_google {

    width: 65px;

    height: 40px;

    float: left;

    margin: 0 39px 0 0;

    padding: 65px 0 0 28px;

    text-align: center;

}

</style>

    <div class='promote_post_bg'>

        <div class='promote_twitter'>

            <a class='twitter-share-button' data-via='alyomtop' href='https://twitter.com/share'>Tweet</a>

            <script>

                !

                function (d, s, id) {

                    var js, fjs = d.getElementsByTagName(s)[0];

                    if (!d.getElementById(id)) {

                        js = d.createElement(s);

                        js.id = id;

                        js.src = "//platform.twitter.com/widgets.js";

                        fjs.parentNode.insertBefore(js, fjs);

                    }

                }(document, "script", "twitter-wjs");

            </script>

        </div>

        <div class='promote_facebook'>

            <div>

                <b:if cond='data:post.isFirstPost'>

                    <script>

                        (function (d) {

                            var js, id = 'facebook-jssdk';

                            if (d.getElementById(id)) {

                                return;

                            }

                            js = d.createElement('script');

                            js.id = id;

                            js.async = true;

                            js.src = "//connect.facebook.net/en_US/all.js#xfbml=1";

                            d.getElementsByTagName('head')[0].appendChild(js);

                        }(document));

                    </script>

                </b:if>

                <fb:like expr:href="data:post.canonicalUrl" layout='button_count' send='false'

                show_faces='false' font="verdana" action="like" colorscheme="light"></fb:like>

            </div>

        </div>

        <div class='promote_google'>

            <script type='text/javascript'>

                (function () {

                    var po = document.createElement('script');

                    po.type = 'text/javascript';

                    po.async = true;

                    po.src = 'https://apis.google.com/js/plusone.js';

                    var s = document.getElementsByTagName('script')[0];

                    s.parentNode.insertBefore(po, s);

                })();

            </script>

            <g:plusone annotation="none" size='medium'></g:plusone>

        </div>

    </div>

<p style="display:none;"> Sharing Widget by<a href="http://alyomtop.blogspot.com/">alyomtop</a></p>

</b:if>

وقم بتغيير  الكلمة الملونة باللون الاحمر وهو حسابك في تويتر فقط ولا تغيير اي شيئ اخر

------------------------

اضافة صندوق معجبي تويتر twitter في المدونة بلوجر

لاضافة صندوق معجبي تويتر twitter وهو نسخة طبق الاصل من صندوق معجبي الفيس بوك وتساعد ايضا علي اشهار وارشفة مدونتك بسرعة من لوحة التحكم بالمدونة نضغط علي التخطيط ثم اضافة اداة html ونضع الكود التالي

<div class="textwidget">

<script type="text/javascript" src="http://s.moopz.com/fanbox_init.js"></script><div id="twitterfanbox">

<script type="text/javascript">fanbox_init("إسم صفحتك علي تويتر");</script></div>

</div>

<style>

.FB_SERVER_IFRAME {

width: 245px !important; /* عرض الإضافة*/

height: 235px !important; /* إرتفاع الإضافة*/

}

</style>

نقوم بوضع اسم صفحتك بالكود مكان الكلمات المظللة باللون الاحمر

--------------------------

اضف صندوق facebook و twitter بطريقة منزلقة في بلوجر

كثرة طرق اضافات المواقع الاجتماعية الـــ Facebook و twitter في المدونات بلوجر ونظرا لذلك اضفنا لكم طريقة دمج الفيس بوك وتويتر بطريق منزلقة في اضافة واحدة لعدم اخذ مساحة كبيرة في المدونات بلوجر وعندما تضع السهم علي صندوق الفيس بوك سيظهر بفرده وايضا علي صندوق تويتر وتعتبر من الادوات المشهورة علي اغلب الموقع لانها تظهر بطريقة انسيابية

من لوحة التحكم بمدونتك اختر قالب ثم تحرير html ومتابعة ثم نضغط علي توسيع عناصر واجهة المستخدم

وابحث عن الكود التالي 

</head>

واضف قبله الكود التالي اذا لم يوجد ان وجدته لا تضف هذا الكود

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>

وبعد ذلك نذهب الي التخطيط ثم اضافة اداة html واضف الكود التالي مع التعديل

<link rel="stylesheet" type="text/css" href="http://latesthack.googlecode.com/svn/mywidgets/3in1/3.css" /><script src='http://latesthack.googlecode.com/svn/mywidgets/2in1/twitter.js'></script><script src="http://googleplus-activity-widget.googlecode.com/files/jquery.googleplus-activity-1.0.min.js"></script>
<script type="text/javascript">
 //<![CDATA[
   jQuery(document).ready(function($) {
      $('#gpaw').googlePlusActivity({
         api_key : 'AIzaSyDsd2KGlVuN5dEwas5G3TsOVX17oRCCTFM'          ,user:''          ,image_width:75          ,image_height:75          ,body_height:230       });    }); //]]> </script> <script type="text/javascript"> jQuery(document).ready(function(){  jQuery("#facebook_right").hover(function(){   jQuery(this).stop(true,false).animate({right:  0}, 600); },function(){ jQuery("#facebook_right").stop(true,false).animate({right: -240}, 600); });    jQuery("#twitter_right").hover(function(){ jQuery(this).stop(true,false).animate({right:  0}, 500); },function(){ jQuery("#twitter_right").stop(true,false).animate({right: -240}, 500); });     jQuery("#google_plus_right").hover(function(){ jQuery(this).stop(true,false).animate({right:  0}, 500); },function(){ jQuery("#google_plus_right").stop(true,false).animate({right: -280}, 500); });  }); </script><p style="display:none;"> 3 in 1 social sharing by<a href="http://www.latesthack.com">Latest Hack</a></p> <div id="on"> <div id="facebook_right" style="top: 10%;"> <div id="facebook_div"> <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEibYDujEe-0XPfZivr6u23d1WUc4n8JYUG5oHJb6CwmtmF5b4r5dDRnha606FmafoXdIAcWzxwnBaCtYK2Sh5RzdHBMc8qItglXyviw8L8bXK7ZV85790WwdOSLbeMZkPwwq9PG0EJaTkQ/s1600/facebook.chamelcool.blogspot.com.png" alt="" /> <iframe src="http://www.facebook.com/plugins/likebox.php?href=https%3A%2F%2Fwww.facebook.com%2Falyomtop&amp;locale=en_GB&amp;width=238&amp;connections=9&amp;stream=&amp;header=false&amp;show_faces=0&amp;height=256"   scrolling="no"> </iframe> </div></div></div><div id="on"><div id="twitter_right" style="top: 27%;"><div id="twitter_div"><img id="twitter_right_img" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiU7_siYkLzwZ-lynqi20aYlTF1vt_rhvhNjjetXti9urs0CL_iCmGHPzP-JI9Lx2DN2tEH7FB0_8NNFXu_eXMeFpMlF3hiSIFQpgrrF8oA1WgHP4SiKCseac_5IJOs00YguuEatNHPq0Y/s1600/twitter.chamelcool.blogspot.com.png" /><div id="twitterfanbox"></div><script type="text/javascript">fanbox_init("alyomtop");</script> </div></div></div><div id="on"><div id="google_plus_right" style="top: 44%;"><div style="float:left;margin:0px 0px 4px 4px;"><div id="gpaw">  </div></div></div></div>

قم بتغيير كلمة alyomtop الاولي باسم صفحتك علي الفيس بوك

وقم بتغيير كلمة alyomtop الثانية باسم حسابك علي تويتر

ثم قم بحفظ الاداة

------------------------------

اضافة ازرار المفضلات الاجتماعية لاشهار مواضيع المدونة بلوجر بأشكل مختلفة

تعتبر ازرار المفضلات الاجتماعية عامل مهم من عوامل نشر واشهار مواضيع مدونتك في جميع المواقع الاجنبية والعربية منها facebook - twitter - google plus - share ولانها تساعد في ارشفة وفهرسة مدونتك بسرعة والحصول علي مزيد من backlincks للمدونة ونتعرف علي كيفية اضافتها اسفل الموضوع بكل سهولة وبساطة واضفت لكم اشكل مختلفة حسب طلب زوار مدونة alyomtop 

من لوحة التحكم بالمدونة نضغط علي القالب ثم تحرير html ومتابعة ثم ضع علامة علي توسيع عناصر واجهة المستخدم 

وابحث عن الكود التالي 

<data:post.body/>

واضف اسفله الكود الذي تختاره وتفضله 

<!-- 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_google_plusone" g:plusone:size="medium"></a>

<a class="addthis_counter addthis_pill_style"></a>

</div>

<script type="text/javascript" src="http://s7.addthis.com/js/250/addthis_widget.js#pubid=ra-4fbe698e42cb9186"></script>

<!-- AddThis Button END -->

---------------------------------------

<!-- 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-4fbe698e42cb9186"></script>

<!-- AddThis Button END -->

---------------------------------------

<!-- AddThis Button BEGIN -->

<a class="addthis_button" href="http://www.addthis.com/bookmark.php?v=250&amp;pubid=ra-4fbe698e42cb9186"><img src="http://s7.addthis.com/static/btn/v2/lg-share-en.gif" width="125" height="16" alt="Bookmark and Share" style="border:0"/></a>

<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-4fbe698e42cb9186"></script>

<!-- AddThis Button END -->

وبعد اضافة الكود الذي تفضله اضغط علي حفظ القالب

------------------------------

اضافة اداة المشاركة علي المواقع الاجتماعية بتقنية CSS للمدونة بلوجر

نتحدث في هذه الايام عن طرق جديدة لاضافة الادوات بأشكال جميلة وجذابة ومتحركة في نفس الوقت واليكم اضافة متميزة كود اداة المشاركة علي المواقع الاجتماعية بصورة متحركة بتقنية CSS نذهب الي لوحة التحكم بمدونتك 

ثم نختار القالب ثم تحرير HTML ثم متابعة ونضع علامة علي توسيع عناصر واجهة المستخدم

نبحث عن الكود التالي من خلال الضغط علي  Ctrl+f

<data:post.body/>

وبعد ذلك نضف الكود التالي اسفل الكود السابق

<style>

 /*- Sharing Widget -*/

.flipper a {

display:block;

height:48px;

width:48px;

padding:0 4px;

float:left;

background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjQUHSPOdVjKt4Ggona24M0T_X4_tk338ybwFC584hvPL9zG-e7K56YH2-prvTWe4CK-ntCo4iOtmJ-UOmL9rYNrVQP6TmhB-aDlhS5_tA9y1WyoAOsfJ7PhvOXDjZp4dT-0jqxSIkzkUVm/s1600/flipper.png) no-repeat;

-webkit-transition: ease-in 0.15s all; 

-moz-transition: ease-in 0.15s all; 

-o-transition: ease-in 0.15s all; 

-ms-transition: ease-in 0.15s all; 

transition: ease-in 0.15s all;

cursor:pointer;

}

.flipper a.googleplus {

background-position: 0px -348px;

}

.flipper a.googleplus:hover {

background-position: 0px -406px;

}

.flipper a.pinterest {

background-position: 0px -464px;

}

.flipper a.pinterest:hover {

background-position: 0px -522px;

}

.flipper a.delicious {

background-position: 0px 0px;

}

.flipper a.delicious:hover {

background-position: 0px -58px;

}

.flipper a.digg {

background-position: 0px -116px;

}

.flipper a.digg:hover {

background-position: 0px -174px;

}

.flipper a.stumbleupon {

background-position: 0px -812px;

}

.flipper a.stumbleupon:hover {

background-position: 0px -870px;

}

.flipper a.technorati {

background-position: 0px -928px;

}

.flipper a.technorati:hover {

background-position: 0px -406px;

}

.flipper a.twitter {

background-position: 0px -928px;

}

.flipper a.twitter:hover {

background-position: 0px -986px;

}

.flipper a.facebook {

background-position: 0px -232px;

}

.flipper a.facebook:hover {

background-position: 0px -290px;

}

.flipper a.reddit {

background-position: 0px -580px;

}

.flipper a.reddit:hover {

background-position: 0px -638px;

}

.flipper a.rss {

background-position: 0px -696px;

}

.flipper a.rss:hover {

background-position: 0px -754px;

}

.Pleaseshare{

margin:10px 0px;

color:#333333;

font-weight:bold;

font-size:20px;

font-family:sans-serif;

}

</style>

<div class='flipper'>

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

<div class="Pleaseshare">

أعجبك الموضوع ؟ اذن شاركه على :

</div>

<!--Google Plus-->

<a class='googleplus' href="http://plus.google.com/" rel='external nofollow' target='_blank' title='+1 it :&gt;'/>

<!--Facebook-->

<a class='facebook' expr:href='&quot;http://www.facebook.com/sharer.php?u=&quot; + data:post.url + &quot;&amp;t=&quot; + data:post.title' rel='external nofollow' target='_blank' title='شاركه على  Facebook :&gt;'/>

<!-- Twitter -->

<a class='twitter' expr:href='&quot;http://twitthis.com/twit?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='external nofollow' target='_blank' title='أنشره على   Twitter  :&gt;'/>

<!-- Pinterest -->

<a class='pinterest'  href="http://pinterest.com/" rel='external nofollow' target='_blank' title='أنشره على  pinterest :&gt;'/>

<!-- Delicious -->

<a class='delicious' expr:href='&quot;http://del.icio.us/post?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='external nofollow' target='_blank' title='أضفه الى  Delicious :&gt;'/>

<!--DIGG-->

<a class='digg' expr:href='&quot;http://digg.com/submit?phase=2&amp;url=&quot;  + data:post.url' rel='external nofollow' target='_blank' title=' أضفه الى  Digg  :&gt;'/>

<!--Stumble-->

<a class='stumbleupon' expr:href='&quot;http://www.stumbleupon.com/submit?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='external nofollow' target='_blank' title=' أضفه الى  Stumble :&gt;'/>

<!-- Reddit -->

<a class='reddit' expr:href='&quot;http://reddit.com/submit?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='external nofollow' target='_blank' title='أضفه الى  Reddit :&gt;'/>

<!--RSS -->

<a class='rss' expr:href='data:blog.homepageUrl + &quot;feeds/posts/default&quot;' title='Bookmark plz :&gt;'/>

</b:if></div>

<div style="clear:both"/>

وان كنت تريد حذف ايقونة من مواقع النشر الاجتماعية مثلا twitter 

فقط قم بحذف الكود الموقع التالي مثل

<!-- Twitter -->

<a class='twitter' expr:href='&quot;http://twitthis.com/twit?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='external nofollow' target='_blank' title='أنشره على   Twitter  :&gt;'/>

ثم قم بحفظ القالب  لتظهر هكذا

أعجبك الموضوع ؟ اذن شاركه على :

----------------------------

اضف زر تابعني علي تويتر twitter بالمدونات بلوجر

اصبح الان موقع تويتر من الشبكات الاجتماعية المشهورة والتي لها معجبين كثيرين علي مستوي العالم الاجنبي والعربي وتعتبر من مصادر اشهار مدونتك وزيادة عدد زوارك واضافت تويتر twitter زر تابعني علي تويتر جديد يعرض به اسم حسابك وعدد المتابعين 

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

ندخل الي لوحة التحكم بمدونتك ثم نختار قالب ثم تحرير HTML اذا اردت ان تضع الزر فوق التدوينة

ابحث عن الكود التالي

<div class='post-header-line-1'/>

ثم ضع الكود الاتي اسفل الكود السابق

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

<a Width='600px' class='twitter-follow-button' data-align='right' data-button='grey' data-lang='en' data-link-color='#EB4C07' data-show-count='true' data-text-color='#000000' href='http://twitter.com/alyomtop'>تابعني على التويتر</a>

<script src='http://platform.twitter.com/widgets.js' type='text/javascript'/>

</b:if>

ثم وضع اسم حسابك علي تويتر مكان اسم حساب الملون باللون الاحمر


واذا اردت وضع الزر اسفل كل تدوينة

ابحث عن الكود التالي وضع الكود السابق اسفل الكود التالي

<data:post.body/>

ثم اضغط علي حفظ القالب

ولمشاهدة الزر قم بالضغط عليه

تابعني على التويتر

-------------------------------

اضافة زر اعجبني الفيس بوك الي المدونات بلوجر لضمان فهرسة اسرع واشهار مدونتك

زر الاعجاب الفيس بوك من الاضافات المهمة لمدونتك فانها تجلب عدد كثير من الزوار فكلما اعجب الموضوع شخصا ما ستنشر التدوينة الخاصة بمدونتك علي صفحته الشخصية وتضمن ارشفة واشهار بالطريقة الاسرع فنظرا للتحديثات الذي يجريها الفيس بوك فقد قمنا بعرض لكم التحديثات علي مدونتنا alyomtop وسنشرح كيف تضيف زر الاعجاب الخاص بالفيس بوك لتدويناتك

من لوحة التحكم بمدونتك ادخل علي قالب ثم تحرير html 

ابحث عن الكود الاتي

<div class='post-header-line-1'/>او<data:post.body/>

وضع الكود الاتي باعلي الكود السابق لوضع الزر او الموضوع او ضعه اسفل الكود لوضع الزر اخر الموضوع

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

<iframe allowTransparency='true' expr:src='&quot;http://www.facebook.com/plugins/like.php?href=&quot; + data:post.url + &quot;&amp;layout=standard&amp;show_faces=false&amp;width=100&amp;action=like&amp;font=tahoma&amp;colorscheme=light&quot;' frameborder='0' scrolling='no' style='border:none; overflow:hidden; width:450px; height:40px;'/>

</b:if>

واضف الزر الذي تفضله من خلال استبدال كلمة standard المظللة باللون الاحمر الي كلمة الاشكال التي امامكم والتي تريدون اضافتها

box_count

button_count

standard

-------------------------------------

تحديثات الفيس بوك طريقة جديدة لاضافة صندوق معجبين صفحة مدونتك علي الفيس بوك facebook بالطريقة الاكثر سهولة

منذ مدة تعتبر قصير قام الفيس بوك بتحديثات موقعه وقمنا باضافة تلك التحديثات بالمدونة لتوصيل اليكم المعلومة الصحيحة  الي ابسط الحدود والكثير من اصحاب المدونات من يرغب بالبساطة في تنسيق المدونة الخاصة به واردت ان اضيف لكم طريقة اضافة صندوق معجبي صفحتك علي الفيس بوك facebook بالطريقة العادية والاكثر سهولة والاحدث في عالم facebook وتعتبر الشبكات الاجتماعية من المواقع التي تزيد وترفع البيج رانك لمدونتك واشهارها 

اولا ندخل علي الرابط التالي 

https://www.facebook.com/pages/create.php

ثم نضغط علي Brand or Product وباللغة العربية علامة تجارية او منتج

اخنر الفئة اختر موقع الكتروني ثم اكتب عنوان موقعك وضع علامة علي I agree to شروط صفحات الفيس بوك ثم نضغط علي Get Started باللغة العربية الشروع في العمل

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

https://developers.facebook.com/docs/reference/plugins/like-box/

امسح الرابط الموجود بـــ facebook page url والصق مكانه الرابط الذي نسخته سابقا

وبعد ذلك عدل كما تفضل ثم اضغط علي Get Code ثم انسخ الكود بتقنيةiframe والصقة بالمكان الذي تريده بمدونتك توجه الي التخطيط ثم اضافة اداة html ثم الصق الكود الذي نسخته وقم بحفظ الاداة 

----------------------------------

اضافة صندوق معجبي Facebook الفيس بوك بمدونتك عن طريق JQUERY بطرقة اكثر جمالا واحترافية

الكثير من اصحاب المدونات بلوجر من يريدون اضافة ادوات الموقع الاشهر في العالم الفيس بوك facebook مثل صندوق الاعجاب  like box بصفحة مدونتك علي facebook ولكن قبل انشاء صندوق التعليقات لابد من انشاء تطبيق علي الفيس بوك ولان المواقع الاجتماعية تساهم في نشر واشهار مدونتك وجلب الكثير من الزوار سنشرح لكم طريقة اضافة صندوق معجبي like box الفيس بوك عن طريق JQUERY الا وهي بشكل اجمل واحترافي من الطريقة العادية 

من لوحة تحكم بمدونتك نضغط علي قوالب ثم تحرير html ثم اخذ نسخة من قالبك لتجنب حدوث خطأ ما 

ثم ابحث عن الكود الاتي

</head>

وضع قبل الكود السابق الكود التالي

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js" type="text/javascript"></script>

ثم قم بحفظ القالب واذهب الي التخطيط ثم اضافة اداة html واضف الكود الاتي

<script type="text/javascript">
//<!--
$(document).ready(function() {$(".w2bslikebox").hover(function() {$(this).stop().animate({right: "0"}, "medium");}, function() {$(this).stop().animate({right: "-250"}, "medium");}, 500);});
//-->
</script>
<style type="text/css">
.w2bslikebox{background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjoBjd69sBBleEMvrsDUZH5UTMnPBJ9obwVAMVHUEhMzFcOl9eXmeF5uXHfd1mmYCmCnCbRAaWd3Tz_s5wD1iytwem6NpC-PBbHI3r_0rv-f3yiY8dMOMgTSD_B8Z1g7iLALspVBul8dn6L/s150/w2b_facebookbadge.pn") no-repeat scroll left center transparent !important;display: block;float: right;height: 270px;padding: 0 5px 0 46px;width: 245px;z-index: 99999;position:fixed;right:-250px;top:20%;}
.w2bslikebox div{border:none;position:relative;display:block;}
.w2bslikebox span{bottom: 12px;font: 8px "lucida grande",tahoma,verdana,arial,sans-serif;position: absolute;right: 6px;text-align: right;z-index: 99999;}
.w2bslikebox span a{color: #808080;text-decoration:none;}
.w2bslikebox span a:hover{text-decoration:underline;}
</style><div class="w2bslikebox" style=""><div><iframe src="http://www.facebook.com/plugins/likebox.php?href=اضف رابط صفحة مدونتك علي الفيس بوك&amp;width=245&amp;colorscheme=light&amp;show_faces=true&amp;connections=9&amp;stream=false&amp;header=false&amp;height=270" scrolling="no" frameborder="0" scrolling="no" style="border: medium none; overflow: hidden; height: 270px; width: 245px;background:#fff;"></iframe></div></div>

ثم قم بإضافة رابط صفحة مدونتك علي الفيس بوك التي باللون الاحمر في الكود السابق

مثل هذا http://www.facebook.com/Alyomtop

 او اضافته بالطريقة الحديثة

---------------------------

انشاء تطبيق علي facebook واضافة صندوق تعليقات الفيس بوك

ساشرح لكم اليوم اضافات الفيس بوك الا وهي انشاء تطبيق علي facebook لانه لن تعمل اي اضافة للفيس بوك علي موقعك او مدونتك إلا بإنشاء هذا التطبيق اولا نذهب الي الرابط التالي 

https://developers.facebook.com/apps

ثم تحرير html نقوم بتوسع قوالب عناصر واجهة المستخدم 
ثم ابحث عن الكود الاتي 

 <html

ثم ضع الكود التالي بجوارة الكود السابق مبشرة

xmlns:fb='http://www.facebook.com/2008/fbml'

ليبدو كالاتي

<html xmlns:fb='http://www.facebook.com/2008/fbml'  expr:dir='data:blog.............2005/gml/expr'  >

وابحث عن الكود الاتي

<body>

واضف الكود الاتي اسفله مباشرة بعد التعديل عليه

<div id="fb-root"></div>

<script>

    window.fbAsyncInit = function() {

    FB.init({

      appId  : 'اضف ID الذي نسخته',

      status : true, // check login status

        cookie : true, // enable cookies to allow the server to access the   session

      xfbml  : true  // parse XFBML

    });

  };

    (function() {

    var e = document.createElement('script');

      e.src = document.location.protocol +   '//connect.facebook.net/en_US/all.js';

    e.async = true;

      document.getElementById('fb-root').appendChild(e);

    }());

</script>

اضف كود اي دي ID الذي نسخته بدل الكلمات المظلله باللون الاحمر في الكود السابق

ثم بعد ذلك قم بفتح مفكرة الكميوتر وضع بها الكود التالي لاننا سنقوم ببعض التعديلات 

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

<meta   expr:content='data:blog.pageTitle' property='og:title'/>

<meta   expr:content='data:blog.url' property='og:url'/>

<b:else/>

<meta   expr:content='data:blog.title' property='og:title'/>

<meta   expr:content='data:blog.homepageUrl' property='og:url'/>

</b:if>

<meta   content='اسم المدونة' property='og:site_name'/>

<meta   content='https://fbcdn-profile-a.akamaihd.net/hprofile-ak-ash2/49293_100000602005289_4959748_q.jpg'   property='og:image'/>

<meta content='اضف ID الذي نسخته من قبل'   property='fb:app_id'/>

<meta content='اضف ID الخاص ببروفايلك علي الفيس بوك'   property='fb:admins'/>

<meta content='article'   property='og:type'/>

واليك التعديلات 

لاسبدال صورة الشعار قم بتغيير رابط الصورة الاتي وضع رابط صورتك وتكون صورة صغيرة 

https://fbcdn-profile-a.akamaihd.net/hprofile-ak-ash2/49293_100000602005289_4959748_q.jpg

ولمعرفة ID الخاص ببروفيلك علي الفيس بوك ادخل علي الرابط الاتي 

https://graph.facebook.com/YourProfile

وقم بتغيير كلمة your profile باسم حسابك علي الفيس بوك مثل هذا 

https://graph.facebook.com/shweepshatem

ستجد اعلي الصفحة ID الخاص ببروفيلك 

وبعد انهاء التعديلات المطلوبة نذهب الي قالب ثم تحرير html ثم ضع علامة علي توسيع القالب عناصر واجهة المستخدم

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

</head>

واضف قبله الكود السابق الذي قمنا بتعديلة ثم قم بحفظ القالب وتم انشاء تطبيق facebook صفحتك

ولانشاء صندوق تعليقات الفيس بوك ابحث عن الكود التالي قم بتوسيع القالب مرة اخري

<data:post.body/>

واضف اسفله الكود الاتي 

<b:if cond='data:blog.pageType == &quot;item&quot;'>  <script src='http://connect.facebook.net/ar_AR/all.js#xfbml=1'/>  <div><script src='http://connect.facebook.net/ar_AR/all.js#xfbml=1'/> <fb:comments migrated='1' expr:href='data:post.url'  expr:title='data:post.title' expr:xid='data:post.id' width='450'/>  </div> </b:if>

ثم قم بحفظ القالب وتمت الاضافة بنجاح