Facebook Layer/Popup für deinen Blog

Hier haben wir ein gutes Gadget, um Facebook-Likes für Ihren Blog oder Website zu erhöhen. Fügen Sie dieses Widget ihrem Blog hinzu und eine Facebook Like Box öffnet sich mit dem Lightbox-Effekt, jedes mal wenn ein Benutzer Ihre Seite besucht. Das Facebook-Widget erscheint auf Ihrer Seite etwa 20 Sekunden nach dem Laden der Seite (kann aber angepasst werden).

Widget hinzufügen

Fügen Sie den folgenden Code im Body Abschnitt Ihrer Vorlage (HTML bearbeiten) ein. 

 <!-- Facebook Popup Widget START --><!-- Brought to you by www.blogratgeber.com --> <script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js' type='text/javascript'></script> <style> #fanback { display:none; background:rgba(0,0,0,0.8); width:100%; height:100%; position:fixed; top:0; left:0; z-index:99999; } #fan-exit { width:100%; height:100%; } #MorganAndMen { background:white; width:420px; height:270px; position:absolute; top:58%; left:63%; margin:-220px 0 0 -375px; -webkit-box-shadow: inset 0 0 50px 0 #939393; -moz-box-shadow: inset 0 0 50px 0 #939393; box-shadow: inset 0 0 50px 0 #939393; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; margin: -220px 0 0 -375px; } #TheBlogWidgets { float:right; cursor:pointer; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhku3OjO636EiuAQ34sO6WsZhmGJJDCOlC0I1J7ojgnTFZOc4sWYsr2VQ6PHrBJq_G8pCHvMjeX6dkV6ddKXvnmgBjE-k7tDEWoDXJ5wRBZIpBqWbBe-BBj5soGDtK-VD2HBXGJw414P1RO/s1600/TheBlogWidgets.png) repeat; height:15px; padding:20px; position:relative; padding-right:40px; margin-top:-20px; margin-right:-22px; } .remove-borda { height:1px; width:366px; margin:0 auto; background:#F3F3F3; margin-top:16px; position:relative; margin-left:20px; } #linkit,#linkit a.visited,#linkit a,#linkit a:hover { color:#80808B; font-size:10px; margin: 0 auto 5px auto; float:center; } </style> <script type='text/javascript'> //<![CDATA[ jQuery.cookie = function (key, value, options) { // key and at least value given, set cookie... if (arguments.length > 1 && String(value) !== "[object Object]") { options = jQuery.extend({}, options); if (value === null || value === undefined) { options.expires = -1; } if (typeof options.expires === 'number') { var days = options.expires, t = options.expires = new Date(); t.setDate(t.getDate() + days); } value = String(value); return (document.cookie = [ encodeURIComponent(key), '=', options.raw ? value : encodeURIComponent(value), options.expires ? '; expires=' + options.expires.toUTCString() : '', // use expires attribute, max-age is not supported by IE options.path ? '; path=' + options.path : '', options.domain ? '; domain=' + options.domain : '', options.secure ? '; secure' : '' ].join('')); } // key and possibly options given, get cookie... options = value || {}; var result, decode = options.raw ? function (s) { return s; } : decodeURIComponent; return (result = new RegExp('(?:^|; )' + encodeURIComponent(key) + '=([^;]*)').exec(document.cookie)) ? decode(result[1]) : null; }; //]]> </script> <script type='text/javascript'> jQuery(document).ready(function($){ if($.cookie('popup_user_login') != 'yes'){ $('#fanback').delay(20000).fadeIn('medium'); $('#TheBlogWidgets, #fan-exit').click(function(){ $('#fanback').stop().fadeOut('medium'); }); } $.cookie('popup_user_login', 'yes', { path: '/', expires: 7 }); }); </script> <div id='fanback'> <div id='fan-exit'> </div> <div id='MorganAndMen'> <div id='TheBlogWidgets'> </div> <div class='remove-borda'> </div> <iframe allowtransparency='true' frameborder='0' scrolling='no' src='//www.facebook.com/plugins/likebox.php? href=http://www.facebook.com/blogratgeber&width=402&height=255&colorscheme=light&show_faces=true&show_border=false&stream=false&header=false' style='border: none; overflow: hidden; margin-top: -19px; width: 402px; height: 230px;'></iframe><center> <span id="linkit">Powered by <a href="http://www.blogratgeber.com.com">Blogratgeber</a> </span></center> </div> </div> <!-- Facebook Popup Widget END. Brought to you by www.blogratgeber.com -->

<!-- Facebook Popup Widget START --><!-- Brought to you by www.MorganAndMen.com - www.TheBlogWidgets.com --><script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js' type='text/javascript'></script> <style> #fanback { display:none; background:rgba(0,0,0,0.8); width:100%; height:100%; position:fixed; top:0; left:0; z-index:99999; } #fan-exit { width:100%; height:100%; } #MorganAndMen { background:white; width:420px; height:270px; position:absolute; top:58%; left:63%; margin:-220px 0 0 -375px; -webkit-box-shadow: inset 0 0 50px 0 #939393; -moz-box-shadow: inset 0 0 50px 0 #939393; box-shadow: inset 0 0 50px 0 #939393; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; margin: -220px 0 0 -375px; } #TheBlogWidgets { float:right; cursor:pointer; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhku3OjO636EiuAQ34sO6WsZhmGJJDCOlC0I1J7ojgnTFZOc4sWYsr2VQ6PHrBJq_G8pCHvMjeX6dkV6ddKXvnmgBjE-k7tDEWoDXJ5wRBZIpBqWbBe-BBj5soGDtK-VD2HBXGJw414P1RO/s1600/TheBlogWidgets.png) repeat; height:15px; padding:20px; position:relative; padding-right:40px; margin-top:-20px; margin-right:-22px; } .remove-borda { height:1px; width:366px; margin:0 auto; background:#F3F3F3; margin-top:16px; position:relative; margin-left:20px; } #linkit,#linkit a.visited,#linkit a,#linkit a:hover { color:#80808B; font-size:10px; margin: 0 auto 5px auto; float:center; } </style> <script type='text/javascript'> //<![CDATA[ jQuery.cookie = function (key, value, options) { // key and at least value given, set cookie... if (arguments.length > 1 && String(value) !== "[object Object]") { options = jQuery.extend({}, options); if (value === null || value === undefined) { options.expires = -1; } if (typeof options.expires === 'number') { var days = options.expires, t = options.expires = new Date(); t.setDate(t.getDate() + days); } value = String(value); return (document.cookie = [ encodeURIComponent(key), '=', options.raw ? value : encodeURIComponent(value), options.expires ? '; expires=' + options.expires.toUTCString() : '', // use expires attribute, max-age is not supported by IE options.path ? '; path=' + options.path : '', options.domain ? '; domain=' + options.domain : '', options.secure ? '; secure' : '' ].join('')); } // key and possibly options given, get cookie... options = value || {}; var result, decode = options.raw ? function (s) { return s; } : decodeURIComponent; return (result = new RegExp('(?:^|; )' + encodeURIComponent(key) + '=([^;]*)').exec(document.cookie)) ? decode(result[1]) : null; }; //]]> </script> <script type='text/javascript'> jQuery(document).ready(function($){ if($.cookie('popup_user_login') != 'yes'){ $('#fanback').delay(20000).fadeIn('medium'); $('#TheBlogWidgets, #fan-exit').click(function(){ $('#fanback').stop().fadeOut('medium'); }); } $.cookie('popup_user_login', 'yes', { path: '/', expires: 7 }); }); </script> <div id='fanback'> <div id='fan-exit'> </div> <div id='MorganAndMen'> <div id='TheBlogWidgets'> </div> <div class='remove-borda'> </div> <iframe allowtransparency='true' frameborder='0' scrolling='no' src='//www.facebook.com/plugins/likebox.php? href=http://www.facebook.com/theblogwidgets&width=402&height=255&colorscheme=light&show_faces=true&show_border=false&stream=false&header=false' style='border: none; overflow: hidden; margin-top: -19px; width: 402px; height: 230px;'></iframe><center> <span id="linkit">Powered by <a href="http://www.blogratgeber.com/">Blogratgeber</a></span></center> </div> </div> <!-- Facebook Popup Widget END. Brought to you by www.blogratgeber.com --> 

Widget anpassen

Geben Sie Ihren Benutzernamen ein

Suchen Sie http://www.facebook.com/blogratgeber und ersetzen sie blogratgeber durch ihre Facebook-Seiten URL.

Ändern Sie den 20 Sekunden Countdown

Standardmäßig erscheint das Widget 20 Sekunden land nach dem die Seite vollständig geladen ist. Suchen sie im Code nach .delay(20000) und ändern Sie die Zahl 20000 zu einer ihrer Wahl.
1 Sekunde = 1000. 10 Sekunden = 10000. 60 Sekunden = 60000.

Widget hinzufügen 

Popup bei jedem Laden der Seite

Standardmäßig zeigt sich das Widget nur beim ersten Mal an wenn der User Ihre Seite besucht und das auch nur alle 30 Tage, da Cookies verwendet werden. Wenn Sie wollen, das die Facebook-Box, jedes Mal angezeigt wird wenn die Seite geladen wird, dann entfernen Sie diese Codezeile:

$.cookie('popup_user_login', 'yes', { path: '/', expires: 7 });

Probleme mit dem Facebook-Widget?

Möglicherweise müssen Sie Ihre Cookies löschen um das Widget zu sehen. Oder schauen Sie sich den Abschnitt "Widget anpassen" an. Wenn Sie immer noch Probleme mit dem Popup-Widget haben, hinterlassen Sie bitte einen Kommentar unten oder schreiben Sie mir hier. Ich helfe ihnen gerne dabei das Popup richtig einzubinden.