Archive for February, 2010

Occasional you’ll want to control how people leave your site. Maybe it’s to let them know they will be going to a different site, maybe it’s just to control who gets linking credit for search engine spiders, or maybe you want the to see one more ad before leaving. In any case, here’s how I’ve solved the problem when asked by clients.

First some javascript to turn all links into redirects to a specific page…

<script>
function catchOutLinks()
  {
  for (i=0; i < document.links.length; i++)
    {
    var url = window.location.protocol + "//"
        + window.location.host;
    if((document.links[i].href.indexOf(url)>-1))
      {
      // ignore local links
      }
    else
      {
      oldref=document.links[i].href;
      document.links[i].href='/leaving.php?url='+oldref;
      }
    }
  }
</script>

Place that in the <head></head> portion of whatever template will be used to display pages you want outlinks on. To activate it you can either use an onLoad statement in your <body> tag, i.e….

<body onLoad="catchOutLinks()">

…or use this in the footer, below any other links…

<script>
catchOutLinks();
</script>

Next you’ll want to create a page using your regular template, but for the content use the following…

<?
$url=$_GET['url];
?>
You will be redirect to <?=$url; ?>
<META http-equiv="refresh" content="3;URL=<?=$url;?>>

Save the file, and make sure it’s a php file (has the extension .php) and in the javascript above, change “/leaving.php” to the url of the file you just saved.

A lot of people like the idea of making blogging a two way street. That’s why they have comments. But that’s also why they post their email address often accompanied by the encouragement “Email me”. Ironically, some of those people get annoyed when you actually do email them.

It’s good to provide a way for people to contact you beyond comments. Unfortunately just simply putting your email address on your blog means it can then be harvested by spam spiders. It’s better to make it harder for spammers to get it. Some people like to use HTML to disguise the email address, like coding it as “name<!– ignore this –>@domain<!– ignore this –>.com” (which would be rendered by the browser as name@domain.com.

There are a lot of sites that will create an email image for you…the trouble being, will they create the image, then sell your email address to spammers. You can always use photoshop, or some other graphics program and make your own email image, but not everyone has access to those.

To make it easy I’ll provide one here. I have no interest in collecting email addresses, and any you enter in this file will be lost once the image is created…

There’s a simple way and a hard way to do this. The hard way also adds a shortened url, allowing the reader to include more of the headline in the 140 characters twitter allows.

First the easy way.

WordPress…

<a href="http://twitter.com/home?status=<?
the_title('','',FALSE);
?>%20<?
the_permalink();
?>" target="_blank">re-Tweet this</a>

Movable Type…

<a href="http://twitter.com/home?status=
<$MTEntryTitle$>%20<$MTEntryPermalink$>
" target="_blank">re-Tweet this</a>

Now the hard way involves going to http://bit.ly/pages/tools/developer-tools/ and joining. Get your API Key and username. Then create the following PHP file (you can name it whatever you want, but just remember the name, because we’ll be using it). Make sure to replace [bitly username] with your bitly username and [API Key] with your bitly API Key.

<?
$link=urldecode($_GET['l']);
$title=urldecode($_GET['t']);
$rtData=implode('',file("http://api.bit.ly/shorten?
version=2.0.1&longUrl=$link&login=
[bitly username]&apiKey=[API Key]"));
$out=json_decode($rtData, true);
$results=$out['results'];
$articleLink=$artData['article_link'];
$myLink=$results[$articleLink];
$shortUrl=$myLink['shortUrl'];
header("Location: http://twitter.com/home?
status=$title%20$shortUrl");
exit();
?>

Once that’s created with the correct username and API Key, save it to your server in a location reachable from the web. Let’s say you save it at http://myserver.com/retweet.php. We’ll then use the following for out links.

WordPress…

<a href="http://myserver.com/retweet.php?t=<?
the_title('','',FALSE);
?>&l=<? the_permalink();
?>" target="_blank">re-Tweet this</a>

Movable Type…

<a href="http://myserver.com/retweet.php?
t=<$MTEntryTitle$>&l=<$MTEntryPermalink$>
" target="_blank">re-Tweet this</a>

This then will take the title and url, convert the url into a shortened url and make your twitter status look something like this…

How to make a "Retweet this post" link http://bit.ly/ddmFZr

This is actually even easier. First, because titles and urls will reformat if placed in regular urls, unlike email links, and second because Facebook has widgets that also make it easier.

Facebook has a page to show you how to create a share link, but in order to get it to work with each individual post, you’d need to use the respecting blogging platform tags. On and individual page, the code generated by the Facebook widget would work, but if you still want links from you mian page, where there’s a long list of posts, and the link should be to the individual post, then you’ll want a customized link.

For WordPress…

<a href="http://www.facebook.com/sharer.php?u=<?
the_permalink();
 ?>&t=<?
the_title('','',FALSE);
?>" target="_blank">Post this to Facebook</a>

For Movable Type…

<a href="http://www.facebook.com/sharer.php?
u=<$MTEntryPermalink$>
&t=<$MTEntryTitle$>"
target="_blank">Post this to Facebook</a>

Again, if you’d like to use an image you can find some nice Facebook icons at http://www.iconspedia.com/pack/web-2-0-social-bookmarks/ . I suggest using the linux version, since it has the type of images you’d need for a web site. Just make sure you set the border=”0″ or some browsers will put an ugly blue border around the image as it becomes a link.

Maybe this is really simple for many, but I still see people without an email link on their individual posts. The reason for it is if a reader finds the post very useful, then they can easily email it to a friend, helping increase the readership of your blog.

For WordPress…

<?
$emailTitle =urlencode(the_title('','',FALSE));
$emailTitle = str_replace('+', ' ', $emailTitle);
?>
<a href="mailto:?subject=<? echo $emailTitle;
?>&body=Check this out!%0A%0A<?php the_permalink()
?>">Email this Post</a>

For Movable Type (if your static pages are PHP)…

<?
$emailTitle =urlencode('<$MTEntryTitle encode_php="q"$>');
$emailTitle = str_replace('+', ' ', $emailTitle);
?>
<a href="mailto:?subject=<? echo $emailTitle;
?>&body=Check this out!%0A%0A<$MTEntryPermalink$>"
>Email this Post</a>

If your MT static pages are not PHP, then I doubt it will work for you.

If you want to use a little envelope graphic, there’s a tons of icons at http://famfamfam.com/. Grab the “Silk” package, and make sure you give him a link back. You’d want to format the image part like this…

<img src="envelope.png" title="Email this Post">

The title tag is needed so the text will appear when the image is mousedover.

About me

I've been developing web sites for over 12 years. I started with HTML, moved on to Perl and now do mostly PHP with a lot of MySQL and Javascript as well.

The purpose of this blog is to write about many of the simpler scripting solutions bloggers are either unaware of or unable to implement. Hopefully I'll have something you can use

Danny Carlton

Advertising
Advertising

Switch to our mobile site