How to Add Share Icons to Your Blog or Website

Many clients have asked this question: How do I get those cute share icons onto my blog or web page? It’s quite simple if you’re willing to do a little diving into the code. The two most popular share links are:

You’ll notice at the top of this code we have the Tweetmeme and AddThis links (and if at this point you’d like to click them and share this post, we’d love you for it!)

If you’re blogging in Blogger
You need to add the code for these icons into your Blogger template. If you add it as a widget in the sidebar, then the share link will go to your blog home page, and not to a specific blog post. It’s better to have it go to a specific blog post so then you can reference what the blog is about when you share the link. Here are tutorials for adding these icons

If you’re blogging at WordPress.com
Wordpress makes your life easier with simple widgets you can add to your blog template. There are several different kinds you can add, each with its own design. Tweetmeme And AddThis use Javascript, which is not allowed in blogs hosted at WordPress.com, so you cannot use these share icons here. The following links show you how to add the other share buttons if you are using WordPress.com to host your blog:

If you’re blogging on a personally hosted WordPress.org blog
The personally hosted version of WordPress has a lot more flexibility, and there are many social link plugins that are easy to add. Here are some links that will help you decide what to choose and how to install these plugins:

If your website is built in Joomla
Joomla offers several options for social media icons. There are ones that reside right on the page, and then there are global plugins that you can put into the header bar. We have used the following two extensions with great success:

For the traditional Tweetmeme and AddThis, you would need to add HTML code to your articles using a custom code plugin (Sorcerer is a great one). You would then follow the HTML directions in combination with the plugin syntax to put the share links onto your page.

If you have a regular HTML website
Adding the share icons is going to have to be done one page at a time. You will have to get the HTML code, and paste it into your page using an HTML editor, or by viewing the source code in your WYSIWYG (i.e. Dreamweaver) editor. Here are tutorials that show how to add Tweetmeme and AddThis icons to your pages.

7 Responses to “How to Add Share Icons to Your Blog or Website”

  1. Great post. Really enjoyed it 🙂

  2. […] 9. Add social bookmarking links on your pages: This is a simple and quick way to get your visitors to help you promote your site. By adding these links, you’re encouraging them to share your information if they find it helpful. You’d be amazed how many people take the 15 seconds required to click on these links. We recently wrote a post about how to add share icons to your website or blog. […]

  3. Great article! Really enjoyed reading.

  4. Nice writing. You are on my RSS reader now so I can read more from you down the road.

  5. Brian Bell says:

    Thanks for an interesting and stimulating post.

  6. Merabestid says:

    I want to add the sharing icons in my static web pages. i think the article is missing the code for static HTML pages? can anybody help?