Jack Barber / Website Design

Simple 'Tweet This' jQuery Function

I've just spent an hour fiddling around trying to make a simple 'tweet this' plugin with jQuery.

I wanted something really simple - basically something which would work by simply adding a CSS class to a paragraph tag.

I've quickly written it up incase anyone else can make use of it. And as usual, if you spot any improvements which could be made, feel free to tweet them at me or email me.

The Function

My completed function looks like this:

What Does It Do?

  • It looks for each instance of p.tweet-extract on the page
  • It takes a copy of the text and then removes the original text from the paragraph tags
  • It replaces the text with the text wrapped in a link, plus a span which contains the 'Tweet This' call to action

Styling

You'll want to style your markup to match your site, but the elements you'll need include in your stylesheet are:

And that's that!

Demo

Here are some demo paragraphs which have the tweet-extract class applied, along with my styling:

How to create a quick and simple jQuery 'tweet this' function.

Go on, click it!

It's really straightforward - much easier than messing around with bloated plugins etc.