SSC Toolbox Social Source Commons Blog

Nonprofit Tech, Tools and Social Media

A program of Aspiration 
Aspiration 

Creating “Share This on Facebook/Twitter” Links

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:

Auto Tweet Example Screenshot

…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:

Auto Facebook Share Example Screenshot

…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

What are your favorite tricks to make your links do more?

Get more out of your Share on Twitter links with this post
Making a ‘Tweet This’ Button with # and @

 



  • http://twitter.com/Greenaction4EJ Greenaction

    This is extremely helpful! This will hopefully get more of our supporters to share our news and updates to their own networks. Thanks for looking into this!

  • http://blog.socialsourcecommons.org/ Matt Garcia

    Thanks, Lisa! I’d love to see examples of this type of thing if you end up using it in your communications further down the line, so feel free to post some links. :D

  • Anonymous

    This is really cool. It might be nice to actually include some of these links in the body of my blog posts, since I think many times the “share this” button that sits in the navigation bar or in the footer is too easily overlooked.

  • http://blog.socialsourcecommons.org/ Matt Garcia

    Definitely. I’ve been thinking lately how the “Share This” buttons that border every post, page and block have pretty much become part of the ignorable template of the website. It’d be interesting to see how many more people used the functionality if it was actually called out in the text of the post. If you play around with it, I’d love to hear what comes up!

  • http://twitter.com/UGrokIt_Carrie Carrie Requist

    Very well written post that explains exactly what I need.  Thanks.

Connect with SSC


RSS Feed  Twitter  Facebook

Aspiration Publications