اضافه زر اعجاب عائم لفيسبوك رائع !!

السلام عليكم ورحمه الله وبركاته اليوم ساقدم لكم درس من دروس بلوجر عباره عن اضافه جميله
زر اعجاب رائع لمدونات بلوجر خفيف وانيق وسهل التركيب للغايه فقط ضعه في اداه HTML/JavaScript  وسوف يعمل معك

الان قم بالدخول للتخطيط وضع الكود التالي في اداهHTML/JavaScript   

<style>
.fb-like {
position: fixed;
bottom: 16px;
left: 16px;
z-index: 99999;
background: #3a5795;
border-radius: 100%;
box-shadow: 1px 2px 16px rgba(0,0,0,0.6);
height: 64px;
width: 64px;
}
.fb-like img {
padding: 16px;
visibility: visible;
opacity: 1;
}
.fb-like-button {
bottom: 45px;
position: fixed;
height: 40px;
visibility: hidden;
opacity: 0;
left:24px;
border-radius: 100%;
width: 60px;
}
.fb-like:hover .fb-like-button {
visibility: visible;
opacity:1;
left:24px;
height:65px;
border-radius: 0px;
}
.fb-like:hover img{
visibility: hidden;
opacity:0;
width:50px;
}
.fb-like:hover {
background: #fff;
border-radius: 3px;
height: 102px;
width: 76px;
box-shadow: 1px 3px 20px rgba(0,0,0,0.7);
}
</style>
<div class=’fb-like’><img data-src=’https://lh3.googleusercontent.com/-2KbrEjv2NwM/V0Tow1dTB_I/AAAAAAAABfE/oI53KtnFSuIGasJXfzOqEnY8FQZzNSv8ACLcB/h120/36fuv53.png’/>
<iframe allowtransparency=’true’ class=’fb-like-button’ frameborder=’0′ scrolling=’no’ src=’https://www.facebook.com/v2.5/plugins/like.php?app_id=113869198637480&channel=https%3A%2F%2Fstaticxx.facebook.com%2Fconnect%2Fxd_arbiter.php%3Fversion%3D42%23cb%3Df2938f6778%26domain%3Ddevelopers.facebook.com%26origin%3Dhttps%253A%252F%252Fdevelopers.facebook.com%252Ff12322327c%26relation%3Dparent.parent&container_width=613&href=http%3A%2F%2Ffacebook.com%2Ftapseet%2F&layout=box_count&locale=ar_AR&sdk=joey&share=false&show_faces=false’></iframe> </div>

التعديلات
قم بتغييرtapseet لمعرف صفحتك علي فيس بوك
مثال
www.facebook.com/tapseet