5 الحل الامثل لاضافة نافذه منبثقه لتسجيل الاعجاب على الفيس بوك

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

السلام عليكم ورحمة الله وبركاته , اضافة اليوم كما هو واضح من العنوان تتيح لزوار مدونتك تسجيل الاعجاب والانضمام لصفحة مدونتك على موقع التواصل الاجتماعي فيس بوك , الاضافه على شكل صندوق صغير الحجم يظهر من خلال نافذه منبسقه لا تسبب اى ثقل في تصفح المدونه, ويظهر الصندوق كما هو الحال في هذا المثال الحى او من خلال الصوره المرفقه داخل التدوينه , مايميز تلك الاضافه هو خلوها من العيوب التي وجدت في مثيلاتها بالاضافه للشكل الجمالي الواضح فيها. عند ظهور النافذه المنبسقه تطالب الزائر بتجسل الاعجاب بصفحة مدونتك على الفيس بوك وبمجرد الضغط على زر اعجبني تختفي النافذه المنبسقه في الحال. او يستطيع الزائر ان لم يود الانضمام الي صفحتك ان يضغط على زر close الموجود في الاعلى علي يمين النافذه او الانتظار 30 ثانيه حتى تختفي النافذه من تلقاء نفسها . الاضافه مميزه بلا شك فهي تساعد اصحاب الصفحات ذات عدد المعجبين القليل من استدراج عدد اضافي بطريقه سريعه وتسهل علي من يود الانضمام الي صفحتك من زوار مدونتك الكسالى الذين يرغبون في الاستمتاع بالمعلومه دون تقديم اي دعم لك ولو بسيط على شكل الانضمام لصفحتك علي الفيس بوك . لتطبيق الاضافه سجل دخول الى لوحة تحكم بلوجر ثم اذهب الي تحرير HTML وابحث عن الوسم التالي </body> ثم ضع فوقه مباشرة الكود الموجود في الاسفل

.............................................

<script type='text/javascript'>
//<![CDATA[
KNFBFansPRO='معلومة دليفرى'

//]]>
</script>
<style>#fblikepop{background-color:#fff;display:none;position:fixed;top:200px;_position:absolute; /* hack for IE 6*/width:450px;border:10px solid #6F6F6F;z-index:200;-moz-border-radius: 9px;-webkit-border-radius: 9px;margin:0pt;padding:0pt;color:#333333;text-align:left;font-family:arial,sans-serif;font-size:13px;}

#fblikepop body{background:#fff none repeat scroll 0%;line-height:1;margin:0pt;height:100%;}

.fbflush{cursor: pointer;font-size:11px !important;color:#FFF !important;text-decoration:none !important;border:0 !important;}

#fblikebg{display:none;position:fixed;_position:absolute; /* hack for IE 6*/height:100%;width:100%;top:0;left:0;background:#000000;z-index:100;}

#fblikepop #closeable{float:right;margin:7px 15px 0 0;}

#fblikepop h1{background:#6D84B4 none repeat scroll 0 0;border-top:1px solid #3B5998;border-left:1px solid #3B5998;border-right:1px solid #3B5998;color:#FFFFFF !important;font-size:18px !important;font-weight:normal !important;padding:5px !important;margin:0 !important;font-family:&quot;Lucida Sans Unicode&quot;, &quot;Lucida Grande&quot;, sans-serif !important;}

#fblikepop #actionHolder{height:30px;overflow:hidden;}

#fblikepop #buttonArea{background:#F2F2F2;border-top:1px solid #CCCCCC;padding:10px;min-height:50px;}

#fblikepop #buttonArea a{color:#999999 !important;text-decoration:none !important;border:0 !important;font-size:10px !important;}

#fblikepop #buttonArea a:hover{color:#333 !important;text-decoration:none !important;border:0 !important;}

#fblikepop #popupMessage{font-size:12px !important;font-weight:normal !important;line-height:22px;padding:8px;background:#fff !important;}

#fblikepop #counter-display{float:right;font-size:11px !important;font-weight:normal !important;margin:5px 0 0 0;text-align:right;line-height:16px;}</style>

<script src='http://connect.facebook.net/ar_AR/all.js#xfbml=1' type='text/javascript'/>

<script src='https://my-tqarob.googlecode.com/svn/trunk/likebox2.js' type='text/javascript'/>

<script language='javascript'>
//<![CDATA[
$(document).ready(function(){
$().KNFBFansPRO({
timeout: 30,
wait: 0,
url: 'http://www.facebook.com/m3lomadelivery',
closeable: true });
});
//]]>
</script>
<div id='fbtpdiv'/>

............................................................

لتخصيص الكود السابق بما يتناسب مع مدونتك ابحث فيه عن http://www.facebook.com/m3lomadelivery واستبدله برابط صفحة مدونتك على الفيس بوك . واخيرا ابحث عن  معلومة دليفرى  واستبدله باسم صفحتك . قم بعد ذلك بمعاينة المدونه ثم اضغط حفظ.  اى استفسار يرجا كتابته في الاسفل. بالتوفيق للجميع ان شاء الله ...

تابع القراءة

1 إضافة صندوق المعجبين الخاص بالفيسبوك على شكل نافذة منبثقة popup

إضافة صندوق المعجبين الخاص بالفيسبوك على شكل نافذة منبثقة popup

في درس اليوم سنشرح كيفية إضافة نافذة منبثقة

بها صندوق الإعجاب الخاص بصفحتك على الفيسبوك

حيث بمجرد دخول الزائر للمدونة ستظهر له هذه النافذة

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

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

نذهب إلى تصميم |عناصر الصفحة| إضافة أداة HTML javascript

نلصق الكود التالي في الأداة

<style>

/*

   ColorBox Core Style:

   The following CSS is consistent between example themes and should not be altered.

*/

#colorbox, #cboxOverlay, #cboxWrapper{position:absolute; top:0; left:0; z-index:9999; overflow:hidden;}

#cboxOverlay{position:fixed; width:100%; height:100%;}

#cboxMiddleLeft, #cboxBottomLeft{clear:left;}

#cboxContent{position:relative;}

#cboxLoadedContent{overflow:auto;}

#cboxTitle{margin:0;}

#cboxLoadingOverlay, #cboxLoadingGraphic{position:absolute; top:0; left:0; width:100%;}

#cboxPrevious, #cboxNext, #cboxClose, #cboxSlideshow{cursor:pointer;}

.cboxPhoto{float:left; margin:auto; border:0; display:block;}

.cboxIframe{width:100%; height:100%; display:block; border:0;}

/*

   User Style:

   Change the following styles to modify the appearance of ColorBox.  They are

   ordered & tabbed in a way that represents the nesting of the generated HTML.

*/

#cboxOverlay{background:#000;opacity:0.5 !important;}

#colorbox{

        box-shadow:0 0 15px rgba(0,0,0,0.4);

       -moz-box-shadow:0 0 15px rgba(0,0,0,0.4);

        -webkit-box-shadow:0 0 15px rgba(0,0,0,0.4);

       }

   #cboxTopLeft{width:14px; height:14px; background:url(http://imgboot.com/images/cybersidh/controls.png) no-repeat 0 0;}

   #cboxTopCenter{height:14px; background:url(http://imgboot.com/images/cybersidh/border.png) repeat-x top left;}

   #cboxTopRight{width:14px; height:14px; background:url(http://imgboot.com/images/cybersidh/controls.png) no-repeat -36px 0;}

   #cboxBottomLeft{width:14px; height:43px; background:url(http://imgboot.com/images/cybersidh/controls.png) no-repeat 0 -32px;}

   #cboxBottomCenter{height:43px; background:url(http://imgboot.com/images/cybersidh/border.png) repeat-x bottom left;}

   #cboxBottomRight{width:14px; height:43px; background:url(http://imgboot.com/images/cybersidh/controls.png) no-repeat -36px -32px;}

   #cboxMiddleLeft{width:14px; background:url(http://imgboot.com/images/cybersidh/controls.png) repeat-y -175px 0;}

   #cboxMiddleRight{width:14px; background:url(http://imgboot.com/images/cybersidh/controls.png) repeat-y -211px 0;}

   #cboxContent{background:#fff; overflow:visible;}

       #cboxLoadedContent{margin-bottom:5px;}

       #cboxLoadingOverlay{background:url(http://imgboot.com/images/cybersidh/loadingbackground.png) no-repeat center center;}

       #cboxLoadingGraphic{background:url(http://imgboot.com/images/cybersidh/loading.gif) no-repeat center center;}

       #cboxTitle{position:absolute; bottom:-25px; left:0; text-align:center; width:100%; font-weight:bold; color:#7C7C7C;}

       #cboxCurrent{position:absolute; bottom:-25px; left:58px; font-weight:bold; color:#7C7C7C;}

       #cboxPrevious, #cboxNext, #cboxClose, #cboxSlideshow{position:absolute; bottom:-29px; background:url(http://imgboot.com/images/cybersidh/controls.png) no-repeat 0px 0px; width:23px; height:23px; text-indent:-9999px;}

       #cboxPrevious{left:0px; background-position: -51px -25px;}

       #cboxPrevious.hover{background-position:-51px 0px;}

       #cboxNext{left:27px; background-position:-75px -25px;}

       #cboxNext.hover{background-position:-75px 0px;}

       #cboxClose{right:0; background-position:-100px -25px;}

       #cboxClose.hover{background-position:-100px 0px;}

       .cboxSlideshow_on #cboxSlideshow{background-position:-125px 0px; right:27px;}

       .cboxSlideshow_on #cboxSlideshow.hover{background-position:-150px 0px;}

       .cboxSlideshow_off #cboxSlideshow{background-position:-150px -25px; right:27px;}

       .cboxSlideshow_off #cboxSlideshow.hover{background-position:-125px 0px;}

/*-----------------------------------------------------------------------------------*/

/*   Facebook Likebox popup For Blogger

/*-----------------------------------------------------------------------------------*/

#subscribe {

    font: 12px/1.2 Arial,Helvetica,san-serif; color:#666;

}

#subscribe a,

#subscribe a:hover,

#subscribe a:visited {

    text-decoration:none;

}

.box-title {

   color: #F66303;

   font-size: 20px !important;

   font-weight: bold;

   margin: 10px 0;

border:1px solid #ddd;

-moz-border-radius:6px;

-webkit-border-radius:6px;

border-radius:6px;

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

padding:10px;

line-height:25px; font-family:arial !important;

}

.box-tagline {

   color: #999;

   margin: 0;

   text-align: center;

}

#subs-container {

    padding: 35px 0 30px 0;

    position: relative;

}

a:link, a:visited {

border:none;

}

.demo {

display:none;

}

</style>

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js'></script>

<script src="http://sidharth12.googlecode.com/files/jquery.colorbox-min.js"></script>

<script type="text/javascript">

jQuery(document).ready(function(){

   if (document.cookie.indexOf('visited=true') == -1) {

       var fifteenDays = 1000*60*60*24*30;

       var expires = new Date((new Date()).valueOf() + fifteenDays);

       document.cookie = "visited=true;expires=" + expires.toUTCString();

   $.colorbox({width:"400px", inline:true, href:"#subscribe"});

       }

});

</script>

    <!-- This contains the hidden content for inline calls -->

        <div style='display:none'>

   <div id='subscribe' style='padding:10px; background:#fff;'>

        <h3 class="box-title">Receive all updates via Facebook. Just Click the Like Button Below<center><p style="line-height:3px;" >▼</p></center></h3>

      <center>

<iframe src="//www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Fwww.facebook.com%2Fإسم صفحتك على الفيسبوك&amp;width=300&amp;colorscheme=light&amp;show_faces=true&amp;border_color=%23ffffff&amp;stream=false&amp;header=false&amp;height=258" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:300px; height:258px;" allowtransparency="true"></iframe>

</center>

<p style=" float:right;  margin-right:35px;  font-size:9px;" >Powered By <a style=" font-size:9px; color:#3B78CD; text-decoration:none;" href="http://www.mybloggertricks.com">Blogger Widgets</a></p>

</div>

</div>

 .................................................................

 إسم صفحتك على الفيسبوك:إسم صفحتنا على الفيسبوك هوm3lomadelivery

تابع القراءة

0 طريقة اضافة ازرار المشاركه الاجتماعيه علي شكل قلوب تبهر الزائر

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

ابحث عن الكود الذي بالاسفل
 

<data:post.body/> 

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

div style='clear:both; '>
<div style='width:65px; float:left;'>
<a 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'><img alt='Stumble' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj3vEHUh1-wjohUAeBrwGPTZKVgOPIjdNhpkBkS9tU27CWmIHXaECCeMP38j-uK2rYKUJ2RfX4GMF5P4qAu6J3DgSmu_eJRsBAr0zx74enyUWMP5VXZr1H7bfxiToKL5mFFdDu3R_pQJ8Km/' style='padding:0;margin:0;border:none;'/></a>
</div>
<div style='width:65px; float:left;'>
<a 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'><img alt='Delicious' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgjylAdUxr5ZnywO_-mT_a8BpLk7Iv6xllMlVn6RXSFxNi2i6vvGkUEBtc2MUH-_8dpphIM7JmhtRj5Cjd6NuvBu9Kk0nPZiMSDUklx7mrkptzB_JD5vVgSPRMy_5GOTX8BEIxuEmUnGdPU/' style='padding:0;margin:0;border:none;'/></a>
</div>
<div style='width:65px; float:left;'>
<a expr:href='&quot;http://technorati.com/faves?add=&quot; + data:post.url' rel='external nofollow' target='_blank'><img alt='Technorati' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi9G9ImgAOM9MlFbfDkqKrnt8Zi79o8FUkU_T8KRoie9y0FBSSmNzVnw-Zk7j7MS_VGorWOeFfvtvcvHSRd4GgggpX9Z56bINVBiqKIAd3ihUb26cjksunU5qc_Z-y5Sz9BqB5yaBcw7_8M/' style='padding:0;margin:0;border:none;'/></a>
</div>
<div style='width:65px; float:left;'>
<a expr:href='&quot;http://twitthis.com/twit?url=&quot; + data:post.url' rel='external nofollow' target='_blank'><img alt='Twitter' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjPy2-KCkhrsFYW5UHDnwyI2T95_c-OW0zLuU5mR9AgYbkhqzzikzBgnMslaofLLH7nMC4LJEW3UZdONEatyjoPrlDNW6FqLL98BCrn_vjmB-1qdNB3joedg79tX3zcDxilM6dpBSPVNwh_/' style='padding:0;margin:0;border:none;'/></a>
</div>
<div style='width:65px; float:left;'>
<a 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'><img alt='Facebook' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjIFLKVpakHBuYsGMiPSDmqA5FKU4yRLAZTETylSEAAtB4-vYHNa5Kq1m0MgPZ4F1InkkeF-MSW_NAkxa1ZyBUBF5bh0NH67XXcY32SFUWQKv5j0xonN6KW0gGkIULOWnXj_37xbj8usL1f/' style='padding:0;margin:0;border:none;'/></a>
</div>
<div style='width:65px; float:left;'>
<a expr:href='&quot;http://myweb2.search.yahoo.com/myresults/bookmarklet?u=&quot; + data:post.url +  &quot;&amp;=&quot; + data:post.title' rel='external nofollow' target='_blank'><img alt='Yahoo' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhykQhthhDNyVYScIMKL-2bjcUY2FT52W2Z5B64jUEBOMnu__UZAUG9oGhMLw6_Rjb4yfTRjwnIu125XAePyJmHuz-gbTwwF-QeV0vQS8otAubSJpmnne3cfoNoIeBxaufFLvZIXo1cyEW_/' style='padding:0;margin:0;border:none;'/></a>
</div>
<div style='width:65px; float:left;'>
<a expr:href='&quot;http://reddit.com/submit?&amp;url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='nofollow' target='_blank'><img alt='Reddit' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhSwczc_CAoKm34JhzlNznl83yOT1Hq649mbIFRomY9GOsRRdemhimLOnyH8jOQdk50oT3-NO5my5xpsNk2qDFJFtmntPcudc4y6_dcFHUKTiexbgE5a0G-uB0TUNVW5dbvMrutYcbe3BEi/' style='padding:0;margin:0;border:none;'/></a>
</div>
<div style='width:65px; float:left;'>
<a expr:href='data:blog.homepageUrl + &quot;feeds/posts/default&quot;' rel='external nofollow' target='_blank'><img alt='Feed' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi9sk_IBo3Y8FGOs7CqPaaQx99ftxjNnsAK_SGRuMNr6F5ngmMfS8AV-jFcz0cq571WJv9quIXQuXGGCKlRkdY4SLRjVKmr3MWUf1DTLiIRray4vqkhU4gbjxTOq1wrPNFAfNeuoHgu2NXh/' style='padding:0;margin:0;border:none;'/></a>

قم بالحفظ ومبروك عليك الاضافه

تابع القراءة

0 كيف تضيف أزرار مفضلات بلوجر إلى القوالب المعدلة

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

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

الخطوة الأولى: تفعيل أزرار المفضلات الاجتماعية في بلوجر 

 

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

الخطوة الثانية: تعديل القالب لإظهار أزرار المفضلات

قبل الشروع في تعديل القالب يرجى التقيد بما يلي:
 

» تحميل و حفظ نسخة احتياطية من قالب مدونتك قبل الشروع في أي تعديل.

» وضع علامة في خانة توسيع القوالب.

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

<div class='post-footer-line post-footer-line-1'>

أو قد تجده على هذا الشكل كذلك فجرب البحث عن أحدهما:

<p class='post-footer-line post-footer-line-1'>

بعد أن تجد الكود المطلوب مباشرة بعده تلصق الكود الآتي:

<div class='post-share-buttons goog-inline-block'> <b:if cond='data:post.sharePostUrl'> <b:include data='post' name='shareButtons'/> </b:if></div>

ثم أخيرا اضغط زر حفظ القالب.

ملحوظة إضافية

في بعض الحالات قد لا يظهر زر جوجل +1 (google +1) إلى جانب أزرار المفضلات و هذا راجع بالأساس إلى افتقاد القالب إلى ملف js الضروري لتشغيل الإضافة و عليه لإظهارها ستبحث عن </head> و مباشرة أسفلها تضع هذا الكود و تحفظ القالب.

<script type="text/javascript" src="http://apis.google.com/js/plusone.js"></script>

.....................................................................................

تابع القراءة

0 إضافة شارة صفحات جوجل بلس Google Plus

إضافة شارة صفحات جوجل بلس Google Plus

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

في صفحتك على جوجل بلاس، و تحديدا تحت صويرة صفحتك تضغط رابط "بدء الأستخدام" ثم في مستطيل "توصيل موقعك الإلكتروني" تضغط على رابط "الحصول على الشارة »" و في النافذة المنبثقة تختار نوع و شكل الشارة، رمز، شارة صغيرة أو شارة قياسية و أجد الأخيرة أفيد، و تحدد اللغة و إن احتجت لمزيد من التعديل فيمكنك ضغط "خيارات متقدمة". بعد إنهاء التعديلات ستجد في آخر الصفحة كودا مولدا، هذا الكود ينقسم إلى قسمين. الجزء الأول منه تضعه مباشرة فوق </head> أما الجزء الثاني فتضعه في مربع HTML/Javascript من صفحة التخطيط ليظهر في القائمة الجانبية.

كذلك يمكنك وضع الكود الثاني في أي مكان من القالب لتظهره في موضع محدد من مدونتك غير القائمة الجانبية.

...................................................................

تابع القراءة

0 تركيب تعليقات فيسبوك العربية على مدونات بلوجر

تركيب تعليقات فيسبوك العربية على مدونات بلوجر

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

مميزات الإضافة:

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

طريقة تركيب تعليقات فيسبوك

الخطوة الأولى: إنشاء تطبيق خاص على الفيسبوك

توجه إلى صفحة إنشاء تطبيقات فيسبوك ثم أدخل اسم التطبيق مثلا "تعليقاتي" و رابط مدونتك و اضغط الزر الأزرق لإنشاء التطبيق، أدخل كلمة التحقق و اضغط زر المتابعة، في الصفحة الموالية إلى اليسار اضغط رابط لوحة تحكم المطور ثم في الصفحة الموالية اضغط تعديل الإعدادات الموجود في يسار الإطار ثم تابع كما بالصورة الآتية:

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

الخطوة الثانية: إضافة الأكواد اللازمة إلى قالب المدونة

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

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

و سيصبح إذن الكود بهذا الشكل :

<html xmlns:fb='http://www.facebook.com/2008/fbml' expr:dir='data:blog.languageDirection' xmlns='http://www.w3.org/1999/xhtml' xmlns:b='http://www.google.com/2005/gml/b' xmlns:data='http://www.google.com/2005/gml/data' xmlns:expr='http://www.google.com/2005/gml/expr'>

الآن ابحث عن <body> و بعده مباشرة ألصق الكود الآتي بعد استبدال معرف التطبيق بالأرقام التي نسختها سابقا في الخطوة الأولى:

<div id='fb-root'/><script>window.fbAsyncInit = function() { FB.init({xfbml: true, appId: معرف التطبيق }); }; (function() { var e = document.createElement('script'); e.async = true; e.src = document.location.protocol + '//connect.facebook.net/ar_AR/all.js' document.getElementById('fb-root').appendChild(e); }());</script>

بعد ذلك ابحث عن </head> ثم قبله مباشرة ألصق الكود الآتي:

<b:if cond='data:blog.pageType == "item"'><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='http://google.com/help/hc/images/logos/blogger_logo.gif' property='og:image'/><meta content='معرف التطبيق ID' property='fb:app_id'/><meta content='معرف حسابك على فيسبوك ID' property='fb:admins'/><meta content='article' property='og:type'/>

هذا الكود خاص ب Open Graph protocol وهو يتيح لفيسبوك التعامل مع موقعك أو مدونتك كما لو كان صفحة كما صفحات فيسبوك... طبعا لا تنس تغيير ما أشير إليه بالألوان كما يلي:
عنوان المدونة : عنوان مدونتك أو أي اسم تحب أن يظهر على فيسبوك عندما يعجب أحدهم بإحدى تدويناتك.
الرابط البرتقالي : استبدله برابط صورة لشعار مدونتك.
معرف التطبيق ID : طبعا هو نفسه المعرف الذي نسخته في الخطوة الأولى.
معرف حسابك على فيسبوك ID : هو مجموعة أرقام يمثل حسابك على فيسبوك لمعرفته يمكنك زيارة هذا الموضوع. فبحسابك هذا ستكون مدير التعليقات Admin.


ثم ابحث عن <data:post.body/> و بعده مباشرة ألصق الكود الموالي مع تعديل ما لون:
560 استبدلها بالعرض المناسب الذي تريد أن يبدو عليه صندوق تعليقات فيسبوك، و هذا هو الكود الذي يتولى إظهار صندوق التعليقات، فيمكنك إدراجه في أمكنة أخرى غير الذي ذكر بما يناسب مدونتك.
 

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

ملاحظة: لمن يملكون قوالب داكنة أو سوداء اللون يمكنه استعمال صندوق تعليقات فيسبوك باللون الأسود و لفعل ذلك نضيف colorscheme='dark' مباشرة بعد <fb:comments في الكود السابق.

و أخيرا اضغط زر الحفظ و هنيئا لك.
....................................................................................

تابع القراءة

0 طريقة اضافة زر 1+ لجوجل على مدونة بلوجر

 طريقة اضافة زر 1+ لجوجل على مدونة بلوجر

أصدر موقع جوجل حديثا الزر 1+ ،حيث يسمح لك باقتراح أي موقع معين أو أي شيء أعجبك وذلك عند النقر على الزر 1+ ،فإنك تقوم بإخبار أصدقائك والعالم أن هناك شيء ما يجب الإطلاع عليه ،وبالتالي فإن مقترحاتك سوف تظهر عندما يقومون بالبحث في جوجل ، فهذه الميزة جديدة حيث تسعى جوجل في تطوير محركها بشكل جديد ، ،لذلك ،إذا رأيت هذا الزر في موقع وتريد من أصدقائك إيجاده بسهولة عند بحثهم فقط أنقر الزر1 +
ولإضافة هذا الزر في تدويناتك وفتح المجال للزائرين باقتراح مدونتك نقوم بشرح طريقة تركيب الزر +1 على المدونة . انتقل الى لوحة تحكم مدونتك ثم اختر ( تصميم ) بعدها تحرير ( HTML ) ثم ضع علامة في خانة توسيع قوالب عناصر واجهة المستخدم .
قم بالبحث عن الكود التالي بواسطة لوحة التحكم ( ctrl +f ) : - 

</body>

ثم قم بلصق الكود التالي قبلة : - 

<script type="text/javascript" src="http://apis.google.com/js/plusone.js"></script>

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

<data:post.body/>

ثم قم بلصق الكود التالي بعده ليكون الزر1+ اسفل التدوينة ، او قم بلصق الكود قبله ليكون الزر1+ تحت عنوان التدوينة :

<b:if cond='data:blog.pageType == "item"'><g:plusone expr:href='data:post.url' size='tall'/></b:if>

ملاحظة : يتوفر زر1+ على 4 قياسات حيث يمكنك إختيار القياس المناسب لك وذلك بإستبدال الكلمةtall من الكود بأحد القياسات الموجودة في الصورة أسفله .

 ...................................................................

تابع القراءة

0 زر تابعني على التويتر الجديد على مدونات بلوجر

زر تابعني على التويتر الجديد على مدونات بلوجر

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

انتقل إلى لوح تحكم مدونتك،إختر "تصميم" ،ثم "تحريرHTML " ثم ضع علامة في خانة توسيع قوالب عناصر واجهة المستخدم.
 

قم بالبحث عن الكود التالي بالإستعانة بلوحة التحكم (CTRL+F )

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

ثم قم بلصق هذا الكود أسفله :

<b:if cond='data:blog.pageType == "item"'><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/Abuiyad007'>تابعني على التويتر</a><script src='http://platform.twitter.com/widgets.js' type='text/javascript'/></b:if>

وأخيرا قم بحفظ القالب 

......................................................................

انشر المعلومة وأخبر أصدقائق

تابع القراءة

0 إخفاء عنوان الأداة من المدونة وإظهاره في تصميم القالب

إخفاء عنوان الأداة من المدونة وإظهاره في تصميم القالب

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

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

لحد الآن سوف يظهر عنوان الأداة في تصميم القالب  وكذلك يظهر في المدونة ،لكننا نود حذف العنوان من المدونة مع الإحتفاض به في تصميم القالب  لذلك سوف نقوم بالتوجه لتحرير Html ثم ضع علامة في المربع الصغير لتوسيع القالب ثم إبحث عن العنوان الجديد الذي أضفته للأداة ،سوف تجد أن هذا العنوان يوجد داخل كود على هذا الشكل :

<b:widget id='HTML5' locked='false' title='عنوان الأداة' type='HTML'><b:includable id='main'> <!-- only display title if it's non-empty --> <b:if cond='data:title != ""'> <h3 class='title'><data:title/></h3> </b:if> <div class='widget-content'> <data:content/> </div> <b:include name='quickedit'/></b:includable></b:widget>

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

..................................................................................................................

انشر المعلومة وأخبر أصدقائق

تابع القراءة