Δευτέρα, 16 Δεκεμβρίου 2013

Πώς θα προσθέσω το gadget του facebook σε blog με δυναμική προβολή

Κοινοποιήστε Share to Facebook Share to Twitter Email This
δυναμική προβολή blogger- facebook gadget

Σας έχω ήδη δείξει πώς να τοποθετήσετε το gadget της σελίδας σας του facebook στο blog σας. Αυτός ο τρόπος ισχύει μόνο στις απλές προβολές του blogger. Τι συμβαίνει όμως όταν χρησιμοποιείτε τις πιο μοντέρνες και μινιμαλιστικές δυναμικές προβολές; Σε αυτή την περίπτωση, είναι πολλά τα gadget που δε θα μπορέσετε να τοποθετήσετε στο blog σας, γιατί η όλη ιδέα της δυναμικής προβολής σχετίζεται με την απλότητα και τη χρηστικότητα.
Οπότε αν έχετε γενικά τη διάθεση να παίζετε συχνά με την εμφάνιση του blog σας,  μην προτιμήσετε τις δυναμικές προβολές. Αυτές προορίζονται για bloggers που ανανεώνουν πολύ συχνά το περιεχόμενό τους, και δεν τους αρέσουν τα πολλά-πολλά μπιχλιμπίδια!
Θα σας δείξω πολύ σύντομα πώς να προσθέσετε το gadget της σελίδας σας του FB στις δυναμικές προβολές.

Επειδή θα πειράξουμε τον κώδικα html δημιουργούμε πρώτα ένα αντίγραφο ασφαλείας.
Από τον Πίνακα Ελέγχου μας, πηγαίνουμε Πρότυπο→Επεξεργασία HTML.
Κάνουμε κλικ μέσα στο κείμενο του κώδικα και πληκτρολογούμε CTRL+F για να κάνουμε αναζήτηση στον κώδικα. Μέσα στο πεδίο που θα εμφανιστεί πληκτρολογούμε
/body
για να βρούμε το συγκεκριμένο κείμενο.
Ακριβώς επάνω από το /body, κάνουμε επικόλληση τον παρακάτω κώδικα (δείτε την παρακάτω εικόνα)

<script language='javascript' type='text/javascript'>
$(document).ready(function() {
  var addfbbox = function() {
    $(&quot;#search&quot;).before(&quot;<span style='height: 62px; padding: 0; margin 0; position: absolute; top: 0px; right: 150px;'><iframe allowTransparency='true' frameborder='0' scrolling='no' src='//www.facebook.com/plugins/likebox.php?href=https://www.facebook.com/pages/%CE%A7%CF%89%CF%81%CE%AF%CF%82-%CE%95%CE%B9%CF%81%CE%BC%CF%8C/134573476718596&amp;width=250&amp;height=62&amp;show_faces=false&amp;colorscheme=light&amp;stream=false&amp;border_color&amp;header=false&amp;appId=621795247847650' style='border:none; overflow:hidden; width:250px; height:62px;'/></span>&quot;);
  };
  var checkSearchBar = function() {
    if ($(&#39;#search&#39;).length &gt; 0) {
      addfbbox();
    } else {
      setTimeout(checkSearchBar, 100);
    }
  };
  checkSearchBar();
});
</script>























Όλα τα παραπάνω βήματα φαίνονται και στην εικόνα. Το μόνο που πρέπει να κάνετε είναι να αντικαταστήσετε το κείμενο που έχω επισημάνει με πράσινο (στην εικόνα), με τη διεύθυνση url της σελίδας σας στο facebook. 

Προσοχή: μη διαγράψετε ούτε το "=" στην αρχή, και ούτε έναν χαρακτήρα περισσότερο μετά το "6" και μην αφήσετε καθόλου κενά.

Υπενθύμιση: Για να βρείτε τη διεύθυνση url της σελίδας σας, επισκεφθείτε κανονικά τη συγκεκριμένη σελίδα και αντιγράψτε τη διεύθυνσή της, από τη γραμμή διευθύνσεων του περιηγητή σας. Μετά επικολλήστε την στη θέση του πρασινισμένου κώδικα.

Τέλος, κάνουμε Αποθήκευση προτύπου και είναι όλα έτοιμα.

Καλή επιτυχία!

10 σχόλια:

  1. Ο κώδικας δεν είναι ο ίδιος με την εικόνα. το &amp δεν υπάρχει. Παρακαλώ έως ποιό σημείο να αντικαταστήσουμε?

    ΑπάντησηΔιαγραφή
    Απαντήσεις
    1. Φαίη, έχεις δίκιο, ευχαριστώ που το πρόσεξες. Δυστυχώς, ο blogger μεταφράζει κάποια στοιχεία του κώδικα και δεν τα δείχνει ακριβώς όπως είναι. Το σωστό είναι στην εικόνα. Θα προσπαθήσω να το διορθώσω, αλλά μπορείς να το αντιγράψεις και χειροκίνητα, αρκεί να είσαι προσεκτική.

      Διαγραφή
    2. Ok, το διόρθωσα, τώρα φαίνεται κανονικά και το τμήμα που πρέπει να αντικαταστήσετε.

      Διαγραφή
    3. Είσαι φοβερή!!! Από εχθές παιδεύομαι με αυτό το πράγμα και είσαι η μόνη που μου έδωσες τις σωστές οδηγίες! Ευχαριστώ πάρα πολύ για όλα. Keep in touch!

      Διαγραφή
    4. Φαίη μου, χαίρομαι πολύ που σε βοήθησα! Φιλάκια!

      Διαγραφή
  2. Ευχαριστούμε πολύ , Λίνα μου !!!! Καλή σου μέρα !!!!!!

    ΑπάντησηΔιαγραφή
  3. Αυτό το σχόλιο αφαιρέθηκε από τον συντάκτη.

    ΑπάντησηΔιαγραφή
  4. Καλορίζικο λοιπόν και το δεύτερο blog και σε ευχαριστούμε πολύ που μοιράζεσαι τις γνώσεις σου μαζί μας. Καλό σου καλοκαίρι με φιλιά!!!

    ΑπάντησηΔιαγραφή
  5. Μπράβο Λίνα!!!!!!
    Σε διαβάζω προσεκτικά και προσπαθώ να τα καταλάβω όλα!!!!
    Έχω κάνει σημαντική πρόοδο χάρη σε σένα!!!!
    Φιλάκια πολλά

    ΑπάντησηΔιαγραφή
  6. Καλή αρχή εύχομαι, πολλές πολλές αναρτήσεις και ακόμα περισσότερες προβολές στο τόσο χρήσιμο και όμορφο μπλογκοσπιτάκι σου Λίνα!!! Θα σε παρακολουθώ ανελλιπώς!!

    ΑπάντησηΔιαγραφή