skip to main content

15 ΜΑΡ 2013

Like, Tweet, Google plus, όλα στοιχισμένα σε μια σειρά!

Tags: social media buttons, facebook like, google plus, tweeter, css

γράφει ο Αχιλλέας Μαρούλης
Προσπαθήσατε ποτέ να βάλετε στη σελίδα σας συνεχόμενα, το ένα δίπλα στο άλλο, τα buttons των facebook, twitter και google plus; Αν ναι, θα αντιμετωπίσατε σίγουρα το ίδιο περίεργο πρόβλημα που αντιμετωπίσαμε και εμείς… Δεν στοιχίζονται με τίποτα!

Κατ’ αρχάς τα τρία γραφικά έχουν διαφορετική αισθητική, ενώ τα δύο από αυτά (facebook και twitter) έχουν διαφορετικές αποχρώσεις του ίδιου χρώματος (μπλε). Αυτό τα κάνει ήδη αταίριαστα μεταξύ τους, ειδικά όταν η σελίδα έχει ήδη διαφορετικά χρώματα. Οπότε το να αφήσουμε τα buttons αυτά άσχημα χρωματισμένα αλλά και στοιχημένα… θα πήγαινε πολύ.

Πριν προχωρήσουμε στην επίλυση, ασχοληθήκαμε με το να βρούμε άλλες εναλλακτικές. 
Για παράδειγμα, σκεφτήκαμε να μη βάλουμε τα εικονίδια που δίνουν επίσημα οι providers αλλά να χρησιμοποιήσουμε δικά μας (όπως αυτά που βλέπετε πάνω-πάνω δεξιά). Δύσκολο… Θα έπρεπε να χρησιμοποιήσουμε μόνο τις επιλογές τύπου share (ή αλλιώς send) και όχι το like. Αυτό γιατί η ενέργεια like λειτουργεί με ένα κλικ μόνο αν προέρχεται από κώδικα του facebook (τουλάχιστον όπως θέλουμε να τη χρησιμοποιήσουμε στη σελίδα μας). Αντίθετα, οι επιλογές τύπου share, μπορούν να πυροδοτηθούν και από δικό μας κώδικα καθώς πριν από τη δημοσίευση του κάθε share, παρεμβαίνει σελίδα του facebook που ελέγχει ό, τι πρέπει να ελέγξει.

Θα μπορούσαμε να χρησιμοποιήσουμε έτοιμο κώδικα, όπως το addthis. Και αυτό όμως είχε προβλήματα. Το addhis σου δίνει είτε όμορφα γραφικά τύπου share, είτε σου δίνει γραφικά τύπου like τα οποία όμως και πάλι.. δεν στοιχίζονται σωστά.

Αλήθεια, τι πρόβλημα έχουμε με του τύπου share buttons; Το μόνο πρόβλημα είναι πως δεν είναι άμεσα! Θέλουμε κάτι που να μπορεί ο χρήστης  να «πατήσει» ανέμελα… Ένα like δηλαδή και συνεχίζουμε.. Όχι κάτι που τον αποσπάσει από την ανάγνωση ή που θα τον στείλει σε άλλη σελίδα. Επίσης, θα πρέπει να είναι κάτι άμεσο…  Το πάτησε και τελείωσε… Όχι να πρέπει να δικαιολογήσει γιατί το έκανε share, γράφοντας συνοδευτικά κείμενα ή να πρέπει ουσιαστικά να συνυπογράψει το κάθε έγγραφο…  Το like, είναι πολύ πιο απλό, άμεσο, ίσως και αδιάφορο, από το βαρύ share…

Στη συνέχεια ξεκινήσαμε να κάνουμε το (τεχνικά) αυτονόητο.. .να βάλουμε ένα absolute positioned γραφικό μπροστά από το αυτόματο like του facebook έτσι ώστε να το απέκρυπτε αλλά δεν θα ήταν σωστό… Απαγορεύεται από το facebook: (http://developers.facebook.com/policy/#integration παράγραφος IV.4.d.: You must not obscure or cover elements of our social plugins, such as the Like button or Like box plugin. Θα μου πεις.. μα άλλοι το κάνουν… και το φωνάζουν κιόλας (πχ https://www.inboundnow.com/apps/facebook-like-button-generator/). Όχι όμως… αν απαγορεύεται δεν θα το κάνουμε.

Και καταλήγουμε στη λύση. Μετά από όλη αυτή την εισαγωγή θα περίμενε κανείς πως θα είναι κάτι πολύπλοκο και δύσκολο… Όχι όμως…

Η προτεινόμενη λύση είναι να βάλουμε όλα τα γραφικά σε μια λίστα και να χρησιμοποιήσουμε διαφορετικές αποστάσεις…

Έχουμε δηλαδή τον κώδικα της html κάπως έτσι:
  • [google plus code]
  • [facebook code]
  • [twitter code]
Για καλύτερη διαχείριση δίνουμε διαφορετικά classes, πχ:
  • [google plus code]
Προσθέτουμε τον κώδικα του κάθε provider όπως το επιθυμεί ο καθένας (facebook, twitter, google plus) τόσο στο σημείο που θέλουμε να εμφανίζονται τα buttons όσο και πριν το /body για τα scripts.

Αυτό μας παρουσίασε τη σελίδα κάπως έτσι:
 

Οπότε, δουλέψαμε λίγο το css… 
/* και απλώς δημιουργούμε λίγο κενό πάνω από τα δύο προβληματικά buttons 
ή, καλύτερα, από τα δύο μη προβληματικά buttons, για να ισιώσουν με το περίεργο */
ul.socialWrap li.twitter {padding-top:2px;}
ul.socialWrap li.plusone {padding-top:2px;}

Οπότε η σελίδα γίνεται κάπως έτσι: 


Και ιδού το αποτέλεσμα…


Δεν ήταν τόσο δύσκολο… Ήταν απλώς εκνευριστικό! Τουλάχιστον το αποτέλεσμα φαίνεται ικανοποιητικό. Και ακόμη πιο ικανοποιητικό αν το κάνετε
!!!

karsiyaka escort avcılar escort ataköy escort bahçeşehir escort esenyurt escort