Blogger Tips – Tricks – Gadgets – Templates – Hacks

Δημιουργία και προσθήκη φόρμας επικοινωνίας (contact form) στο blog σας βήμα-βήμα



Print Friendly and PDFPrintPrint Friendly and PDFPDF


Καλησπέρα στους αναγνώστες του bloggertips.gr

Σήμερα θα δούμε πως μπορείτε να δημιουργήσετε και να προσθέσετε μια φόρμα επικοινωνίας (contact form) στο blog σας.



Υπάρχουν πολλές ιστοσελίδες που επιτελούν αυτή τη λειτουργία.

Εμείς θα χρησιμοποιήσουμε τη σελίδα emailmeform.com, η οποία είναι μία από τις καλύτερες, πλην δυσκολότερες στο είδος της.

Ένα παράδειγμα για το πως θα δείχνει η φόρμα επικοινωνίας που θα προσθέσετε μπορείτε να δείτε στο Web in Greece, blog παρουσιάσεων ιστοσελίδων (ανοίγει σε νέα καρτέλα!).


Δημιουργία Φόρμας Επικοινωνίας:



1. Μπαίνουμε στην αρχική σελίδα του EmailMeForm.

Πρέπει να κάνουμε εγγραφή για να συνεχίσουμε, οπότε κάνουμε κλικ στο:



2. Στη σελίδα που θα μας εμφανιστεί, συμπληρώνουμε τα στοιχεία που ζητάει και κάνουμε κλικ στο “I agree to EmailMeForm Terms of Service”.




3. Αφού κάνουμε τα παραπάνω, κάνουμε κλικ στο:



4. Λογικά θα μας εμφανιστεί η παρακάτω σελίδα, η οποία μας ευχαριστεί και μας λέει να τσεκάρουμε το e-mail μας για να ενεργοποιήσουμε το λογαριασμό μας.




5. Συνδεόμαστε στο e-mail μας, ανοίγουμε το μήνυμα από το EmailMeForm (ψάξτε στα ανεπιθύμητα/spam αν δεν το δείτε στα εισερχόμενα) και κάνουμε κλικ στο μοναδικό link που περιέχεται στο μήνυμα, το οποίο θα μοιάζει με αυτό:

http://www.emailmeform.com/builder/account/signup_confirm/1fd9FiR7heLaopk6bZDY93raySE73n4Wc



6. Αφού κάνουμε κλικ στο link που είπαμε παραπάνω, η σελίδα που θα εμφανιστεί μας λέει πως έγινε η ενεργοποίηση του λογαριασμού μας. Επιπλέον, στο μήνυμα που θα εμφανιστεί λέει “Please click here to go into your Form Manager”. Κάνουμε κλικ στο “here” και συνεχίζουμε.




7. Στη σελίδα που θα εμφανιστεί, κάνουμε κλικ στο: και στη συνέχεια κάνουμε κλικ στην πρώτη επιλογή “Go to the Template section. I’d like to choose from a list of pre-made forms” για να διαλέξουμε μια φόρμα από τις ήδη υπάρχουσες.



8. Από το μενού αριστερά, φροντίζουμε να είναι επιλεγμένο το “Contact Form” και πατάμε:




9. Λογικά εμφανίζεται το παρακάτω παράθυρο:




10. Ήρθε η ώρα να προσαρμόσουμε τη φόρμα επικοινωνίας στα δεδομένα μας:



Είμαστε στο Form Settings και επεξεργαζόμαστε την αριστερή στήλη:



Form Title: Ο τίτλος, το όνομα της φόρμας μας. Μπορείτε π.χ. να την ονομάσετε “Επικοινωνία”, “Contact” ή ό,τι άλλο θέλετε. Αν δε θέλετε να εμφανίζεται τίτλος, απλά “ξετικάρετε” το “show on form”.

Description: Μια περιγραφή για τη φόρμα σας όπως “Συμπληρώστε τα παρακάτω πεδία για να έρθετε σε επαφή μαζί μου” κ.ο.κ. Αν δε θέλετε να προσθέσετε περιγραφή, αφήνετε το πεδίο κενό.

Time Zone: Είναι η ζώνη ώρας (για να βλέπετε τη σωστή ώρα όταν έρχεται κάποιο e-mail). Επιλέγετε το “(+2:00) Eastern Europe, Harare,… κλπ”. Αν ζείτε σε κάποια άλλη χώρα επιλέγετε την κατάλληλη ζώνη ώρας.

Confirmation Options: Αυτό είναι το τι θα εμφανιστεί σε αυτόν που θα επικοινωνήσει μαζί σας αφού στείλει το μήνυμα που θέλει. Αν επιλέξετε “Show Text”, πατάτε “Edit Text” και μπορείτε να γράψετε κάτι σαν “Ευχαριστώ που επικοινώνησες μαζί μου”. Αν επιλέξετε “Redirect URL”, όταν κάποιος σας στέλνει μήνυμα, μετά θα οδηγείται στη διεύθυνση που θέτετε εσείς (μπορείτε να βάλετε την αρχική σελίδα του blog σας).

Label Placement: Είναι η στοίχιση των τίτλων των πεδίων σε σχέση με τα πεδία. Αν το αφήσετε όπως είναι προεπιλεγμένο, εμφανίζει τον τίτλο του πεδίου και από κάτω το πεδίο. Αν επιλέξετε “Left Aligned”, θα εμφανίζεται δίπλα στο πεδίο ο τίτλος του στοιχισμένος αριστερά, ενώ αν επιλέξετε “Right Aligned”, θα εμφανίζεται δίπλα στο πεδίο ο τίτλος του στοιχισμένος δεξιά.

Styling Options: Από εδώ αλλάζουμε γραμματοσειρά, χρώματα (καλύτερα να μην πειράξουμε τα υπόλοιπα).

Form Width: Το πλάτος της φόρμας, καλύτερα να το αφήσουμε και αυτό κενό.

Send Button Name: Το όνομα του πλήκτρου που θα πατάνε οι αναγνώστες για να επικοινωνήσουν μαζί μας. Παραδείγματα: Send, Submit, Αποστολή, Υποβολή κ.ά.

Send Button alignment: Που θέλετε να εμφανίζετε το “Send Button”; Αριστερά (left), στη μέση (middle) ή δεξιά (right);

Anti Spam: Αν είστε ένα αρκετά δημοφιλές blog, συστήνω να επιλέξετε το “Show CAPTCHA Image Verification” ή “Show reCAPTCHA Verification” (καλύτερα το δεύτερο) για να αποφύγετε τα ανεπιθύμητα email (spam emails). Από την άλλη, αν δεν είστε ιδιαίτερα γνωστός/γνωστή στο χώρο του blogging, επιλέγετε “None” (αν παρατηρήσετε πως γεμίζετε spam emails, έχετε τη δυνατότητα να αλλάξετε τη ρύθμιση αργότερα).





Τελειώσαμε με το “Form Settings”, πάμε τώρα στο “Field Settings”, όπου, για να επεξεργαστούμε ένα πεδίο, κάνουμε απλά ένα αριστερό κλικ πάνω του. Οι ρυθμίσεις για τα πεδία είναι, σε γενικές γραμμές, οι ίδιες:




Field Label: Το όνομα του πεδίου.

Options: Επιλέξτε “Required” αν θέλετε να συμπληρωθεί οπωσδήποτε το πεδίο (θα εμφανιστεί και ένας αστερίσκος δίπλα του), ενώ το “Mask Field” είναι για να μην έχετε τη δυνατότητα να βλέπετε αυτό που πληκτρολόγησε αυτός που επικοινώνησε μαζί σας (συνιστάται πάντως να μην το επιλέγετε).

Show Field to: Everyone!

Cell Align: Η στοίχιση του πεδίου. Αριστερή (left), κέντρο (center) ή δεξιά (right).

Field Size: Το μέγεθος του πεδίου. Το 30 είναι μια καλή τιμή για τα πεδία “Name, Subject, Email” αλλά όχι και για το “Message”, για το οποίο υπάρχει έτοιμη, προεπιλεγμένη ρύθμιση.

Range: Από εδώ επιλέγετε να θέσετε περιορισμό για το πόσους χαρακτήρες (characters) ή πόσες λέξεις (words) θα “χωράει” το κάθε πεδίο.

Default Value: Είναι το προεπιλεγμένο κείμενο που θα έχει κάθε πεδίο, π.χ. μπορείτε να δώσετε στο πεδίο “Message” το κείμενο “εδώ γράφετε το κείμενό σας…”.

Instructions for User: Εδώ μπορείτε να δώσετε οδηγίες στους αναγνώστες σας για το πως θα συμπληρώσουν σωστά τα πεδία. Ίσως δε θα ήταν και πολύ καλή ιδέα να το βάλετε όμως, αφού είναι ξεκάθαρο τι ζητάτε σε κάθε πεδίο.



11. Μετά απ ‘όλα αυτά, πατάμε το κουμπί “Save Form” στον πάτο της φόρμας και στη συνέχεια επιλέγουμε το “Modify email notifications for this form”.



12. Στη σελίδα που θα μας εμφανιστεί διαχειριζόμαστε τις ειδοποιήσεις που θα μας έρχονται κάθε φορά που κάποιος στέλνει email μέσω της φόρμας επικοινωνίας:




Αν θέλετε να μη βλέπετε μεγάλες ή μικρές γραμματοσειρές, χρώματα, εικόνες κ.λπ., επιλέγετε “Send Emails in Plain Text” (τα emails θα σας έρχονται με μορφή HTML).



Recipients Emails: Μπορείτε να προσθέσετε έως 10 διευθύνσεις email στις οποίες θα λαμβάνετε τα μηνύματα μέσω της φόρμας.

Message From: Εδώ επιλέγετε από ποιον θα θέλατε να λαμβάνετε τα email, από το EmailMeForm ή από τις πραγματικές διευθύνσεις των αποστολέων; Αν θέλετε το πρώτο, επιλέγετε το “EmailMeForm Website”, ενώ για τη δεύτερη περίπτωση, επιλέγετε το “Retrieve Name from field x and Email from field y”. Αντικαθιστάτε τα x και y με το πεδίο “Όνομα” και “Email” αντίστοιχα (αν δεν είναι ήδη επιλεγμένα).



Αν θέλετε να βλέπετε την IP διεύθυνση του αποστολέα, επιλέγετε “Show Visitor IP In Email”. Προτού το επιλέξετε όμως, καλό θα ήταν να λαμβάνατε υπ ‘όψιν κατά πόσο θα θέλατε εσείς οι ίδιοι να βλέπουν οι παραλήπτες των μηνυμάτων σας την IP διεύθυνσή σας.



Include data for export: Αν θέλετε να μπορείτε να κάνετε εξαγωγή των στοιχείων των αποστολέων των μηνυμάτων που σας έρχονται, κάντε κλικ στην πρώτη επιλογή. Σε αντίθετη περίπτωση, επιλέγετε το “No, do not include it”.

Message Subject: Επιλέγετε “Retrieve from z”, όπου z επιλέγετε το πεδίο με το θέμα του μηνύματος.



13. Κάνουμε: και επιλέγουμε το “Open new window and test notifications” αν θέλετε να δοκιμάσετε τη νέα φόρμα επικοινωνίας που μόλις δημιουργήσατε.

Αν από την άλλη είστε σίγουροι πως τα κάνατε όλα σωστά, δεν υπάρχει λόγος για αυτό, οπότε πατάτε “Take me back to the Form Manager”.


Προσθήκη Φόρμας Επικοινωνίας στο blog μας:



Στη σελίδα στην οποία οδηγηθήκαμε βλέπουμε τη φόρμα επικοινωνίας που φτιάξαμε πριν λίγο και μία μπάρα με ρυθμίσεις από κάτω.



1. Εμείς χρειαζόμαστε το “Code”, οπότε κάνουμε κλικ πάνω του.



2. Στη σελίδα που θα εμφανιστεί, κάνουμε κλικ στο “HTML Only”, το οποίο βρίσκεται στη στήλη στο αριστερό μέρος της σελίδας, και αντιγράφουμε τον κώδικα που μας δίνει.



3. Σύνδεση στο λογαριασμό blogger.



4. Επεξεργασία αναρτήσεων > Επεξεργασία σελίδων και επιλέγουμε “ΝΕΑ ΣΕΛΙΔΑ”.



5. Βάζουμε έναν τίτλο για τη νέα σελίδα που πρόκειται να δημοσιεύσουμε και, στην “Επεξεργασία HTML” (όχι στη Σύνθεση!), κάνουμε επικόλληση τον κώδικα που κάναμε αντιγραφή προηγουμένως.



6. Αν κάνετε προεπισκόπηση, θα δείτε πως στο τέλος της φόρμας δείχνει το παρακάτω κείμενο:

Powered byEMF Web Form

Report Abuse

Αν θέλετε για οποιοδήποτε λόγο να το αφαιρέσετε, αναζητήστε πατώντας “Ctrl + F” στον κώδικα που επικολλήσατε και διαγράψτε το παρακάτω σημείο (αν έχετε αλλάξει γραμματοσειρά ή χρώματα στη φόρμα δε θα το βρείτε έτσι ακριβώς):

<div>

<font face="Verdana" size="2" color="#000000">Powered by</font><span style="position: relative; padding-left: 3px; bottom: -5px;"><img src=

"http://www.emailmeform.com/builder/images/footer-logo.png" /></span><font face="Verdana" size="2" color="#000000">EMF</font> <a style="text-decoration:none;" href="http://www.emailmeform.com/"

target="_blank"><font face="Verdana" size="2" color="#000000">Form Builder</font></a>

</div><a style="line-height:20px;font-size:70%;text-decoration:none;" href="http://www.emailmeform.com/report-abuse.html?http://www.emailmeform.com/builder/form/80df3RW2Nf1S78UpkQHnj" target=

"_blank"><font face="Verdana" size="2" color="#000000">Report Abuse</font></a>



7. Πατάμε “ΔΗΜΟΣΙΕΥΣΗ ΣΕΛΙΔΑΣ” και τελειώσαμε!


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

Παρ ‘όλα αυτά, αν βγω ψεύτης και παρουσιαστεί κάποιο πρόβλημα ή κάποια απορία σχετικά με το θέμα, μη διστάσετε να αφήσετε σχόλιο από κάτω.

Παρακαλώ σεβαστείτε τα copyrigths της ανάρτησης.



Post by Secra from Web in Greece

Copyrigths: http://www.bloggertips.gr/




‘Follow us’ J-Query Social Bookmarking Widget



Print Friendly and PDFPrintPrint Friendly and PDFPDF


Καλησπέρα στους αναγνώστες του bloggertips.gr.





Σήμερα θα προσθέσουμε ένα ακόμη gadget στη συλλογή μας με τα Social Bookmarking Gadgets, το οποίο επιτελεί 4 λειτουργίες: RSS Feed, Εγγραφή στο blog μέσω e-mail και link για τις σελίδες μας στα Facebook και Twitter.



Πάμε να δούμε πως θα το προσθέσουμε στο blog μας:



1. Σύνδεση στο λογαριασμό blogger

2. Σχεδίαση

3. Επεξεργασία HTML

4. Με Ctrl + F αναζητούμε το ]]></b:skin> και ακριβώς πριν από αυτό επικολλούμε τον παρακάτω κώδικα:

#social {

width: 98%;

height: 45px;

margin: 0;

padding: 10px 5px 5px 30px;

list-style: none;

border-right:solid 1px #853529;

position: relative;

background: url(http://2.bp.blogspot.com/-Nf6QgqI-jkc/Tas56HEUrwI/AAAAAAAAAxQ/hw_KYA9pPZA/follow-bg-abt.png) no-repeat left top;

}



#social p{

font-size:1.5em;

color:#FFFB98;

font-weight:bold;

float:left;

margin: 10px 10px 0 0;

text-shadow: 1px 1px 0px #000000;

filter: dropshadow(color=#000000, offx=1, offy=1);

}



.abt{

font-size:0.8em;

color:#787878;

float:right;

margin: 0 -30px 0 0;

text-shadow: 1px 1px 0px #ffffff;

filter: dropshadow(color=#ffffff, offx=1, offy=1);

}



#social li {

width: 32px;

height: 32px;

float: left;

margin-right: 3px;

}



#social li a {

float: left;

display: block;

width: 100%;

height: 100%;

text-indent: -1000em;

background-repeat: no-repeat;

text-decoration: none;

}



#social #rss {

background-image: url(http://2.bp.blogspot.com/-27yL99iDt70/Tas569zVJWI/AAAAAAAAAxo/NIEumM2DKRo/s400/allblogtools_rss.png);

}



#social #facebook {

background-image: url(http://4.bp.blogspot.com/-lfZmi7_j72c/Tas56hfwNxI/AAAAAAAAAxg/D_xE4bPyo60/s400/allblogtools_facebook.png);

}

#social #twitter {

background-image: url(http://2.bp.blogspot.com/-BHCqkqm4Dnw/Tas57UCTyAI/AAAAAAAAAxw/fCj4yjzJE0g/s400/allblogtools_twitter.png);

}

#social #mail {

background-image: url(http://1.bp.blogspot.com/–tzwYodHzk8/Tas56U26pSI/AAAAAAAAAxY/Xqxm-jfCPkA/s400/allblogtools_email.png);

}



span.tooltip {

background: #575757;

padding: 3px;

display: block;

width: 140px;

border: 1px solid #000000;

position: absolute;

margin-top:-40px;

color: #F0F0F0;

font-size:10px;

text-indent: 0;

font: Arial, sans-serif;

text-align: center;

-webkit-box-shadow: inset 2px 2px 2px #616161;

-moz-box-shadow: inset 2px 2px 2px #616161;

box-shadow: inset 2px 2px 2px #616161;

-moz-border-radius: 5px;

border-radius: 5px;

}



5. Στη συνέχεια, πάλι με Ctrl + F, αναζητούμε το </body> και ακριβώς πριν από αυτό επικολλούμε τον παρακάτω κώδικα:

<script type=’text/javascript’>

window.setTimeout(function() {

document.body.className = document.body.className.replace('loading', '');

}, 10);

</script>



<script src=’http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js’ type=’text/javascript’/>

<script type=’text/javascript’>

//<![CDATA[

$(document).ready(function() {



$(‘#social li’).each(function() {



var $li = $(this);

var title = $li.find(‘a’).attr(‘title’);



$li.find(‘a’).removeAttr(‘title’);



$(‘<span class=”tooltip”/>’).text(title).appendTo($li.find(‘a’)).hide();





$li.find(‘a’).mouseover(function() {





var top = $(this).position().top;

var left = $(this).position().left;



$(this).find(‘span’).fadeIn()({

top: top,

left: left

}, ‘slow’);



});



$li.find(‘a’).mouseout(function() {





$(this).find(‘span’).fadeOut(‘slow’);





});



});





});



//]]>

</script>



6. Αποθήκευση προτύπου



Πάμε τώρα να προσθέσουμε το gadget στο blog μας:



7. Πάμε Σχεδίαση > Προσθήκη gadget > HTML/Javascript και στο παράθυρο που θα ανοίξει επικολλούμε τον παρακάτω κώδικα:

<ul id=”social”>

<p>Follow Us</p>

<li><a href=”http://blog-name.blogspot.com/feeds/posts/default?alt=rss” id=”rss” title=”Follow our Feeds”>Rss</a></li>



<li><a href=”Mail-Link#” id=”mail” title=”Subscribe to our newsletter”>Mail</a></li>



<li><a href=”Facebook-Link#” id=”facebook” title=”Like us on Facebook”>Facebook</a></li>



<li><a href=”Twitter-Link#” id=”twitter” title=”Follow us on Twitter”>Twitter</a></li>

</ul>



Αντικαθιστούμε το http://blog-name.blogspot.com με τη διεύθυνση (url) του blog μας (ή αν έχετε λογαριασμό στο Feedburner, αντικαταστήστε το http://blog-name.blogspot.com/feeds/posts/default?alt=rss με το url από το Feedburner (όπως θα δείτε στο παράδειγμα παρακάτω), το Mail-Link# με τη διεύθυνση στην οποία οι αναγνώστες μπορούν να κάνουν εγγραφή (subscribe) στο blog μας μέσω e-mail, το Facebook-Link# με το url της σελίδας ή του προφίλ μας στο Facebook και το Twitter-Link# με το url της σελίδας μας στο Twitter.



Για να καταλάβετε καλύτερα τι και πως θα το αντικαταστήσετε, ρίξτε μια ματιά στον παρακάτω κώδικα, ο οποίος αποτελεί παράδειγμα για το bloggertips.gr:

<ul id=”social”>

<p>Follow Us</p>

<li><a href=”http://feeds.feedburner.com/Johnpatrablog” id=”rss” title=”Follow our Feeds”>Rss</a></li>



<li><a href=”http://feedburner.google.com/fb/a/mailverify?uri=Johnpatrablog” id=”mail” title=”Subscribe to our newsletter”>Mail</a></li>



<li><a href=”https://www.facebook.com/bloggertips.gr” id=”facebook” title=”Like us on Facebook”>Facebook</a></li>



<li><a href=”https://twitter.com/#!/johnpatrablog” id=”twitter” title=”Follow us on Twitter”>Twitter</a></li>

</ul>



Για οποιοδήποτε πρόβλημα ή απορία αφήστε το σχόλιό σας.



Πηγές: http://www.allblogtools.com/tricks-and-hacks/blogger-follow-us-j-query-widget-social-icons/



Copyrigths: http://www.bloggertips.gr/



Post by Secra from Web in Greece




Facebook comment box στο blogger



Print Friendly and PDFPrintPrint Friendly and PDFPDF




Καλησπέρα στους αναγνώστες του bloggertips.gr.



Σήμερα θα σας δείξω πως μπορείτε να προσθέσετε στο blog σας ένα comment box (=φόρμα σχολίων) για να μπορούν οι αναγνώστες σας να σχολιάζουν επώνυμα μέσω του δημοφιλέστερου social network στον πλανήτη, του Facebook.



Πριν ξεκινήσουμε τη διαδικασία για το πως θα το προσθέσετε, δύο πράγματα είναι απαραίτητα:

1) Ένας λογαριασμός στο Facebook και

2) Η απόκρυψη των σχολίων του blogger πηγαίνοντας μέσω του blog σας Ρυθμίσεις > Σχόλια > Απόκρυψη και ΑΠΟΘΗΚΕΥΣΗ ΡΥΘΜΙΣΕΩΝ.

Αν και αρχικά πίστευα πως το comment box δε μπορεί να συνυπάρχει με τα σχόλια του blogger, έκανα λάθος, οπότε αγνοήστε το διαγραμμένο κείμενο από πάνω.



Διαδικασία:



1. Μπαίνουμε στη σελίδα του Facebook Developers που έχει να κάνει με το comment box.



Πώς θα συμπληρώσετε τη φόρμα που θα εμφανιστεί:


Site name: Το όνομα του blog σας

Site URL: Το url του blog σας με ένα “/” στο τέλος (π.χ. www.bloggertips.gr/)

Locale: Επιλέγετε από το μενού “Ελληνικά



Μετά θα σας βγει ένα Security Check, δηλαδή ένα παράθυρο που βοηθάει στο να αναγνωρίσει το Facebook ότι έχει να κάνει με άνθρωπο και όχι με κάποιον υπολογιστή.

Συμπληρώνετε το captcha (δηλαδή τα περίεργα γράμματα που εμφανίζονται) και πατάτε Submit.



2. Στη σελίδα που θα οδηγηθείτε αφού πατήσετε Submit, το μόνο που θα χρειαστεί να πάρετε είναι η Ταυτότητα (ID) Εφαρμογής. Αντιγράψτε τον αριθμό που θα σας βγάλει και αφήστε τον στην άκρη γιατί θα τον χρειαστούμε παρακάτω.



3. Σύνδεση στο λογαριασμό blogger.

4. Σχεδίαση

5. Επεξεργασία HTML

6. “Τικάρουμε” το “Επέκταση προτύπων γραφικών στοιχείων”

7. Με Ctrl + F αναζητούμε το <html και δίπλα από αυτό, δηλαδή ακριβώς μετά από αυτό, επικολλούμε τον παρακάτω κώδικα:

xmlns:fb=’http://www.facebook.com/2008/fbml’

Πρέπει να αφήσετε τουλάχιστον ένα κενό πριν και μετά από τον παραπάνω κώδικα για να δουλέψει!





8. Με Ctrl + F αναζητούμε το <body> και ακριβώς μετά από αυτό επικολλούμε τον παρακάτω κώδικα:

<div id=”fb-root”></div>

<script>

window.fbAsyncInit = function() {

FB.init({

appId : ‘Ταυτότητα (ID) Εφαρμογής‘,

status : true, // check login status

cookie : true, // enable cookies to allow the server to access the session

xfbml : true // parse XFBML

});

};



(function() {

var e = document.createElement(‘script’);

e.src = document.location.protocol + ‘//connect.facebook.net/en_US/all.js’;

e.async = true;

document.getElementById(‘fb-root’).appendChild(e);

}());

</script>

Στον παραπάνω κώδικα, αντικαθιστάτε το “Ταυτότητα (ID) Εφαρμογής” με τον αριθμό που μας έδωσε το Facebook, τον οποίο αφήσαμε στην άκρη νωρίτερα.



9. Με Ctrl + F αναζητούμε το </head> και ακριβώς πριν από αυτό, επικολλούμε τον παρακάτω κώδικα:

<b:if cond=’data:blog.pageType == "item"’>

<meta expr:content=’data:blog.pageTitle’ property=’og:title’/>

<meta expr:content=’data:blog.url’ property=’og:url’/>

<b:else/>

<meta expr:content=’data:blog.title’ property=’og:title’/>

<meta expr:content=’data:blog.homepageUrl’ property=’og:url’/>

</b:if>

<meta content=’MY-SITE-NAME‘ property=’og:site_name’/>

<meta content=’YOUR-APP-ID‘ property=’fb:app_id’/>

<meta content=’YOUR-FACEBOOK-PROFILE-ID‘ property=’fb:admins’/>

<meta content=’article’ property=’og:type’/>

Προσαρμόζουμε τον παραπάνω κώδικα στα δικά μας δεδομένα:



Αντικαθιστούμε το MY-SITE NAME με το όνομα του blog μας, το YOUR-APP-ID με την Ταυτότητα (ID) Εφαρμογής, δηλαδή με τον αριθμό που πήραμε νωρίτερα από το Facebook και το YOUR-FACEBOOK-PROFILE-ID με το ID του λογαριασμού μας στο Facebook.



Για να βρούμε το Facebook ID, πάμε στο profile μας στο Facebook και κάνουμε κλικ στην φωτογραφία που έχουμε ορίσει ως φωτογραφία προφίλ.

Στην μπάρα του browser (του περιηγητή μας δηλαδή) θα βγει ένα link που θα μοιάζει με το παρακάτω:

https://www.facebook.com/media/set/?set=a.1438872928907.63717.1175547627

Το Facebook ID είναι ο αριθμός μετά το “a.” μέχρι την πρώτη τελεία, δηλαδή στο παραπάνω το ID είναι το 1438872928907 .



10. Με Ctrl + F αναζητούμε το <data:post.body/> και ακριβώς μετά από αυτό επικολλούμε τον παρακάτω κώδικα:

<b:if cond=’data:blog.pageType == "item"’>

<p />

<script src=’http://connect.facebook.net/en_US/all.js#xfbml=1’/>

<div><fb:comments width=’450′ expr:title=’data:post.title’ expr:href=’data:post.url’ expr:xid=’data:post.id’/></div>

</b:if>

Μπορείτε να αλλάξετε το width=’450′, δηλαδή το πλάτος του comment box, και να το προσαρμόσετε στο πλάτος του blog σας, αλλάζοντας το “450” σε όποιο σας ταιριάξει καλύτερα.

Πειραματιστείτε για να βρείτε το κατάλληλο!



11. Αποθήκευση προτύπου και είμαστε έτοιμοι!



Δείτε Demo εδώ.



Πηγές: http://www.allblogtools.com/tricks-and-hacks/exclusive-integrate-facebook-comments-box-for-blogger-in-very-easy-and-simple-steps-full-guide/



Με τη φιλική βοήθεια (μέσω σχολιασμού) του http://bloggermeetsfacebook.blogspot.com/



Copyrights: http://www.bloggertips.gr/



Post by Secra from Web in Greece




25 sites για free chat box (ή comment box)



Print Friendly and PDFPrintPrint Friendly and PDFPDF


Το chat σε ένα blog είναι πολύ σημαντικό. Υπάρχει ενός είδος αλληλεπίδρασης του χρήστη με τη σελίδα. Η σελίδα αποκτά περισσότερη ζωντάνια. Οι επισκέπτες ενός blog μπορούν να ανταλάσσουν γνώμες μεταξύ τους και ο διαχειριστής του blog μπορεί να έρχεται σε άμεση επικοινωνία με τους επισκέπτες του, όποτε το επιθυμεί. Για αυτούς τους λόγους, καθιστάται αναγκαίο ένα chat box στη σελίδα σας.



Παρακάτω σας δίνω 25 sites με 25 διαφορετικά chat box από τα οποία μπορείτε να διαλέξετε αυτό που σας αρέσει και να το βάλετε στο site σας.

Σε όλα από τα παρακάτω sites μπορείτε να δημιουργήσετε δωρεάν ένα chat.

Σε πολλά από αυτά, πληρώνοντας ένα μικρό αντίτιμο, μπορείτε να κάνετε και premium λογαριασμό και να έχετε περισσότερες επιλογές στη διαμόρφωση του chat σας.

Για παράδειγμα ένας premium account στο cbox με κοστίζει 2,5 ευρώ τον μήνα.



Δείτε τα και επιλέξτε αυτό που σας ταιριάζει καλύτερα!


http://xat.com/ – πολύ καλό και μεγάλο

http://chatango.com/ – αυτό έχω εγώ’ δείτε το δεξιά και αφήστε καμιά καλησπέρα 🙂

http://www.cbox.ws/ – πάρα πολύ καλό (για βοήθεια σχετικά με το cbox δείτε εδώ και εδώ)

http://www.shoutmix.com/ – δεν μου αρέσει αυτό

https://www.meebo.com/rooms/create/ – δεν θα το διάλεγα εγώ

http://chatroll.com/ – πάρα πολύ καλό



– – – | – – –



Πιο Γρήγορο Web με IE9. Κατεβάστε τον Internet Explorer 9 τώρα από εδώ!



– – – | – – –



Τα παραπάνω είναι τα γνωστότερα. Ωστόσο υπάρχουν πολλά άλλα όπως:



http://chat-forum.com/freechat/

http://www.freeshoutbox.net/

http://www.coolchat.com/chat/free/?L=instruction.html&step=7&new=1

http://www.myshoutbox.com/

http://nat1on.com/

http://www.spinchat.com/

http://flashboon.com/

http://www.widgetbox.com/widget/naruto-shoutbox

http://www.free-shoutbox.co.uk/

http://www.v3chat.com/shoutbox.php

http://spacegirlpippa.co.uk/

http://www.gerd-tentler.de/tools/shoutbox/

http://www.freeshoutbox.net/

http://www.shoutboxpro.com/

http://www.yellbox.com/

http://www.shout-box.com/

http://www.gagalive.com/live/

http://blom.bleebot.com/index.html

http://www.chatbutton.com/



Σας αρκούν?



Τον κώδικα του chat τον βάζετε στο blog σας όπως κάθε άλλο widget, από Σχεδίαση> Στοιχεία Σελίδας> Προσθήκη gadget> HTML/JavaScript



Κατά τη συγγραφή της παραπάνω ανάρτησης, άκουγα το παρακάτω τραγούδι:








Copyrights: http://www.bloggertips.gr/




12 sites με contact forms (=φόρμες επικοινωνίας) για τη σελίδα σας



Print Friendly and PDFPrintPrint Friendly and PDFPDF


Παρακάτω σας γράφω για 12 σελίδες, από τις οποίες μπορούμε να έχουμε φόρμες επικοινωνίας για το site μας. (Φόρμα επικοινωνίας είναι αυτή για παράδειγμα.) Σχεδόν σε όλες πρέπει να κάνουμε έναν free account, να συνδεθούμε στον λογαριασμό μας μετά, να ακολουθήσουμε τα βήματα φτιάχνοντας τη φόρμα μας, μέχρι να μας δώσει τον κωδικό html που θα τον επικολλήσουμε σε μια ανάρτηση στο Blog μας ή θα το βάλουμε σαν gadget, πράγμα που δεν προτείνω.



Οι πιο πολλές από τις παρακάτω σελίδες, προσπαθούν να προωθήσουν τους premium account τους, που για να τους κάνει κάποιος πρέπει να πληρώσει κάτι. Αλλά όλες έχουν και free accounts. Εγώ δεν νομίζω ότι υπάρχει λόγος να κάνετε πουθενά premium γιατί μπορείτε να τα βρείτε και δωρεάν στις άλλες.



Πολύ καλά:



http://www.emailmeform.com/ (είναι η καλύτερη για μένα, αλλά και η δυσκολότερη)

http://kontactr.com/ (πάρα πολύ καλή και εύκολη να τη βάλει κάποιος)





Αρκετά καλά:



http://www.mycontactform.com/ (καλό)

http://www.123contactform.com/ (καλό)

http://formsmarts.com/

http://wufoo.com/



Άλλα που δεν τα έχω ψάξει (μπορεί να είναι και πολύ καλά!):



http://docs.google.com/ (Δημιουργία νέου> Φόρμα)

http://creator.zoho.com/ (καλό και δύσκολο)

http://www.freecontactform.com/form-script-details.php

http://www.formspring.com/

http://www.kampyle.com/

http://www.webformdesigner.com/



Ψάξτε τα, καταλληξτε στο πιο κατάλληλο για εσάς και προσθέστε το στο blog σας.





Κατά τη συγγραφή της παραπάνω ανάρτησης, άκουγα το παρακάτω τραγούδι:






Copyrights: http://www.bloggertips.gr/