Creating “Share This on Facebook/Twitter” Links

http://blog.socialsourcecommons.org/2011/03/creating-share-this-on-facebooktwitter-links/

Written by Matt on March 2, 2011 — 5 Comments

Recently, someone asked me how to put together a link in HTML that, when clicked, took the clicker to their Twitter page with a tweet already filled in. She basically wanted an easy way to let people share her newsletter. I was putting this little color-coded guide together for her and I thought I’d turn it into a blog post. Check it.

Regular Ol’ Links

To begin, let’s review how to make a simple link in HTML. First, make sure you’re editing in HTML and not Rich Text. You’ll be able to tell because you’ll see a bunch of “<"s and ">“s everywhere. Below is a color-coded diagram of the code for an HTML link. (If you’re a newbie to HTML, remember that your code won’t be in color)

<a href="http://www.google.com">Google</a>

• Blue is the HTML code
• Orange is the URL where the link will go
• Black is what the link will say

Example:

Google

Share on Twitter Links

Creating a link to automatically fill in some Tweet text is pretty simple. You just need to know some additional code to stick into the HTML link code. Let’s take a look:

To make a link that, when clicked, sends the clicker to this:

…use the following code:

<a href="http://twitter.com/share?text=An%20Awesome%20Link&url=http://www.google.com">
Share This on Twitter</a>

• Blue is the HTML code
• Green is the code that gets Twitter to generate a tweet through a link
• Red is the text of the tweet. You can’t use spaces in this area of HTML but you can get spaces in your tweet text by typing %20 instead.
• Orange is the URL that will be included in the tweet. Twitter will automatically shorten it to save space.
• Black is what the link will say

Example:

Share This on Twitter

Learn how to add #-hashtags and @-tag users with Share this on Twitter links.

Share on Facebook Links

Creating auto-share links for someone’s Facebook Wall is just as easy.

To make a link that, when clicked, sends the clicker to this:

…use the following code:

<a href="http://www.facebook.com/sharer.php?u=http://www.google.com">
Share This Link on Facebook</a>

• Blue is the HTML code
• Green is the code that gets Facebook to generate a wall post through a link
• Orange is the URL that will be attached to the post.
• Black is what the link will say

Example:

Share This Link on Facebook