صندوق فيس بوك منبثق بشكل بسيط وجذاب

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

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

طريقة التركيب :

ضع كود في أي مكان html

<style>#topbar {height:30px;width:auto;background: #404040 url('http://lh3.ggpht.com/_beEpWOXwLJE/TIb57Lu4fwI/AAAAAAAABE0/q7niFVRbyNE/top-toolbar.jpg');background-repeat:repeat-x;text-align:left;padding-top:4px;}#adsground {height:auto;margin:0 auto;width: 336px;background:#fff;border-bottom:2px #404040  solid;border-right:2px #404040  solid;border-left:2px #404040  solid;text-align:Center;padding:4px;}
#headlineatas {opacity:1.0;height:auto;width:auto;position:fixed ;top:65px;left:170px;border-bottom:1px #404040  solid;border-bottom:0px blue solid;color:#333;padding:0px;z-index:1001;font-size:13px;}</style>
<script type="text/javascript">function getValue(){document.getElementById("headlineatas") .style.display = 'none';}</script>
<div id="headlineatas">
<div id="topbar"><img align="left" style="padding-left:2px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh4OKUoD3YNg59F_dfvbhhpVIfhDsqGeiQWDgZtDFg3F5CKbIejMcmimd9ttrTY9QAGcIguRnPrbT7hYusNVLmFpiD2DP9XodBWk3YGEcbHElAtgQWKI71aEE-Dfq9P7kSPnnYxF_Ylq5E/s1600/media-player-windows-icone-7140-32.png" /><span style="color:#fff;font-size:13px;font-weight:bold;text-shadow:black 0.1em 0.1em 0.1em"></span><span style="color:#fff;font-size:13px;font-weight:bold;text-shadow:black 0.1em 0.1em 0.1em;float:right;padding-top:3px;padding-right:10px"> <rel="nofollow" target="_blank" onclick="getValue()"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjEZjiqWLaXsiG_LDRSGn7EzCEt23N0ZhtmKZBH3OgDtWvF76jfZHDa4d_09kJsEnMVmVa6q_I7Rcc3h8w64yt70UbyMGiY3IrRx5EbUMvobetV_5T-1O9e-f8EQm7TivJXmRjOg9IXFeLO/s1600/close.png" /></rel="nofollow"></span></div>
<div id="adsground">
<h3><a href="http://gj37765.blogspot.com/2011/06/how-to-add-google-adsense-pop-up-ads-in.html"> </a></h3>
<p align="left">
</p>
<h3></h3>
<p></p>
[html]<style>#topbar {height:30px;width:auto;background: #404040  url('http://lh3.ggpht.com/_beEpWOXwLJE/TIb57Lu4fwI/AAAAAAAABE0/q7niFVRbyNE/top-toolbar.jpg');background-repeat:repeat-x;text-align:left;padding-top:4px;}#adsground {height:auto;margin:0 auto;width: 336px;background:#fff;border-bottom:2px ##404040  solid;border-right:2px #404040  solid;border-left:2px #404040 solid;text-align:Center;padding:4px;}
#headlineatas {opacity:1.0;height:auto;width:auto;position:fixed ;top:65px;left:170px;border-bottom:1px #404040 solid;border-bottom:0px blue solid;color:#333;padding:0px;z-index:1001;font-size:13px;}</style>
<script type="text/javascript">function getValue(){document.getElementById("headlineatas") .style.display = 'none';}</script>
<div id="headlineatas">
<div id="topbar"><img align="left" style="padding-left:2px;" src="" /><span style="color:#fff;font-size:13px;font-weight:bold;text-shadow:black 0.1em 0.1em 0.1em"></span><span style="color:#fff;font-size:13px;font-weight:bold;text-shadow:black 0.1em 0.1em 0.1em;float:right;padding-top:3px;padding-right:10px"> <rel="nofollow" target="_blank" onclick="getValue()"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEin7S9E1y94-sZB-FWBwUKhXgNl-QxexMeBn5JMeoD1EgAGH7Ftn1tZ6pqLkZkMqF3_6xYoWPdaGtpcXHS7TgjAV3CGYVw97NvcsNONteGwlUWFnrLXHQ312EBeVylKCOShR98rT3c0MY8/s1600/fermer-gtk-icone-4981-16.png" /></rel="nofollow"></span></div>
<div id="adsground">
<h3><a href="http://gj37765.blogspot.com/2011/06/how-to-add-google-adsense-pop-up-ads-in.html">
<p align="left">
<div class="fb-page" data-href="https://www.facebook.com/اسم صفحة" data-width="300" data-height="250" data-hide-cover="false" data-show-facepile="true" data-show-posts="false"></div>
<div id="fb-root"></div>
<script>(function(d, s, id) {
  var js, fjs = d.getElementsByTagName(s)[0];
  if (d.getElementById(id)) return;
  js = d.createElement(s); js.id = id;
  js.src = "//connect.facebook.net/fr_FR/sdk.js#xfbml=1&version=v2.3";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
<p>
<br /></p>
</p></a></h3></div></div> </div></div>