Paint the Tiger, Carve the Swan

Thu 11th Aug 2005

Gravatars in JavaScript for Blogsome

Posted late in the morning, filed under Blogsome , JavaScript.

To create an image tag for a Gravatar in JavaScript, for use on Blogsome.

Download the md5.jpg file (it’s really a .js file, but we are tricking Blogsome into allowing it to be uploaded), and upload it to your site.

Put the following code into your Main Page template (probably in the head section):

<script type="text/javascript" src="/images/md5.jpg" />

Put The following code where you want the Gravatar to appear:

<script type="text/javascript">document.write('<img src="http://www.gravatar.com/avatar.php?gravatar_id='); document.write(hex_md5("{comment_author_email}")); document.write('&size=20" />'); </script>

You can change the size of your Gravatar image with the size=20 part, set it to whatever value you want.

Enjoy!

Edit: Don’t use this code, as it displays the email address to the browser, and then asks it to generate the MD5 fingerprint. This means that a Spam-collector would actually have access to the raw email address. I’ve diasabled the code until I figure out how to get around this…

 

« Older : Changing FavIcon

I’m not Rachael Ray, but I’ll be her for a day : Newer »

13 Responses to “Gravatars in JavaScript for Blogsome”

1. Matthew Schinckel said:

   I suspect the only way I’ll be able to get around this is to have a Smarty output filter (and it could be md5 OR Gravatar, either would work), or a WordPress plugin.

   1 week, 5 days after the fact.

2. fiys said:

   i m spanish, my english isn ‘t good.
   i have used this code. it is fine. thanks
   how can i put the image in rigth position, and the text around and down of image?
   i m sorry for my english

   1 week, 5 days after the fact.

3. fiys said:

   in firefox i can see it well but i don t know in internet explorer. thanks

   1 week, 5 days after the fact.

4. Dan tdaxp said:

   Thanks for mentioning this article! I tried similar code that I found, that didn’t display the email address.

   Sadly, commentator email addresses aren’t available through blogspirit at all, so it’s a non-issue…

   2 weeks after the fact.

5. Matthew Schinckel said:

   fiys: you’ll need to play around with either DIV tags, or a table, in order to position it so that it has text flowing around it.

   Of course, you shouldn’t be using my code at all, as it exposes email addresses.

   2 weeks, 5 days after the fact.

6. Matthew Schinckel said:

   Okay, I think I’ve come up with a way to obscure the email address, and for the script to still work.

   You need to use smarty tags to obscure the email address, and then use JavaScript to unobscure it.

   {comment_author_email|replace:"@":";"}

   Takes email@domain.com and turns it into email;domain.com

   AuthorEmail = Email.replace(/;/g,"@")

   Reverses the operation.

   Why do this? The source code will not show the raw email address, and will therefore be safer from Spambots.

   1 month after the fact.

7. Matthew Schinckel said:

   Strangely, comments from other people appear twice, once as a trackback and once as a comment, in the same box. I’ll have to fix this.

   1 month after the fact.

8. Matthew Schinckel said:

   Fixed: had some duplicate code in there!

   1 month after the fact.

9. fiys said:

   thanks i have fixed the code but my problem is that the image is top of the text how can you do it? in this blog the text is around image. i he created a class like this:

   in comments my code is:

   .avatar{
   float:right;
   padding: 1px;
   border: 1px solid #ccc;
   }

   {comments_number zero="Comments" one="1 Comment" more="% Comments"}
   {if $post->comment_status == 'open'}
   <a href="#postcomment" rel="nofollow">»</a>
   {/if}
   
   {if $post->ping_status}
   {_e text='The <acronym title="Uniform Resource Identifier">URI</acronym> to TrackBack this entry is:'} <em>{trackback_url}</em>
   {/if}
   {if $comments != ''}
   
     {foreach from=$comments key=key item=comment}
           {globalvar var='comment' value=$comment}
   
   {capture name=reader}{comment_author_email}{/capture}
   var ob_email = "{$smarty.capture.reader|replace:'@':';'}";
   var email = ob_email.replace(/;/g,"@");
   document.write('');
   {comment_text}
   	{comment_type} {_e text="by"} {comment_author_link} — {comment_date} @ <a href="#comment-{comment_ID}" rel="nofollow">{comment_time}</a> {edit_comment_link link='Edit This' before=' |'}
   
     {/foreach}
   
   {else}
   	{_e text="No hay comentarios todavia."}
   {/if}
   {comments_rss_link link_text='<abbr title="Really Simple Syndication">RSS</abbr> feed for comments on this post.'}
   {_e text="Deja un comentario"}
   {if 'open' == $post->comment_status}
   
   	   {_e text="Nombre"} {if $req != ''} {_e text='(required)'} {/if}
   	ID}" />
   
   	   {_e text="E-mail"} {if $req != ''} {_e text='(required)'}{/if}
   
   	   {_e text="<acronym title='Uniform Resource Identifier'>URI</acronym>"}
   
   	  {_e text="Tus comentarios"}
   
   {_e text="Line and paragraph breaks automatic, e-mail address never displayed, <acronym title='Hypertext Markup Language'>HTML</acronym> allowed:"} <code>{allowed_tags}</code>
   
   {else}
   {_e text="Sorry, the comment form is closed at this time."}
   {/if}
   

   what am i doing bad?

   1 month after the fact.

10. Edhish said:

    i can’t download the jpg file

    1 month after the fact.

11. Matthew Schinckel said:

    @Edhish: right-click and choose to save the file/download it rather than just clicking on it.

    @fiys: I don’t really have time to look at it now, but I’ll see what I can do.

    1 month after the fact.

12. Matthew Schinckel said:

    @fiys: I can’t tell what you are doing wrong, as the code you pasted is being garbled by the browser.

    I think the problem lies in the location of the script: if it is not in the same paragraph, it may appear above, like it does on your site.

    1 month after the fact.

13. fiys said:

    thanks . finally i have changed my layout. i have used this layout but i have modified so what my blog is different , more personal. thanks for this layout

    1 month, 1 week after the fact.

Leave a Reply