Εισαγωγή Facebook και Twitter buttons

Share

Σε πολλές σελίδες θα έχετε δει στο δεξί μέρος κάποια κουμπάκια με σύνδεσμο προς το facebook, το twitter account κτλπ. Τα κουμπιά αυτά μένουν στο ίδιο σημείο, ακόμα κι αν «σκρολάρουμε» προς τα κάτω. Πόσο εύκολο είναι να γίνουν; Πολύ! Απλά ακολουθήστε το παρακάτω βοήθημα, καθώς και την επεξήγηση του.

Τα κουμπιά αυτά δεν είναι παρά divs (divisions) τα οποία τα τοποθετούμε με «απόλυτο» τρόπο (absolute positioning divs) στο δεξί άκρο του container της σελίδας. Η σύνταξη είναι ως εξής:

<div><a target="_blank" href="http://www.facebook.com/profile.php?id=12345">
<img alt="" style="border-width: 0px; border-style: solid;" src="PATH/images/facebook.png" />
</a></div>

Ο κώδικας

<a target … >

δημιουργεί τον υπερσύνδεσμο (hyperlink) προς τον ιστότοπο που θέλουμε, δηλ. στην περίπτωση μας την σελίδα fan page του facebook ή εναλλακτικά του προφίλ. Μετά εισάγουμε την εικόνα που θα εμφανιστεί, δηλώνοντας το σωστό απόλυτο path.

Το div αυτό όμως πρέπει να τοποθετηθεί με fixed τρόπο, να ορίσουμε το z-index ένα μεγάλο νούμερο ώστε να τοποθετηθεί πάνω από όλα τα elements της σελίδας, να ορίσουμε ύψος (height) και πλάτος (width) και τέλος την θέση: 0px από δεξιά (right), και Χ από πάνω (top). Δηλ:

position: fixed; 
z-index: 999; //ώστε να εμφανίζεται πάνω από όλα τα στοιχεία της σελίδας
width: 40px; //πλάτος ίσο με το πλάτος της εικόνας facebook.png
height: 128px;//ομοίως
right: 0px; //Το τοποθετούμε στο δεξί μέρος της σελίδας
top: 230px;//και 230px από πάνω

Ολοκληρωμένος ο κώδικας:

<div style="position: fixed; z-index: 999; width: 40px; height: 128px; right: 0px; top: 230px;">
<a target="_blank" href="http://www.facebook.com/profile.php?id=12345">
<img alt="" style="border-width: 0px; border-style: solid;" src="PATH/images/facebook.png" />
</a></div>

Ομοίως μπορούμε να τοποθετήσουμε στην σελίδα μας και κουμπί για το twitter, όπως φαίνεται και στο demo μας, με την μόνη διαφορά ότι το top θα είναι 365px.

Σημειώσεις:

• Το σημείο (target=”_blank”) είναι προαιρετικό και σημαίνει να ανοίξει ο υπερσύνδεσμος σε νέα καρτέλα/παράθυρο.
• Εάν χρησιμοποιείται Joomla! ή WordPress ο κώδικας θα πρέπει να τοποθετηθεί στο header.php. Σε απλό html template, αρκεί o κώδικας μας να είναι έξω από το container div.

Για οποιαδήποτε απορία μην διστάσετε να αφήσετε σχόλιο. Καλή επιτυχία!