All Facebook share buttons count for Blogger (Updated)

Facebook ή αλλιώς "φατσοβιβλίο".Είναι το site-φαινόμενο που έχει εισβάλλει για τα καλά στην καθημερινή μας ζωή.Έχει 300 εκ. μέλη!Είναι το δεύτερο μεγαλύτερο site του κόσμου (μετά την google).Είναι λίγα που μπορούμε να αναφέρουμε για να δείξουμε το μέγεθος και την δύναμη αυτης της ιστοσελίδας.Σήμερα θα επικεντρωθώ στα facebook share buttons.Θα σας δείξω κάποια τέτοια buttons για να τα βάλετε στο blog σας.


1.
Κοιτάξτε όλα τα widgets που μας δίνει το facebook στο http://www.new.facebook.com/facebook-widgets/index.php
Μην παραλείψετε να δείτε και αυτό:http://www.new.facebook.com/facebook-widgets/share.php

2.
Μερικά έτοιμα κουμπιά για share:
α)

Κωδικός:

<b:if cond='data:post.url'>
<a expr:href='&quot;http://www.facebook.com/share.php?u=&quot; + data:post.url'><img alt='www.tips-fb.com' border='0' src='http://i15.photobucket.com/albums/a398/syilpid/share_on_facebook_2.png'/></a>
</b:if>

β)

Κωδικός:

<b:if cond='data:post.url'>
<a expr:href='&quot;http://www.facebook.com/share.php?u=&quot; + data:post.url'><img src="http://i15.photobucket.com/albums/a398/syilpid/share_on_facebook_4.png" border="0" alt="www.tips-fb.com"></a>
</b:if>

γ)

Κωδικός:

<b:if cond='data:post.url'>
<a expr:href='&quot;http://www.facebook.com/share.php?u=&quot; + data:post.url'><img src="http://i15.photobucket.com/albums/a398/syilpid/share_on_facebook_3.png" border="0" alt="www.tips-fb.com"></a>
</b:if>

δ)
Αυτό δεν έχει εικόνα.Είναι απλό κείμενο.Γράφει μόνο "Share On Facebook"
Κωδικός:

<b:if cond='data:post.url'>
<a expr:href='&quot;http://www.facebook.com/share.php?u=&quot; + data:post.url'>Share on Facebook</a>
</b:if>

Τα παραπάνω widgets τα βάζετε στο blog σας με τα εξής βήματα:

Σύνδεση>Πανόπτης>Διάταξη>Επεξεργασία html>Επέκταση προτυπών γραφικών στοιχείων και τώρα βρείτε τον παρακάτω κώδικα:

<b:if cond='data:top.showAuthor'>

Και τώρα βάζεις τον κωδικό του αντίστοιχου widget πριν το <b:if cond='data:top.showAuthor'>
Τέλος κάνεις αποθήκευση.

UPDATE (15/11/09):
Εαν δεν σας δουλεύουν τα παραπάνω widgets κοιτάξτε τα παρακάτω.

Απλό κείμενο "Share on Facebook":

Κωδικός:

<script>function fbs_click() {u=location.href;t=document.title;window.open('http://www.facebook.com/sharer.php?u='+encodeURIComponent(u)+'&t='+encodeURIComponent(t),'sharer','toolbar=0,status=0,width=626,height=436');return false;}</script><a href="http://www.facebook.com/share.php?u=<url>" onclick="return fbs_click()" target="_blank">Share on Facebook</a>

Κείμενο με εικόνα:

Κωδικός:

<script>function fbs_click() {u=location.href;t=document.title;window.open('http://www.facebook.com/sharer.php?u='+encodeURIComponent(u)+'&t='+encodeURIComponent(t),'sharer','toolbar=0,status=0,width=626,height=436');return false;}</script><style> html .fb_share_link { padding:2px 0 0 20px; height:16px; background:url(http://static.ak.fbcdn.net/images/share/facebook_share_icon.gif?0:26981) no-repeat top left; }</style><a href="http://www.facebook.com/share.php?u=<url>" onclick="return fbs_click()" target="_blank" class="fb_share_link">Share on Facebook</a>

Και ένα άλλο με εικόνα και κείμενο (πολύ καλό):

Κωδικός:

<script>function fbs_click() {u=location.href;t=document.title;window.open('http://www.facebook.com/sharer.php?u='+encodeURIComponent(u)+'&t='+encodeURIComponent(t),'sharer','toolbar=0,status=0,width=626,height=436');return false;}</script><style> html .fb_share_button { display: -moz-inline-block; display:inline-block; padding:1px 20px 0 5px; height:15px; border:1px solid #d8dfea; background:url(http://static.ak.fbcdn.net/images/share/facebook_share_icon.gif?0:26981) no-repeat top right; } html .fb_share_button:hover { color:#fff; border-color:#295582; background:#3b5998 url(http://static.ak.fbcdn.net/images/share/facebook_share_icon.gif?0:26981) no-repeat top right; text-decoration:none; } </style> <a href="http://www.facebook.com/share.php?u=<url>" class="fb_share_button" onclick="return fbs_click()" target="_blank" style="text-decoration:none;">Share</a>

Τα τρία παραπάνω τα βάζετε σαν απλά widgets από Διάταξη>Προσθήκη gadget>HTML/JavaScript.

3.
Facebook share button with count σε κάθε blogger post

α)

Κωδικός:

<div style="float:right;padding:4px;">
<a expr:share_url='data:post.url' name='fb_share' rel='nofollow' type='box_count'/>
<script type="text/javascript" src="http://static.ak.fbcdn.net/connect.php/js/FB.Share"/>
</div>

β)

Κωδικός:

<div style="float:left;padding:4px;">
<a expr:share_url='data:post.url' name='fb_share' rel='nofollow' type='box_count'/>
<script type="text/javascript" src="http://static.ak.fbcdn.net/connect.php/js/FB.Share"/>
</div>

γ)

Κωδικός:

<div style="float:right;padding:4px;">
<a expr:share_url='data:post.url' name='fb_share' rel='nofollow' type='button_count'/>
<script type="text/javascript" src="http://static.ak.fbcdn.net/connect.php/js/FB.Share"/>
</div>

δ)

Κωδικός:

<div style="float:left;padding:4px;">
<a expr:share_url='data:post.url' name='fb_share' rel='nofollow' type='button_count'/>
<script type="text/javascript" src="http://static.ak.fbcdn.net/connect.php/js/FB.Share"/>
</div>

Για να βάλεις ένα από τα τέσσερα παραπάνω widget στο blog σου,ακολούθησε τα παρακάτω βήματα:

Καταρχίν διάλεξε το widget που θέλεις να βάλεις δίπλα από κάθε ανάρτησή σου.

Τώρα κάνε:

Σύνδεση>Πανόπτης>Διάταξη>Επεξεργασία html>Επέκταση προτυπών γραφικών στοιχείων και τώρα βρείτε τον παρακάτω κώδικα:

<div class='post-header-line-1'/>

Βάλε τον κωδικό του widget (που διάλεξες πριν) αμέσως από κάτω του.
Αποθήκευση του προτύπου σας.

Αν δεν βρίσκεις τον παραπάνω κώδικα ψάξε να βρεις αυτον:

<data:post.body/>

Βάλε τον κωδικό του widget (που διάλεξες πριν) πριν από τον παραπάνω κώδικα.
Αποθήκευση του προτύπου σας.

Φτάσαμε στο τέλος και αυτης της ανάρτησης.Ελπίζω να σας φάνηκε χρήσιμη και να σας βοήθησε.

Περιμένω ,όπως πάντα, τα σχόλια σας.