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

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

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

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

انقر للمشاهدة!

كيفية إضافة صندوق إعجاب فيسبوك منبثق؟

1. الولوج للوحة تحكم المدونة --> القالب --> أنقر على تحرير html
2. بإستخدام إختصار البحث أنقر على أكواد القالب نقرة ثم أضغط على ctrl+f ثم ابحث عن الرمز </head> ثم أنسخ الكود التالي وأضفه فوق الرمز </head> مباشرةً:

<style>
/*<![CDATA[*/
.close-fbbox,.close-fbcookie{background:#fff;transition:all .4s ease-in-out;color:#555;cursor:pointer}
.fbbox-wrapper{width:360px;position:fixed;right:50%;margin-right:-180px;top:50%;margin-top:-131px;height:auto;background-color:#fff;-webkit-box-shadow:0 10px 50px 0 rgba(0,0,0,.25);-moz-box-shadow:0 10px 50px 0 rgba(0,0,0,.25);box-shadow:0 10px 50px 0 rgba(0,0,0,.25);padding:10px;border:1px solid #dedede;border-radius:5px;-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box;z-index:1000000}
.close-fbbox{position:absolute;top:-15px;left:-15px;font-family:Arial;font-size:24px;font-weight:700;width:25px;height:25px;line-height:25px;text-align:center;border:1px solid #dedede;border-radius:100%}
.close-fbcookie{padding:1px 5px;border:1px solid #dedede;border-radius:2px;font:11px Arial;display:inline;float:right;line-height:1}
.close-fbcookie span{font-size:18px;font-weight:700;vertical-align:middle}
.close-fbbox:hover,.close-fbcookie:hover{background:#ddd;border:1px solid #ccc}
#fbOnscroll .layer{position:fixed;top:0;right:0;bottom:0;left:0;background:rgba(0,0,0,.7);z-index:999999}
.zoomInUp{-webkit-animation-name:zoomInUp;animation-name:zoomInUp;-webkit-animation-duration:1s;animation-duration:1s;-webkit-animation-fill-mode:both;animation-fill-mode:both}
@-webkit-keyframes zoomInUp{0%{opacity:0;-webkit-transform:scale3d(.1,.1,.1) translate3d(0,1000px,0);transform:scale3d(.1,.1,.1) translate3d(0,1000px,0);-webkit-animation-timing-function:cubic-bezier(.55,.055,.675,.19);animation-timing-function:cubic-bezier(.55,.055,.675,.19)}
60%{opacity:1;-webkit-transform:scale3d(.475,.475,.475) translate3d(0,-60px,0);transform:scale3d(.475,.475,.475) translate3d(0,-60px,0);-webkit-animation-timing-function:cubic-bezier(.175,.885,.32,1);animation-timing-function:cubic-bezier(.175,.885,.32,1)}
}
@keyframes zoomInUp{0%{opacity:0;-webkit-transform:scale3d(.1,.1,.1) translate3d(0,1000px,0);transform:scale3d(.1,.1,.1) translate3d(0,1000px,0);-webkit-animation-timing-function:cubic-bezier(.55,.055,.675,.19);animation-timing-function:cubic-bezier(.55,.055,.675,.19)}
60%{opacity:1;-webkit-transform:scale3d(.475,.475,.475) translate3d(0,-60px,0);transform:scale3d(.475,.475,.475) translate3d(0,-60px,0);-webkit-animation-timing-function:cubic-bezier(.175,.885,.32,1);animation-timing-function:cubic-bezier(.175,.885,.32,1)}
}
.fadeIn{-webkit-animation-name:fadeIn;animation-name:fadeIn;-webkit-animation-duration:1s;animation-duration:1s;-webkit-animation-fill-mode:both;animation-fill-mode:both}
@-webkit-keyframes fadeIn{0%{opacity:0}
100%{opacity:1}
}
@keyframes fadeIn{0%{opacity:0}
100%{opacity:1}
}
/*]]>*/
</style>

3. أبحث عن الرمز </body> ثم أضف الكود التالي فوقه مباشرةً:

<script>
//<![CDATA[
  var appended = false,
  bookmark = document.createElement("div");
  bookmark.id = "fbOnscroll";
  bookmark.innerHTML = '<div class="fbbox-wrapper zoomInUp">\
  <iframe name="f13bea94f064144" width="1000px" height="1000px" frameborder="0" allowtransparency="true" allowfullscreen="true" scrolling="no" title="fb:page Facebook Social Plugin" src="https://www.facebook.com/v2.7/plugins/page.php?adapt_container_width=true&amp;app_id=113869198637480&amp;channel=https%3A%2F%2Fstaticxx.facebook.com%2Fconnect%2Fxd_arbiter%2Fr%2FuN4_cXtJDGb.js%3Fversion%3D42%23cb%3Df19b772d4d20444%26domain%3Ddevelopers.facebook.com%26origin%3Dhttps%253A%252F%252Fdevelopers.facebook.com%252Ff1ba7fe51c4d354%26relation%3Dparent.parent&amp;container_width=613&amp;hide_cover=false&amp;href=https%3A%2F%2Fwww.facebook.com%2Fmdadice&amp;locale=ar_AR&amp;sdk=joey&amp;show_facepile=true&amp;small_header=false" style="border: none; visibility: visible; width: 340px; height: 214px;" class=""></iframe>\
<div class="close-fbcookie" onclick="hidesubscribebox()"><span>&#215;</span>لا تظهر مرة أخرى</div>\
<div class="close-fbbox" onclick="hidesubscribe()">&#215;</div>\
              </div>\
              <div class="layer fadeIn"></div>\
';
function hidesubscribe(){document.getElementById("fbOnscroll").style.display="none"}function hidesubscribebox(){document.getElementById("fbOnscroll").style.display="none",createCookie("hideDialog","hide",7000)}function createCookie(e,o,n){if(n){var t=new Date;t.setTime(t.getTime()+24*n*60*60*1e3);var i="; expires="+t.toGMTString()}else var i="";document.cookie=e+"="+o+i+"; path=/"}function readCookie(e){for(var o=e+"=",n=document.cookie.split(";"),t=0;t<n.length;t++){for(var i=n[t];" "==i.charAt(0);)i=i.substring(1,i.length);if(0==i.indexOf(o))return i.substring(o.length,i.length)}return null}function eraseCookie(e){createCookie(e,"",-1)}onscroll=function(){var e=document.documentElement.scrollTop||document.body.scrollTop;e>800&&(appended||(document.body.appendChild(bookmark),appended=!0),readCookie("hideDialog")&&(document.getElementById("fbOnscroll").style.display="none"))};
//]]>
</script>

4. وأخيرًا غير mdadice بمعرف صفحة مدونتك على فيسبوك.

لمن لديه الخبرة في منصة ووردبريس وغيرها يمكن تضمين هذه الإضافة بإستخدام نفس الأكواد في الأماكن المناسبة.

إذا كنتم بحاجة لمساعدة فلا تترددوا بالطلب في أي وقت كم تسعدنا تعليقاتكم وإقتراحتكم

By mvp

Similiar tagsبلوجر