يعتبر الفيسبوك من أهم المواقع التواصل الأجتماعي من حيث الحصول على زوار مناسبين ومتفاعلين للمدونة او الموقع الاكتروني الخاص بك,حيث قمنا بعمل هذه المقال للأشخاص الذين يريدون الحصول على زوار لمواقعهم او مدوناتهم الشخصية عن طريق أضافة صندوق الأعجاب بالفيسبوك.
حيث تعد أضافة صندوق الاعجاب بالفيسبوك لمدونات بلوجر من أهم الاضافات التي يجب ان تتوفر على كل مدونة والتي يجب ان لاتخلو منها بسبب اهميتها,تساعد هذه الاضافة على جذب المزيد من الزوار لموقعك بسبب كون الفيسبوك هو ثاني اكبر المواقع الاجتماعية من حيث الاستخدام من قبل المستخدمين والتي تستطيع جذب هولاء المستخدمين عن طريق هذه الاضافة لمدونات بلوجر.
طريقة أضافة صندوق الأعجاب بالفيسبوك على شكل نافذة منبثقة
أن أضافة صندوق الأعجاب الخاص بالفيسبوك لمدونات بلوجر تعتبر طريقة رائعة حيث بمجرد دخول الزائر الى موقعك الالكتروني سوف تظهر له صفحة الفيسبوك بشكل صفحة عائمة,واليك طريقة تركيب هذه الأضافة على مدونات بلوجر :
1-قم بالتوجة الى تحرير HTML من خلال لوحة تحكم بلوجر وقم بالبحث عن كود ]]></b:skin> وقم بنسخ ولصق الكود التالي فوقة.
/*=============== CSS Popup Like box by msdesignbd.com ======================*/
.mspopup{position:fixed;top:0;left:0;right:0;bottom:0;z-index:90000;background:rgba(0,0,0,.6);overflow-x:hidden;overflow-y:auto;display:none}
.mspopup-container{background:#fff url(http://i.imgur.com/2twQjiN.gif) no-repeat 50% 50%;padding:0;font-size:14px;height:236px;position:fixed;top:50%;left:50%;z-index:90001;-webkit-box-shadow:0 0 15px 0 rgba(50,50,50,0.8);transform:translateY(-50%) translateX(-50%)}
.mspopup .mspopup-close{position:absolute;top:9px;right:20px;font-weight:700;font-family:Verdana;font-size:18px;cursor:pointer;color:#fff}
.mspopup .mspopup-close:hover{color:#535353}
.mspopup .mspopup-header{font-size:20px;padding:10px;text-align:center;color:#fff;font-family:Open Sans;background-color:#3B5998;text-shadow:1px 2px 4px #838383}
.mspopup .mspopup-header p{font-size:10px;padding:0;margin:0;font-weight:400;text-transform:initial}
.mspopup .mspopup-content{padding:10px 20px}
2-قم بالبحث هذه المرة عن كود <body/> وقم بنسخ ولصق الكود التالي فوقة وقم بعملية حفظ القالب.
<script src='https://cdn.rawgit.com/msdesign92/ms-design/master/mspopup.js' type='text/javascript'/>
<script type='text/javascript'>
$('#popup-box').mspopup({
'autoOpen': true
});
</script>
3-توجة الى التخطيط من لوحة التحكم وقم بأضافة أداة جديدة وقم بنسخ ولصق الكود التالي في الاداة الجديدة مع تغيير رابط الى رابط الصفحة الخاص بك وق بعملية الحفظ .
<div id="popup-box" class="mspopup">
<div class="mspopup-container">
<div class="mspopup-header">
<div class="mspopup-close" data-dismiss="mspopup">x</div>
أنضم الى صفحتنا على الفيسبوك ولاتنسى زر أعجبني
<p> أحصل على أخر الأخبار والتحديثات من خلال صفحة الفيسبوك</p>
</div>
<div class="mspopup-content">
<div class="fb-page" data-href="https://www.facebook.com/رحيل-القوافي-1142439085886087/" data-width="400" data-height="300" data-small-header="true" data-adapt-container-width="true" data-hide-cover="true" data-show-facepile="true" data-show-posts="false"><div class="fb-xfbml-parse-ignore"></div></div>
</div>
</div>
</div>
طريقة أضافة صندوق الأعجاب بالفيسبوك الى جانب المدونة
تظهر اضافة صندوق الاعجاب بالفيسبوك في الشريط الجانبي لمدونات بلوجر وحيث بمجرد وضع او تمرير الماوس على ايقونة الفيسبوك سوف تظهر له صندوق الاعجاب بالفيسبوك,واليك طريقة تركيب هذه الأضافة على مدونات بلوجر :
1-قم بالتوجة الى تحرير HTML من خلال لوحة تحكم بلوجر وقم بالبحث عن كود <head/> وقم بنسخ ولصق الكود التالي فوقة.
<script src='//code.jquery.com/jquery-1.10.2.min.js' type='text/javascript'/>
2-قم بالبحث هذه المرة عن كود <body> وقم بنسخ ولصق الكود التالي فوقة وقم بعملية حفظ القالب.
<div id='fb-root'/>
<script type='text/javascript'>
//<![CDATA[
window.fbAsyncInit = function() {
FB.init({
appId : '878599892159456', // replace with your app id
status : true, // check login status
cookie : true, // enable cookies
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>
3-توجة الى التخطيط من لوحة التحكم وقم بأضافة أداة جديدة وقم بنسخ ولصق الكود التالي في الاداة الجديدة "HTML/Java Script" مع تغيير رابط الصفحة الى رابط الصفحة الخاص بك وقم بعملية الحفظ .
<script type="text/javascript">
//<!--
$(document).ready(function() {$(".msfslikebox").hover(function() {$(this).stop().animate({right: "0"}, "medium");}, function() {$(this).stop().animate({right: "-250"}, "medium");}, 500);});
//-->
</script>
<style type="text/css">
.msfslikebox{background: url("http://i.imgur.com/pQGrWuH.png") 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%;}
.msfslikebox div{border:none;position:relative;display:block;}
.msfslikebox span{bottom: 12px;font: 8px "lucida grande",tahoma,verdana,arial,sans-serif;position: absolute;right: 6px;text-align: right;z-index: 99999;}
.msfslikebox span a{color: #808080;text-decoration:none;}
.msfslikebox span a:hover{text-decoration:underline;}
</style><div class="msfslikebox"><div>
<iframe src="http://www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Ffacebook.com%2Fرحيل-القوافي-1142439085886087&width=245&colorscheme=light&show_faces=true& connections=9&stream=false&header=false&height=270" scrolling="no" frameborder="0" style="border:4px solid rgb(53, 102, 203); overflow: hidden; height: 266px; width: 240px;background:#fff;"></iframe></div></div>
اشكرك اخي
ردحذفالاداة لم تعد تعمل
ممكن اصلاحها
قم بمسحها واعادة تركيبها
حذف