Simple ‘Tweet This’ jQuery Function

This post is old. It may contain broken links, missing images and incorrect information.

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.

Jack Barber, freelance web developer based in Whitby, UK

Written By

I'm a freelance web developer based in Whitby, UK. I built my first website using GeoCities, and learned to write HTML and CSS using Notepad. Web technology has come a long way since then, as have my web development skills!

These days I love helping my clients make the most of the internet. I provide design, development, marketing and IT support services, forming long-term partnerships with my clients.

Connect With Me

Posted in Uncategorized