أهم الاضافات التي تحتاجها المدونة -الجزء الثالث – أدوات و إضافات الفيسبوك فقط

mostajad12 يناير، 2013

0 10 4 minutes read

السلام عليكم و رحمة الله تعالى و بركاته

كتكملة للدرس الثاني من دورة إنشاء مدونة إحترافية

أقدم لكم هذه التدوينة التي سنخصصها للإضافات التي تحتاجها المدونة

الإضافات تم انتقاءها حسب الأهمية، و لاداعي للإكثار من الإضافات لأنها تؤثر سلبًا على المدونة

لذلك سنركز على المهمة فقط و الضرورية .

أهم الاضافات التي تحتاجها المدونة

على بركة الله نبدأ:

— — — — — — — — — — — — — — — — — — — — — —

في تدوينة سابقة قمنا بشرح كيفية إضافة أدوات من شأنها أن تضفي على المدونات لمسات احترافية

إلا أنه في تدوينتنا لليوم وددت تخصيصها لأدوات وإضافات الفيسبوك فقط ،،

___________________________

إضافة | أزرار “Like” و”Send” من الفيسبوك

تعتبر هذه الإضافة من أشهر إضافات الفيسبوك على مدونات بلوجر

لما تتمتع به من خفة وسلاسة وكذلك عملية جدا للذين لا يحبذون التعليق على التدوينات ^_^

توجه من لوحة التحكم لديك إلى :

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

كود بلغة HTML:

<data:post.body/>

( ستجد هذا الكود مكرر أكثر من مرة في القالب والمقصود هو الكود الثاني )

إذا رغبت أن تظهر الأزرار في بداية التدوينة فأضف الكود التالي قبل الوسم السابق

[COLOR=”rgb(255, 140, 0)”] إضافة زر “Send” – “أرسل” فقط

كود بلغة HTML:

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<script src='http://connect.facebook.net/ar_AR/all.js#xfbml=1'/><fb:send colorscheme='light' expr:href='data:post.url' font='tahoma'/>
</b:if>

[COLOR=”rgb(255, 140, 0)”] إضافة زر “Like” – “أعجبني” فقط [/COLOR]

كود بلغة HTML:

<b:if cond='data:blog.pageType == 
&quot;item&quot;'>
<iframe allowTransparency='true' expr:src='&quot;[URL]http://www.facebook.com/plugins/like.php?href=&quot;[/URL] + data:post.url + &quot;&amp;layout=button_count&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>

[COLOR=”rgb(255, 140, 0)”] إضافة زر “أرسل – Like” + “Send – أعجبني” معا [/COLOR]

كود بلغة HTML:

<b:if cond='data:blog.pageType == 
&quot;item&quot;'>
<script src='http://connect.facebook.net/en_US/all.js#xfbml=1' type='text/javascript'/><fb:like colorscheme='light'  action='like'  layout='standard' expr:href='data:post.url' font='' send='true' show_faces='false' width='450'/></b:if>

لتخصيص الأزرار اتبع التالي :

– احذف المكتوب باللون الأخضر إذا أردت أن تظهر الأزرار في التدوينة وأيضا في الصفحة الرئيسية
إذا رغبت أن تظهر في التدوينة فقط فلا تغير شيئا في الكود

– light : هو اللون الفاتح للأزرار (الأزرق)، إذا رغبت في أن تكون الأزرار باللون الغامق فاستبدل
“light” بـ “dark”

– button_count | standard : هو شكل “ستايل” زر “Like” اختر الشكل الذي ترغب به من الخيارات التالية
واستبدل اسمه باسم الزر الذي تريده

standard

button_count

box_count

___________________________

إضافة | زرّ ” Like – أعجبني” الخاص بصفحة مدّونتك في الفيسبوك

زر جميل جدا يختصر عليك إضافة “صندوق الإعجاب” الخاص بصفحة مدونتك على مدونتك

فهو يشابه زر “[COLOR=”rgb(255, 140, 0)”]أعجبني – Like[/COLOR]” الذي يكون بجانب اسم صفحتك على الفيسبوك

لإضافته إلى مدونتك توجه في لوحة التحكم التحكم لديك إلى :

تصميم > عناصر الصفحة > إضافة أداة HTML/JavaScript > ألصق الكود التالي

كود بلغة HTML:

<iframe src="//www.facebook.com/plugins/like.php?href=https://www.facebook.com/Your_Page_URL%2F&amp;send=false&amp;layout=box_count&amp;width=450&amp;show_faces=false&amp;action=like&amp;colorscheme=light&amp;font&amp;height=90&amp;appId=Your_ID" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:200px; height:90px;" allowtransparency="true"></iframe>

– استبدل “[COLOR=”rgb(255, 140, 0)”]Your_Page_URL[/COLOR]” برابط صفحة مدونتك على الفيسبوك.

– استبدل “[COLOR=”rgb(255, 140, 0)”]box_count[/COLOR]” باسم شكل “ستايل” الزر الذي ترغب به من الخيارات التالية

standard

button_count

box_count

– استبدل “[COLOR=”rgb(255, 140, 0)”]Your_ID[/COLOR]” برقم التطبيق الخاص بك على الفيسبوك

(إذا لم يكن لديك تطبيق خاص بك استعن بالخطوات الأولى من الدرس التالي)

___________________________

إضافة | صندوق ” Facebook Live Stream ” للمناقشة الحية

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

لإضافته إلى مدونتك، يكفي أن تنسخ الكود التالي وتلصقه في أي موضع ترغب به

(كأداة html أو تدوينة بذاتها)

كود بلغة HTML:

<iframe src="http://www.facebook.com/plugins/livefeed.php?app_id=Your_APP_ID&amp;width=500&amp;height=500" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:500px; height:500px;" allowTransparency="true"></iframe>

– استبدل “[COLOR=”rgb(255, 140, 0)”]Your_APP_ID[/COLOR]” برقم معرّف التطبيق الخاص بك في الفيسبوك

(إذا لم يكن لديك تطبيق خاص بك استعن بالخطوات الأولى من الدرس التالي)

– يمكنك تغيير عرض الصندوق بتغيير القيمة “[COLOR=”rgb(255, 140, 0)”]500[/COLOR]” في الكود

___________________________

إضافة | صندوق تعليقات ” Facebook Comments ” لتدوينة واحدة

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

ويشتكون من كون التعليقات التي تضاف إليه تتكرر في كل تدوينات المدونة ..!!

في الحقيقة هذا أمر طبيعي ..

فصندوق تعليقات الفيسبوك هذا وظيفته تتعلق بتدوينة واحدة فقط

ولا يمكن أن نضيفه إلى جميع تدوينات المدونة لأن ..!!

أعتقد أن هذه الإضافة من شأنها خلق مفهوم جديد لـ”سجلّ الزوّار” الذي لا تخلو منه الكثير من المدونات

وذلك بإضافة صندوق تعليقات الفيسبوك كتدوينة مستقلة بذاتها إلى المدونة، باتباع هذه الخطوات :

في لوحة التحكم بمدونتك توجهه إلى :

نشر > رسالة جديدة > ألصق الكود التالي في صندوق الكتابة

كود بلغة HTML:

<div class="fb
comments" data-href="http://a-omnidal.blogspot.com/" data-num-posts="10" data-width="400"></div>

– استبدل رابط مدونتي “[COLOR=”rgb(255, 140, 0)”]http://a-omnidal.blogspot.com[/COLOR]/” برابط مدونتك

– يمكنك تغيير عرض صندوق التعليق من خلال تغيير القيمة “[COLOR=”rgb(255, 140, 0)”]400[/COLOR]” في الكود

– وعدد التعليقات التي ستظهر كوضعية افتراضية للصندوق بتغيير القيمة “[COLOR=”rgb(255, 140, 0)”]10[/COLOR]”

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

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

( شرح كامل | أضف صندوق تعليقات فيسبوك إلى بلوجر بدون مشاكل )

___________________________

[COLOR=”rgb(255, 140, 0)”] إضافة | صندوق المعجبين ” Fun Box ” بتقنية الـJQuery [/COLOR]

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

( أشر بسهم الفأرة على أيقونة “Facebook” يمين صفحة المدونة )

1) لإضافتها توجه إلى: تصميم > تحرير html > أخذ نسخة احتياطية > ابحث عن الوسم التالي

كود بلغة HTML:

</head>

ثم أضف قبله مباشرة ( فوقه – أعلاه ) الكود التالي

كود بلغة HTML:

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

2) توجه إلى: تصميم > عناصر الصفحة > إضافة أداة html > ألصق الكود التالي

كود بلغة 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("http://1.bp.blogspot.com/--tscpVzcBjo/TdUarKtcAlI/AAAAAAAAA3I/qVkypiYO9rc/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=Add_Your_Page_URL&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>