Automatic Email Address Protection PHP / JavaScript

Date: 27th October 2008 at 7:44 pm | Filed under: development, scripts | Author: Sam Burdge

It is important to protect email addresses on websites from being harvested by spambots.

"Email spambots collect e-mail addresses from the Internet in order to build mailing lists for sending unsolicited e-mail, also known as spam. Such spambots are web crawlers that can gather e-mail addresses from Web sites, newsgroups, special-interest group (SIG) postings, and chat-room conversations. Because e-mail addresses have a distinctive format, spambots are easy to write. A number of legislators in the U.S. are reported to be devising laws that would outlaw the spambot." – Wikipedia

This is my method for automatically detecting email addresses and replacing them with a javascript that will disguise them from spambots. The script works in two stages one in javascript and the other in php.

First the javascript function that outputs the mailto link:

function sb_email(user,site){
document.write('<a href=\"mailto:' + user + '@' + site + '\">');
document.write(user + '@' + site + '<\/a>');
}

The function has 2 parameters "user" and "site", which are the two parts of the email address either side of the "@". This function can be called like so:

sb_email('joe','bloggs.com');

The second part is the php functions that recognise email addresses and replace them with the javascript function to disguise them:

//function to output the js
function create_js ($matches){
$parts = explode ('@', substr ($matches[0], 1));
if(substr($parts[1],-1)=='.'){$parts[1]=substr($parts[1],0,-1); $parts[2]='.';}
$str = $matches[1].'<script language="JavaScript" type="text/javascript">';
$str .= 'sb_email("'.$parts[0].'", "'.$parts[1].'");';
$str .= '</script>'.$parts[2];
return $str;
}
$js_callback = "create_js ";
 
//function to recognise emails
function email_protect($text){
global $js_callback;
$replace = '/([> ])[A-Z0-9._-]+@[A-Z0-9][A-Z0-9.-]{0,61}[A-Z0-9]\.[A-Z.]{2,6}/i';
$output = preg_replace_callback($replace, $js_callback, $text);
return $output;
}

The email_protect php function can be called on any text string like so:

echo email_protect($text);

It will automatically replace any email addresses in the text with the javascript, therefore hiding them from spambots.

Leave a Comment

Style highlighted / selected text - CSS Tutorial

Date: 26th October 2008 at 12:56 pm | Filed under: scripts | Author: Sam Burdge

Ever wondered how to change the default style of highlighted or selected text in your html page? I have found that this is possible using CSS3, although IE has no support for this so it doesn't work at all in IE.

In this example the background is set to green and the text set to white. Drag over this text to highlight it.

Here's the CSS:

/* Safari */
::selection {
background: #000000;
color: #ffffff;
}
/* Firefox */
::-moz-selection {
background: #000000;
color: #ffffff;
}

::selection is supported by the latest versions of Opera and Firefox 2 and upwards. ::-moz-selection is supported by the latest versions of Safari.

Leave a Comment

Leona Naess animated logo and holding page

Date: 15th August 2008 at 10:19 am | Filed under: flash, portfolio | Author: Sam Burdge

This holding page built for Polydor artist, singer / songwriter Leona Naess features an animated logo with random fades and glows. The flash random timing actionscript is something I have utilised in the past to create similar effects (see: Flash mousetrails with random flashes!).

The holding page also features a streaming mp3 (using flash), mailing list signup form with javascript validation embedded youtube video and google analytics.

Check it out:

www.leonanaess.com

Leave a Comment

WP Flash Titles Plugin 2.0

Date: 22nd April 2008 at 3:02 pm | Filed under: development, flash, plugins, wordpress | Author: Sam Burdge

This WordPress plugin allows you to display your post titles in any font, colour and size you want using Flash. It will also retain your original html styling of your titles and display that to users who don't have Flash installed. It is fully customisable via the Options tab in wordpress. It is search engine friendly and easy to implement.

Update:

Version 2.0 includes 2 basic changes.

  1. The way the options are saved has been changed to address the problems some users were having with this.
  2. More pre-installed fonts.

Example:

I am happy with my WordPress theme as it is, so I have set up this example page for you to see the Flash Titles in action: WP Flash Titles Example Page

Installation:

  1. Upload the wp_flash_titles folder to your wp-content/plugins folder.
  2. Activate the plugin from the Plugins page.

Usage:

  1. Go to Options -> WP Flash Titles to choose your font, size and colour scheme for your titles.
  2. You need to modify your template file slightly. First you need to locate the code that relates to the post title. This will typically be something like:
    <h3 class="storytitle" id="post-<?php the_ID(); ?>">
    <a href="<?php the_permalink() ?>" rel="bookmark">
    <?php the_title(); ?>
    </a>
    </h3>
  3. You then need to add two lines of code. First paste this line in directly before the page title code:
    <?php if(function_exists('wp_flash_titles')){wp_flash_titles($post->ID,'start')} ?>
  4. Then this line directly after:
    <?php if(function_exists('wp_flash_titles')){wp_flash_titles($post->ID,'end')} ?>
  5. To embed any font you want you must have Flash CS3. Open the source file 'wp_flash_title.fla' which is located in the 'Source' folder of the plugin. In flash simply change the font of the text area to any font you wish. Do a 'Save As' and then publish the swf. Once you have created the swf you must upload it to the folder: wp-content/plugins/wp_flash_titles/flash
    It will now appear in the list of fonts in the Options -> WP Flash Titles page!!

Download Plugin:


26 Responses to “WP Flash Titles Plugin 2.0”

  • Comment by Printer
    Date: April 22nd, 2008 at 8:33 pm

    Hi, thanks for this great plugin. Unfortunatly I can’t seem to get it to work. I followed the instructions. But I can not see an example image inthe options page, and when I insert all the option values after update options the option boxes are empty again. Any idea how this can be? I’m onWP 2.5

  • Comment by Sam Burdge
    Date: April 22nd, 2008 at 10:34 pm

    Hi Printer,

    Sorry, it was my mistake…I hadn’t updated one of the plugin files correctly. Please download again and re-install and it should work.

    Sam

  • Comment by Printer
    Date: April 22nd, 2008 at 11:20 pm

    Ah, thanks! the optionpage is working now. I seem to run in to another problem now. when I refresh my site it goes blank(empty). the dashboard ist working though. i have this code in my ‘index’ now:
    ID,’start’)} ?><a href=”" rel=”bookmark” title=”Permanent Link to “>ID,’end’)} ?>
    this should be correct is it?

  • Comment by Printer
    Date: April 22nd, 2008 at 11:22 pm

    ow, i see the code did not displayed corect in my comment.

  • Comment by Sam Burdge
    Date: April 23rd, 2008 at 1:01 am

    The code should be something like:

    < ?php if(function_exists('wp_flash_titles'))
    {wp_flash_titles($post->ID,’start’)} ?>
    <a href=”< ?php the_permalink() ? rel="nofollow">” rel=”bookmark”>
    < ?php the_title(); ?>
    </a>
    < ?php if(function_exists('wp_flash_titles'))
    {wp_flash_titles($post->ID,’end’)} ?>

  • Comment by Stephen
    Date: April 24th, 2008 at 2:25 pm

    Hi,

    I am trying to use the plugin once again. The saving options problem seems to be fixed, thanks. BUT when I activate and try to use the plugin, only the first two posts on my home page get flash titles and all the others are completely missing. I have about 20 posts showing on my homepage btw.
    Any advice? Thanks!

  • Comment by Sam Burdge
    Date: April 24th, 2008 at 2:55 pm

    Hi Stephen

    It could be one of a few things causing this. Let’s start with the basics, have you tried emptying your browser’s cache and refreshing the page?
    Does this behaviour occur on all pages of your site (monthly archives, single category pages, etc) or just on the home page? Do the titles that aren’t appearing contain any special html characters (&#@!”‘, etc.)?

    Sam

  • Comment by Stephen
    Date: April 24th, 2008 at 3:40 pm

    Thanks for the reply. I see that it seems to be browser specific. In Safari it looks fine and in Firefox 3 beta I am having the problem of no titles after the first two.

  • Comment by brian
    Date: May 6th, 2008 at 8:59 pm

    Thanks for the plugin, it’s great!

    I was wondering… how to configure the plugin if you want the background to be transparent?

  • Comment by Sam Burdge
    Date: May 7th, 2008 at 3:05 pm

    Hi Brian
    I hadn’t thought to add an option for transparent…I’ll have to add that feature in the next release! For now you could use this workaround…

    change the line of the plugin’s code:
    so.write(”flash_title_’.$flash_title_id.’”);

    to:
    so.addParam(”wmode”,”transparent”);
    so.write(”flash_title_’.$flash_title_id.’”);

    Hope this works for you…
    Sam

  • Comment by Jayvee
    Date: May 7th, 2008 at 5:38 pm

    Hey, great plug-in but sadly it won’t work in my site. The options panel don’t show the fonts.

    How do I fix that? =(

  • Comment by Jayvee
    Date: May 7th, 2008 at 6:15 pm

    BTW I’m using WP 2.5.1

    Thanks.

  • Comment by Jayvee
    Date: May 10th, 2008 at 10:15 pm

    I already figured out the problem. I upgraded the swfobject.js file. Thanks for the plugin.

  • Comment by Mikester
    Date: May 12th, 2008 at 7:13 am

    I just couldn’t get it to work…… :-(

  • Comment by Stephen
    Date: May 23rd, 2008 at 2:45 am

    Hi, it is me again. Just wondering if you will be updating your plugin to work with the new Firefox? Thanks!

  • Comment by alectro
    Date: June 10th, 2008 at 8:27 pm

    Hi Sam, I followed the instructions but I cant see it working both on Index and Single.

    That’s the blog: http://www.laondagrafika.com/blog/

    Thanks!

  • Comment by alectro
    Date: June 10th, 2008 at 8:28 pm

    ID,’start’) ?>
    <a href=”" rel=”bookmark”>
    ID,’end’) ?>

    thats the code I put on that files.

  • Comment by Ryan Creighton
    Date: June 12th, 2008 at 12:59 am

    Hi! GREAT plugin idea! i desperately want to use it.

    The trouble is that when i install the plugin, i get this error message:

    Plugin could not be activated because it triggered a fatal error.

    When i go to the plugin page under Options, i see various errors like:

    WordPress database error: [Table 'untolden_wrdp1.wp_flashtitles' doesn't exist]

    There are numerous similar errors. i checked my database, and it looks like the tables that the plugin needs aren’t getting installed.

    Any suggestions? i’m running ver 2.2.2.

    THANKS!!

  • Comment by zulu
    Date: June 13th, 2008 at 7:13 pm

    Hi. Great plugin :) Got one problem: There’s a “free space” before the title, means title, date and post don’t begin at the same beginning *lol* know what I mean? Visit my site to check, I can also send a screenshot if wanted (I don’t know how long this plugin will be activated). How can I fix this? Thanks a lot!
    zulu

  • Comment by zulu
    Date: June 13th, 2008 at 7:25 pm

    It’s me again! Another problem: The flash titles don’t link to full post as they used to do before, so I uninstalled the plugin now. But screenshot is ready to send ;)

  • Comment by Come Creare Titoli in Flash su WordPress Usando Qualsiasi Font | kosmo blog
    Date: July 7th, 2008 at 9:24 am

    [...] WP Flash Title è questo il nome del plugin che permette tutto questo. [...]

  • Comment by Fernando
    Date: August 6th, 2008 at 9:10 pm

    Hi Sam! Contratulations for the plugin, I think is amazing!

    You know? Im using the default theme for wordpress, the original code says:

    < div class=”post” id=”post-” >
    < a href=”" rel=”bookmark” title=”Permanent Link to ” >

    But when i replace this code for:

    ID,’start’)} ?>
    <a href=”” rel=”bookmark”>

    ID,’end’)} ? >

    … then the theme no work. :(

    I dunno where Im mistake. Can you help me? Thank you so much and sorry for my english language, still is very poor. :)

  • Comment by Fernando
    Date: August 6th, 2008 at 9:29 pm

    Hi again Sam…. i found my mistake, i forgot write class=”storytitle” in the code… is ok now… thank you so much again… your plugin is cool

  • Comment by steve
    Date: September 12th, 2008 at 8:29 pm

    hey there,
    thanks for the great plug! but i have a little prob:
    I am usin the lightbox2 plug to view my pics. when the lightbox effekt is running, the titles are “flashing” through the background of lightbox and sometimes appearing on the images. I recognized that this happens with every flash content embedded on the page… so its not really an issue for you but you might know a little workaround for that.
    it could be something with the z-indexes i guess?

    steve

  • Comment by Ronan
    Date: November 5th, 2008 at 10:24 pm

    Thanks Sam,

    great plug in,

    how would you code this to use in the main navigation of K2. it would solve many problems!
    Thanks

    Ronan

  • Comment by burak
    Date: November 9th, 2008 at 12:17 pm

    Thanks for that great plugin. The code, that you gave as an answer for the transparenc stuff, does not work. so.addParam(”wmode”,”transparent”);
    so.write(”flash_title_’.$flash_title_id.’”);

    I need that transparency and a little donation is on the way. Thanks.

Leave a Comment

Image mouseovers without javascript - CSS & Sprites

Date: 3rd March 2008 at 1:27 am | Filed under: development, scripts | Author: Sam Burdge

This article is an extension / improvement upon another article I published on my site previously: Simple Javascript for Image Mouseovers. As I am always looking for improved methods, I was discussing the pitfalls of the javascript method with a friend (and occasional comment writer / contributor to my site) who pointed me in the direction of CSS and image sprites. This lead me to research the topic further, and I found two articles in particular which were incredibly useful:

Read on…

2 Responses to “Image mouseovers without javascript - CSS & Sprites”

Leave a Comment