Fully Valid, SEO-Friendly Social Media Links for WordPress

♦ Posted by Jeff Starr in HTML, PHP, SEO, WordPress

Updated January 23, 2020 • 20 comments

With the explosion of social media, networking, and bookmarking services, there are a zillion ways to add “Share This Post” functionality to your WordPress-powered sites. In addition to the myriad services and plugins, we can also add these links directly, using nothing more than a little markup and a few choice PHP snippets. Such individual links provide full control over the selection, layout, and styling of each link without requiring the installation of yet another WordPress plugin.

This article shares SEO-friendly code snippets for ten of the most popular social media sites using completely valid XHMTL-Strict markup. All of the following code snippets feature:

nofollow attributes to conserve pagerank
descriptive title attributes for every link
encoded ampersands via & characters to keep ‘em valid
WordPress template tags for dynamic permalink and title generation
PHP’s urlencode() function to encode titles for valid code

Everything here is 100% copy-&-paste, plug-n-play, and ready to go! No editing required! Simply add this code to the desired location in your markup and enjoy! :)

Facebook

It seems like all of my non-geek friends and relatives have managed to find me on Facebook. Here’s a way to let them share your posts with each other:

<a rel="nofollow" href="http://www.facebook.com/sharer.php?u=<?php the_permalink();?>&t=<?php echo urlencode(get_the_title($id)); ?>" title="Share this post on Facebook">Share on Facebook</a>

Twitter

Here is a “quick-and-dirty” way to enable visitors to easily and quickly tweet your posts with a single click:

<a rel="nofollow" href="http://twitter.com/home?status=<?php echo urlencode("Currently reading: "); ?><?php the_permalink(); ?>" title="Share this article with your Twitter followers">Tweet this!</a>

And of course, we can’t forget Reddit, a social linking site that is very popular among certain circles. Here’s how to get in on the action:

<a rel="nofollow" href="http://reddit.com/submit?url=<?php the_permalink(); ?>&title=<?php echo urlencode(get_the_title($id)); ?>" title="Share this post on Reddit">Share on Reddit</a>

AddThis

AddThis.com is a popular service that enables users to easily add your posts to a zillion different social sites. Once you have an account, change “USERNAME” in the code below and use the link as a fallback for your readers to share your site with the obscure site of their choice:

<a rel="nofollow" href="http://www.addthis.com/bookmark.php?pub=USERNAME&url=<?php echo get_permalink(); ?>&title=<?php echo urlencode(get_the_title($id)); ?>" title="Bookmark this article at your favorite social media site">Share this post at your favorite social media site</a>

Got More?

While we’re on the subject, what are your favorite social media sites? Did I cover all the most popular sites, or are there others that should be added to this post? Either way, by extrapolating the techniques used in this article, you can add a custom “Share This” link for just about any of your favorite social media services.

{ Hard to believe it’s almost December.. }

More Information

For more help with writing parameterized query strings, check out my recent article How to Write Valid URL Query String Parameters

About the Author

Jeff Starr = Designer. Developer. Producer. Writer. Editor. Etc.

20 responses to “Fully Valid, SEO-Friendly Social Media Links for WordPress”

Chris Coyier 2008/11/23 12:02 pm

Excellent. Just changed up my links on CSS-Tricks doing it this way.

One thing I noticed is that the del.icio.us link doesn’t like the encoded titles when they actually have characters that are encoded.

With encoding (apostrophe is weird):
http://skitch.com/chriscoyier/hq4t/save-a-bookmark-on-delicious

Without encoding (apostrophe is intact):
http://skitch.com/chriscoyier/hq4m/save-a-bookmark-on-delicious

So it’s a toss up between valid code and working code…

Louis 2008/11/23 3:24 pm

I’ve always thought that this type of functionnality has to be handled by the browser. I mean, if someone doesn’t use/like these social services – like I do – he shouldn’t be disturbed by content that only interest certain people. At the opposite, someone that is frequently bookmarking, rating, etc, should be able to do it quickly.

Though, I think that this is the role of the browser – with GreaseMonkey scripts, plugins, bookmarklets, or whatever AJAX technology. Does every site on the web need to display those buttons to give the user the capability of rating his favorite article?

I think the solution should be on the user’s side.

—

But these reflexions appart, if there is a need to implement those buttons, your sexy summup is clearly worth a bookmark Jeff ;)

Jeff Starr 2008/11/23 3:18 pm • Post Author

Hi Chris, for the Delicious link, replace this:

urlencode(get_the_title($id));

with this:

wp_kses_normalize_entities(get_the_title($id));

..which is a built-in WordPress function (located in wp-includes/kses.php) designed to normalize HTML entities. Apparently, Delicious is mighty picky about parsing special characters, but this function seems to do the trick!

Chris Coyier 2008/11/23 4:06 pm

I gave it a shot but no dice. I do have that file, and I’m running 2.6.3.

http://skitch.com/chriscoyier/hxce/its-wordpress-week

It looks like that function is just failing and returning nothing?

Jeff Starr 2008/11/23 6:20 pm • Post Author

@Chris: Just tested on WordPress 2.6.2 and it seems to work as advertised. Looking at the source-code screenshot you posted, it almost looks as if you may have copy/pasted the code incorrectly (although I could certainly be wrong about this!)..

Here is the code again, this time delivered within the complete link:

<a rel="nofollow" href="http://del.icio.us/post?url=<?php the_permalink() ?>&title=<?php echo wp_kses_normalize_entities(get_the_title($id)); ?>" title="Bookmark this article at Delicious">Bookmark this article at Delicious</a>

Try replacing the entire link and see if it works. Let me know how it goes!

Chris Coyier 2008/11/23 6:40 pm

Yeah it was my bad. I forgot “echo”. Cheers! Nice to have that area tidied up.

Simon 2008/11/24 2:24 am

Hey Jeff, one more very interesting post. One I’ve come in contact with lately is iliketotallyloveit.com which is interesting for gadget sites and the likes.

Jeff Starr 2008/11/24 7:29 am • Post Author

@Louis: determining whether or not to include or omit different types of functionality is case-specific and should be left up to the page designer. Some sites would be just silly if they didn’t include social media links; other sites don’t need sidebars; some don’t need comments; and so on. Design is such a case-specific affair that it is impossible to generalize about social media links.

I do think that too many sites go overboard with the whole “Add this” thing. Most of the sites that include a zillion buttons for different social media services aren’t worth bookmarking in the first place.

This is one of the useful aspects of using individual links like the ones provided in this article. The designer has full control over which links are worthy/necessary to include on their pages. I think a few well-placed links to key social-media sites benefits the site without detracting from the user experience.

Donace 2008/11/24 8:32 am

Arckh you beat me to the punch by a week (had it on scheduled to post next week)!

Had about 70 sites ready go up with a little twist… the first stage of my ‘hello visitor’ code…it would grab the reffer and show a larger sprite for it.

All PHP based no JS trying to make it fast ;)

Though my urls were more like

‘http://reddit.com/submit?url=PERMALINK&title=TITLE’

this seemed to work…and becasue of the lack of ‘echo’ etc I thought faster and efficent.

Let em know your thoughts ;)

Jeff Starr 2008/11/24 7:33 am • Post Author

@Simon: Sup! Thanks for dropping by.. I thought I saw a couple of your products listed at that gadget site.. ;)

Graham Smith 2008/11/24 8:56 am

I’m fully behind Jeff with this. Choosing to use any social links or not can so depend on the actual post you are writing not so much the blog as a whole.

As pointed out, some blogs are not even worthy of having any social buttons, yet they are the ones that seem to want to cover all basis.

I can only really go with the various plug-ins available, although I am very much into wanting clean text only options for mine. I want the functionality but I actually don’t like having them there at all. I have tried not having them at all, to using plug-ins like Sociable, Add-this, Share-this etc, but all are just ‘bloat.

I keep going backwards on forwards on this and sometimes wonder if there is actually any benefit to having them at all. From a personal point of view I never use them on other sites, I use the Bookmarklets that I have in my FF bookmark bar for the services I actually use. This suits me, so I wonder how many other people do it the same way.

If you are into bookmarking and voting for sites then I think you are more likely to have your own browser based system than rely on the site to provide it.

So what now, no bookmarking, share it buttons at the end of the post or yeah?

Graham

Donace 2008/11/24 10:00 am

Yea I plan to ‘optionise’ once I have coded the majority and ‘figured’ out how to optionise it :p

Right now I have just coded it in using ‘case’ and ‘break’ commands.

Comments are closed for this post. Something to add? Let me know.

Chris Coyier 2008/11/23 12:02 pm

Excellent. Just changed up my links on CSS-Tricks doing it this way.

One thing I noticed is that the del.icio.us link doesn’t like the encoded titles when they actually have characters that are encoded.

With encoding (apostrophe is weird):
http://skitch.com/chriscoyier/hq4t/save-a-bookmark-on-delicious

Without encoding (apostrophe is intact):
http://skitch.com/chriscoyier/hq4m/save-a-bookmark-on-delicious

So it’s a toss up between valid code and working code…
Louis 2008/11/23 3:24 pm

I’ve always thought that this type of functionnality has to be handled by the browser. I mean, if someone doesn’t use/like these social services – like I do – he shouldn’t be disturbed by content that only interest certain people. At the opposite, someone that is frequently bookmarking, rating, etc, should be able to do it quickly.

Though, I think that this is the role of the browser – with GreaseMonkey scripts, plugins, bookmarklets, or whatever AJAX technology. Does every site on the web need to display those buttons to give the user the capability of rating his favorite article?

I think the solution should be on the user’s side.

—

But these reflexions appart, if there is a need to implement those buttons, your sexy summup is clearly worth a bookmark Jeff ;)
Jeff Starr 2008/11/23 3:18 pm • Post Author

Hi Chris, for the Delicious link, replace this:

urlencode(get_the_title($id));

with this:

wp_kses_normalize_entities(get_the_title($id));

..which is a built-in WordPress function (located in wp-includes/kses.php) designed to normalize HTML entities. Apparently, Delicious is mighty picky about parsing special characters, but this function seems to do the trick!
Chris Coyier 2008/11/23 4:06 pm

I gave it a shot but no dice. I do have that file, and I’m running 2.6.3.

http://skitch.com/chriscoyier/hxce/its-wordpress-week

It looks like that function is just failing and returning nothing?
Jeff Starr 2008/11/23 6:20 pm • Post Author

@Chris: Just tested on WordPress 2.6.2 and it seems to work as advertised. Looking at the source-code screenshot you posted, it almost looks as if you may have copy/pasted the code incorrectly (although I could certainly be wrong about this!)..

Here is the code again, this time delivered within the complete link:

<a rel="nofollow" href="http://del.icio.us/post?url=<?php the_permalink() ?>&title=<?php echo wp_kses_normalize_entities(get_the_title($id)); ?>" title="Bookmark this article at Delicious">Bookmark this article at Delicious</a>

Try replacing the entire link and see if it works. Let me know how it goes!
Chris Coyier 2008/11/23 6:40 pm

Yeah it was my bad. I forgot “echo”. Cheers! Nice to have that area tidied up.
Simon 2008/11/24 2:24 am

Hey Jeff, one more very interesting post. One I’ve come in contact with lately is iliketotallyloveit.com which is interesting for gadget sites and the likes.
Jeff Starr 2008/11/24 7:29 am • Post Author

@Louis: determining whether or not to include or omit different types of functionality is case-specific and should be left up to the page designer. Some sites would be just silly if they didn’t include social media links; other sites don’t need sidebars; some don’t need comments; and so on. Design is such a case-specific affair that it is impossible to generalize about social media links.

I do think that too many sites go overboard with the whole “Add this” thing. Most of the sites that include a zillion buttons for different social media services aren’t worth bookmarking in the first place.

This is one of the useful aspects of using individual links like the ones provided in this article. The designer has full control over which links are worthy/necessary to include on their pages. I think a few well-placed links to key social-media sites benefits the site without detracting from the user experience.
Donace 2008/11/24 8:32 am

Arckh you beat me to the punch by a week (had it on scheduled to post next week)!

Had about 70 sites ready go up with a little twist… the first stage of my ‘hello visitor’ code…it would grab the reffer and show a larger sprite for it.

All PHP based no JS trying to make it fast ;)

Though my urls were more like

‘http://reddit.com/submit?url=PERMALINK&title=TITLE’

this seemed to work…and becasue of the lack of ‘echo’ etc I thought faster and efficent.

Let em know your thoughts ;)
Jeff Starr 2008/11/24 7:33 am • Post Author

@Simon: Sup! Thanks for dropping by.. I thought I saw a couple of your products listed at that gadget site.. ;)
Graham Smith 2008/11/24 8:56 am

I’m fully behind Jeff with this. Choosing to use any social links or not can so depend on the actual post you are writing not so much the blog as a whole.

As pointed out, some blogs are not even worthy of having any social buttons, yet they are the ones that seem to want to cover all basis.

I can only really go with the various plug-ins available, although I am very much into wanting clean text only options for mine. I want the functionality but I actually don’t like having them there at all. I have tried not having them at all, to using plug-ins like Sociable, Add-this, Share-this etc, but all are just ‘bloat.

I keep going backwards on forwards on this and sometimes wonder if there is actually any benefit to having them at all. From a personal point of view I never use them on other sites, I use the Bookmarklets that I have in my FF bookmark bar for the services I actually use. This suits me, so I wonder how many other people do it the same way.

If you are into bookmarking and voting for sites then I think you are more likely to have your own browser based system than rely on the site to provide it.

So what now, no bookmarking, share it buttons at the end of the post or yeah?

Graham
Donace 2008/11/24 10:00 am

Yea I plan to ‘optionise’ once I have coded the majority and ‘figured’ out how to optionise it :p

Right now I have just coded it in using ‘case’ and ‘break’ commands.

12 • Newer Comments »