جرووا تك

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

.like-fab {
  position: fixed;
  bottom: 20px;
  left: 14px;
  z-index: 99999;
  background: #3a5795;
  border-radius: 10px;
  box-shadow: 1px 2px 16px rgba(0,0,0,0.6);  
  height: 50px;
  width: 50px;
}
.like-fab img {
  padding: 0px;
  visibility: visible;
  animation: tada .9s linear infinite;
  opacity: 1;
  margin: 9px 7px 0px 0px;
}
.like-fab-button {
  bottom: 18px;
  position: fixed;
  height: 40px;
  visibility: hidden;
  opacity: 0;
  left:24px;
  border-radius: 100%;
  width: 90px;
    margin: 0px 0px 0px -6px;
}
.like-fab:hover .like-fab-button {
visibility: visible;
opacity:1;
left:24px;
height:65px;
border-radius: 0px;
}
.like-fab:hover img{
visibility: hidden;
opacity:0;
width:50px;
}
.like-fab:hover {
  background: #fff;
  border-radius: 3px;
  height: 70px;
  width: 70px;
  box-shadow: 1px 3px 20px rgba(0,0,0,0.7);
}

      #HTML6 {margin-bottom:0px;}

.fb_comments_count {
  border-radius: 2px;
  display: inline-block;
  line-height: 13px;
  text-align: center;
  border: 1px solid #9e9e9e;padding: 0 3px;}

.intro {
  width: 100%;
  text-align: center;
  color: #fff;cursor:default;
  background: #30527D url(https://dl.dropboxusercontent.com/s/n8v1j1483x883xh/study-stuff.jpg) no-repeat center;background-size: cover;}
.intro-about {
  font-size: 17px !important;
  direction: rtl;}
@media (min-width:990px){.intro-about{padding: 32px;width: 640px;margin: 0 auto;}.intro{padding:64px;}}@media (max-width:990px) and (min-width:780px){.intro{padding:48px}.intro-about{padding:32px 64px}}@media (max-width:780px) and (min-width:600px){.intro-about{padding:16px 0}.intro{padding:48px}}@media (max-width:600px) and (min-width:450px){.intro{padding: 32px;}.intro-about{display:none}}@media (max-width:450px){.intro{padding:36px}.intro img{display:none}.intro-about{display:none}}
@media(min-width:870px){.rafikoka {font-size: 48px;}}@media(max-width:870px) and (min-width:731px){.rafikoka {font-size: 40px;}.intro-about{font-size:14px!important}}@media(max-width:731px){.rafikoka {font-size:32px;}.intro-about{font-size:14px!important}}

      @media (max-width: 540px){#dropdowns {display:none;}}
.has-dropdown {
    float: right;
    color: #fff;
 background-color: #046dd5;
    height: 72px;
    cursor: pointer;
 z-index: initial;
 font-weight: bold;
}
.has-dropdown:hover {
    background-color: #0357AB;
}
.subjects.has-dropdown {
    width: 120px;
}
.dropdown-head {
    padding: 26px 24px;
}
.dropdown {
    text-align: right;
    height: 0px;
 width: 144px;
    background-color: #fff;
    padding: 0px;
    box-shadow: 1px 1px 10px rgba(0, 0, 0, 0.3);
    z-index: -1;
    visibility: hidden;
    overflow: hidden;
 position: relative;
 border-bottom-right-radius: 4px;
    border-bottom-left-radius: 4px;
 font-weight: normal;
}
.subjects:hover > .dropdown {
    visibility: visible;
    height: 216px;
}
.levels:hover > .dropdown {
    visibility: visible;
    height: 108px;
}
.dropdown li {
    list-style: none;
}
.dropdown li:hover {
    background-color: #eee;
}
.dropdown a {
 display: block;
    padding: 8px 14px
    }
.arrow {
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-top: 5px solid #fff;
    top: 16px;
    margin-right: 8px;
    position: relative;
}
.fblikebox{background:url(https://dl.dropboxusercontent.com/s/0f6nua8kajp742q/mdroos-fbcover.jpg);background-size:cover;height:82px;}.fblikebox a{float:right}.fbpagename{padding:4px 8px;font-size:22px;color:#fff;text-shadow:.5px .5px 3px rgba(0,0,0,.5);font-weight:700;margin-top:40px}.fbpageimg{position:relative;margin:24px 16px 0 0;border:3px solid #fff;border-radius:3px;box-shadow:.5px .5px 2px 1px rgba(0,0,0,.4)}.fbpagelike{box-shadow:0 0 4px rgba(0,0,0,.3);padding:14px 104px 14px 14px;display:block;background:#fff;width:100%}.fb-like{text-align:left}

<div class='like-fab'><img src='https://dl.dropboxusercontent.com/s/f0nbfsttqi1veo3/like.png'/>
<iframe allowTransparency='true' class='like-fab-button' frameborder='0' scrolling='no' src="https://www.facebook.com/plugins/like.php?href=https%3A%2F%2Fweb.facebook.com%2FTuneOfHeart.Info%2F&width=62&layout=box_count&action=like&show_faces=true&share=false&height=65&appId"/>
</div>

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

https://www.facebook.com/plugins/like.php?href=https%3A%2F%2Fweb.facebook.com%2FTuneOfHeart.Info%2F&width=62&layout=box_count&action=like&show_faces=true&share=false&height=65&appId

* - يمكنك الحصول على هذا الكود من موقع facebook for developers

الموقع رابط الموقع

* - ضع رابط صفحتك على الفيسبوك داخل URL vers J’aime وعلم على جميع الخيارات الموجودة في الصورة.

* - إضغط على Obtenir le code

* - ثم  IFrame

* - غير الكود الموجود في الصورة بالكود السابق

* - إضغط على حفظ النموذج وإذا تعذر ذلك إستعمل محول الأكواد

الموقع محول الأكواد