Ίσως ο καλύτερος τρόπος για να ωθήσουμε τους αναγνώστες μας να κάνουν like στην σελίδα μας στο Facebook, είναι τοποθετώντας ένα αναδυόμενο παράθυρο (pop up) όπως το παραπάνω.
Τα περισσότερα όμως που μπορείτε να βρείτε στο διαδίκτυο, εμφανίζονται αμέσως μόλις φορτώνει η σελίδα, χωρίς να έχουν αφήσει τον χρήστη να αποφασίσει αν αυτό που βλέπει του αρέσει. Για αυτόν τον λόγο, σας προτείνουμε το παρακάτω widget το οποίο προκαθορισμένα εμφανίζεται μετά από 20 δευτερόλεπτα (κάτι που μπορεί να αλλάξει), αφήνοντας έτσι τον χρήστη να πάρει μια γεύση από το blog σας.
Δείτε παρακάτω ποιες είναι οι παραμετροποιήσεις που μπορούμε να κάνουμε:
- χρονοκαθηστέριση στην εμφάνιση του
- δυνατότητα εμφάνισης μόνο στην αρχική σελίδα
- όμορφο εφέ εμφάνισης και σβησίματος
Πώς το εφαρμόζουμε
Δημιουργήστε ένα νέο HTML gadget, ακολουθώντας την διαδρομή:
Blogger » Διάταξη » Προσθήκη gadget » HTML/JavaScript
Και μέσα στο gadet επικολλήστε τον παρακάτω κώδικα
<!-- Facebook Popup Widget START --><!-- Brought to you by www.MorganAndMen.com - www.TheBlogWidgets.com - www.TricksforGreeks.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(http://3.bp.blogspot.com/-NRmqfyLwBHY/T4nwHOrPSzI/AAAAAAAAAdQ/8b9O7O1q3c8/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/tricksforgreeks&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://morganandmen.com">Morgan&Men SEO Consulting</a> - <a href=http://www.tricksforgreeks.com/2014/03/facebook-pop-up-blogger.html">Αποκτήστε αυτό το Widget</a></span></center>
</div>
</div>
<!-- Facebook Popup Widget END. Brought to you by www.MorganAndMen.com - www.TheBlogWidgets.com - www.TricksforGreeks.com -->
Μην αποθηκεύσετε ακόμη, πρέπει να κάνετε μερικές αλλαγές οι οποίες αναφέρονται αναλυτικά παρακάτω:
Παραμετροποιήσεις
►Εισάγετε την διεύθυνση της σελίδας σας στο Facebook
Βρείτε και αντικαταστήστε τον παρακάτω σύνδεσμο με τον σύνδεσμο της σελίδας σας στο Facebook:
http://www.facebook.com/tricksforgreeks
►Δευτερόλεπτα χρονοκαθυστέρησης
Ο προκαθορισμένος χρόνος πριν εμφανιστεί το widget έχει οριστεί στα 20 δευτερόλεπτα. Αν θέλετε μπορείτε να το αλλάξετε, βρίσκοντας και αλλάζοντας την τιμή στην παρακάτω μεταβλητή:
(σημείωση: ο χρόνος μετριέται σε miliseconds. άρα 1 δευτερόλεπτο = 1000ms κλπ)
.delay(20000)
►Εμφάνιση του παραθύρου κάθε φορά που φορτώνει η σελίδα
Το widget είναι ρυθμισμένο να εμφανίζεται σε κάθε επισκέπτη μια φορά την εβδομάδα. Αν θέλετε να εμφανίζεται κάθε φορά που φορτώνει η αρχική σελίδα σας, τότε βρείτε και διαγράψτε τον παρακάτω κώδικα:
$.cookie('popup_user_login', 'yes', { path: '/', expires: 7 });
►Εμφάνιση μόνο στην αρχική σελίδα
Για να κάνετε το widget να εμφανίζεται μόνο στην αρχική σελίδα και όχι στα άρθρα σας, τότε πρέπει να τον περιλάβετε μέσα στον παρακάτω κώδικα:
<b:if cond='data:page.type == "index"'> !! Κάντε επικόλληση όλον τον παραπάνω κώδικα εδώ !! </b:if>
Δεν εμφανίζεται το παράθυρο;
Προκαθορισμένα, το παράθυρο θα εμφανιστεί μια φορά και σε εσάς, όπως και στους υπόλοιπους επισκέπτες του blog σας. Αν επιθυμείτε να εμφανιστεί ξανά διαγράψτε τα cookies του browser σας ή ανοίξτε το blog σας από ένα παράθυρο ανώνυμης περιήγησης.
Επίλογος
Ευχαριστούμε πολύ το blog www.theblogwidgets.com για τον κώδικα και το αρχικό άρθρο.
Περιμένω σε σχόλια ότι προβλήματα μπορεί να έχετε. Ένα ζωντανό παράδειγμα του παραπάνω widget είναι αυτό που χρησιμοποιούμε και στο δικό μας blog.
soniandmalvina Καλησπέρα! Ακριβώς στο ίδιο σημείο, στα gadgets. Απλά αντί να έχεις το πρώτο μεγάλο κομμάτι κώδικα μόνο του, θα βάλεις ακριβώς στην αρχή το:
<b:if cond=’data:page.type == “index”‘>
και ακριβώς στο τέλος το:
</b:if>
Γειας σας, έκανα όλα τα βηματα και ειναι σουπερ το αποτελεσμα, το μονο πρόβλημα είναι οτι δεν μπορώ να καταλάβω σε ποιο σημεία του κώδικα ακριβώς να βάλω το τελευταιο κομμάτι για να εμφανίζεται μία φόρα στην αρχική σελίδα το likebox