Social Media Share Buttons
Social media share buttons are an important asset for a blogger to have. They offer convenience to readers who can share posts without extra effort. Many popular solutions use a floating sidebar that follows a reader as they scroll down the page. This encourages them to share on social networks.
Their is a major drawback to these types of social media share buttons, they rely on Javascript and Jquery!
The more scripts you have running on your website the longer it takes to load. Speed is now a component of Google’s search algorithm. Your website needs to be lean. Speed up your blog by changing the way you handle your social media shares.
Social Media Share Buttons with Hyperlinks
Who thought you could use a simple HTML hyperlink to handle social media share buttons?
This was a new discovery to me as I was working on the design of my personal blog. I have been using a WordPress starter theme called Kraken. This theme uses “add-ons”, code-snippets that add functionality to your blog.
One of these add-ons is social sharing buttons made with HTML and CSS. No scripts involved!
Social Media Sharing Hyperlinks for Twitter, Facebook, Google+ and Pinterest
Here are the hyperlink markup for the major social networks taken from the Kraken social share add-on by Chris Ferdinandi.
Twitter
‹a target=”_blank” href=”https://twitter.com/intent/tweet?text=YOUR-TITLE&url=YOUR-URL&via=TWITTER-HANDLE”›Tweet‹/a›
Facebook
‹a target=”_blank” href=”http://www.facebook.com/sharer/sharer.php?u=YOUR-URL”›Share on Facebook‹/a›
Google+
‹a target=”_blank” href=”https://plus.google.com/share?url=YOUR-URL”›Plus One on Google+‹/a›
Pinterest
‹a target=”_blank” href=”http://pinterest.com/pin/create/button/?url=YOUR-URL&description=YOUR-DESCRIPTION&media=URL-TO-YOUR-IMAGE”›Pin on Pinterest‹/a›
Social Media Sharing Hyperlink Examples
Using hyperlinks for your social media sharing gives you a lot of options to play with. Here are a few examples of how you can use this code in a blog post.
Example: Tweet This Quote
“The true sign of intelligence is not knowledge but imagination.” – Albert Einstein (Tweet)
‹a href=”https://twitter.com/intent/tweet?text=“The true sign of intelligence is not knowledge but imagination.” – Albert Einstein&url=http://www.brainyquote.com/quotes/quotes/a/alberteins148802.html&via=brainyquote” target=”_blank”›Tweet‹/a›
Example: Pin This Image Button
‹a target=”_blank” href=”http://pinterest.com/pin/create/button/?url=http://instagram.com/p/fFVurrkTO-&description=You Know You’re a Blogger When…&media=http://distilleryimage2.ak.instagram.com/297506cc2dae11e3887422000ab68f87_7.jpg” style=”background-color:#cb2027;color:#FFF;padding:1em;text-decoration:none”›Pin on Pinterest‹/a›
A Great Resource- The hexadecimal color codes for popular social networks.
The great thing about hyperlinks for social media sharing is that they can be used anywhere you are allowed to use HTML! This means you can use them on other people’s websites. Even in comments!
Create Hyperlinks not Plugins for Better Social Media Sharing
As you can see, the ability to create your own social media share buttons via hyperlinks gives you a lot of freedom. I especially like them for sharing on Pinterest because I can define what image is used.
Place your links next to media for increased sharing.
“Facebook has found that ‘Like’ buttons do best when they’re close to content that is both visually engaging and emotionally resonant, such as video.” – Matt Baume, Poynter.com
Allrecipes Case-Study- Pinterest for Business
If you would like to replace your WordPress Plugin with a code that will generate the proper social media sharing hyperlinks for your posts, please contact me on my website. I already have a code-snippet that can be adapted for any WordPress blog.
What are you using for your social media share buttons today?
Photo Credit:Derrick Collins on Flickr [CC BY-ND 2.0]