Tweeting Like It's Second Nature

Download your FREE copy and tweet like a PRO.

Add Social Media Share Buttons Anywhere Without a Plugin

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

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

Pin on Pinterest

‹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]

Susan builds all the things; communities, websites and apps. She is the community manager for Gygax Magazine. Sometimes she talks to herself on the internet via her blog Cirquedumot.

59 comments On Add Social Media Share Buttons Anywhere Without a Plugin

  • Thank you, because anyways I was literally fed up just installing and setting up the plugins in my website. Its like, now if I want any buttons of social medias I am going to land up here for this tutorial and recommend to the ones who need.
    Charmie recently posted…Flipkart acquiring Myntra : Is Amazon the reason behind this big move?My Profile

  • Pingback: Weekly Dose of Blog Design Inspiration, Downloads + Tips #13 ()

  • Pingback: Social Media Optimization Trilogy - Cirquedumot ()

  • Media Share buttons are really helpful but plugins make site little slow.
    So it will be better to have buttons without plugins.

  • Pingback: How to Add Services to Jetpack Sharing Plugin for WordPress ()

  • Informative post, I think using of lot of plugins will slow down our blog so we need to use codes as example is already here. I’ll use the share button codes.

    Thanks for the share,
    Ashish recently posted…5 Tips to Choose Best Android TabletsMy Profile

  • That is great Susan, without plugin sharing buttons are awesome. It won’t be a load on my website with extra burden of plugin. Finally after a long time a get complete guide on it. Thanks for nice share…
    Atul Kumar Pandey recently posted…Does Shared Hosting Affect Search Engine RankingsMy Profile

  • Go knowledge to share.
    With this it is easy to share and build links. I have gained a lot. Thanks For sharing.

  • 🙂
    I didn’t know that there was html for social media buttons. Not that I would’ve used it – I’m one of the “I might break it” brigade! Having said that, I had to update some plugins the other day and one of them caused a fatal error. That gave me a few hours of “Aaaaarghhh!”

    If I used html to make some buttons, where would I put it in all those lines of code?

    Thanks for a very helpful post!
    Shan

  • Hi susan loved your post, it is blast to include social media icons without plugins as these plugins sometimes make your blog go slow and increases loading time. I will try this for sure. Plugins sometimes suck :P. I have used many but digg is good till now
    Jitendra Vaswani recently posted…What are Wingdings & How To Use It For Social BrandingMy Profile

  • Hi Susan,

    This is a very useful piece of information. I use AddThis for may social sharing buttons. The result is nice but the plugin consumes a lot of resources. Also, my principle is ” Whenever you can, use code instead of a plugin.”
    I am interesting in replacing the plugin with code for 4-5 main social networks (FB, Twitter, GPLus, LInkedIn). I tried to contact you on your site but it launches an Outlook form that requires me to configure my email client (and I can’t do that for the moment).

    Have a wonderful day
    silviu recently posted…How to Make a Podcast and Attract ListenersMy Profile

  • Oh dear,

    I feel like I walked into a language class as I am so confused by this stuff. Thank you for writing about it.

    I need to decipher what it all means. I had no idea there was so much about plugins! I do know they slow down your blog so I will be sure to look into this and make some changes. I’d like to try to get rid of some of my plugins for sure.

    Thanks so much Lisa,
    Barbara
    Barbara Charles recently posted…The Blogging Syndrome and Blogging to SuccessMy Profile

    • The plug-in problem is a confusing one. Even as I delve deeper into what they do, I realized it isn’t just quantity that causes the problem. It has a lot more to do with quality and how many scripts they are initializing to run. I know that probably sounds like gibberish.

      The short but sweet answer is to backup your website regularly and don’t download plugins from authors that you are unsure of. I would avoid anything that isn’t listed on the WordPress.Org plugin directory. WordPress has very high standards that plugin authors must meet to be listed.

  • Hey Susan,
    We all know that social share buttons are most important for a blogger. Also it plays vital role in SERP rankings as well as getting visitors. Thanks for share!!

  • Hey Lisa,
    This is something to look forward to as plugins happen to slow down a WordPress site to some extent.
    As for myself, I use sharing module of Jetpack. It is easy to use and I get everything I need on my site. Earlier I used to use AddtoShare plugin to handle my social media needs.

    I will definitely give this a try. Thanks for this awesome piece of information.
    Regards,
    Vineet Saxena
    Vineet Saxena recently posted…5 Reasons Why You Must Use Child Themes For WordPressMy Profile

  • Hi Susan,

    Nice to meet you here. When it comes to plug ins, I don’t mess around. Too many of my blogging buddies have crashed things with too many of them.

    Now I have a person that takes care of mine. I know better than to do it myself because I would probably break my blog! I have the necessary ones that I need to do the tasks I want to perform, and that is it!

    Thanks for this article,

    -Donna
    Donna Merrill recently posted…Beginning To BlogMy Profile

  • Hey Susan,

    Great post on not using plugins for social media share buttons. I’ve actually used this strategy with wordpress.com in the form of widgets so it doesn’t allow javascript. At least at that time. But plugins can definitely slow the speed of your blog down, and plus you have to keep them up-to-date so they won’t “hinder” your blog into perform at it’s best.

    But I do have to admit that I prefer the buttons because of the how much more attractive they are compared to hyperlinks, but I tell you this is good to know about these options! Especially for those that are just starting! Thanks for sharing!

    • Sherman that is a really great point. When I wrote this, I wasn’t even thinking about using them in widgets! A few people have suggested this in the comments and that is wonderful. I learn a lot from comments! Thank your for writing.

      The more I think about this situation, the more I realized that it isn’t plugins themselves that are at fault. It is the coding standards and use of scripts by the developer. All a plugin does is add to the theme functions of your blog in a way that can be removed easily. Therefore adding HTML & CSS styles buttons into a plugin, probably wouldn’t be an issue and they could be removed. The real problem comes from the use of javascript, jquery, and any code bloat. Not to mention security issues and lack of updating by developers!

      The more you delve into these topics the more there is that has to be discussed to really give the issues their due attention.

  • Interesting post. I have to admit I use plugins for my social media buttons but it’s good to know how to do that without relying on a particular plugin. It’s always great to learn new things.
    Thanks for sharing.
    Felipe Kurpiel recently posted…Using Comments for SEO and Blog PromotionMy Profile

  • Hi Susan

    I currently use the JetPack sharing buttons but you’re right, scripts can really slow a blog down.

    I prefer to have the buttons rather than just a link but I’m sure there’s a way to do that using your html examples, some icons and a bit of CSS.

    I like the idea of being able to add a Tweet this link though next to a quote. I hadn’t really thought about that. I’ve seen it on a few blogs and assumed they achieved it using a plugin.
    Tim Bonner recently posted…Accepting Guest Posts So Far Has Been Hit And MissMy Profile

    • Yes, there is a specific plugin for creating the “tweet this quote”. I think with the Hyperlink you can see that you can do the same thing, but customize it in your own unique way. Which is very cool. I don’t really know how that plugin does it!

      I use an icon font with my buttons, Font Awesome. It really makes them pop!

  • I feel that it is lot of hard work putting the social media share buttons our-self and also there are so many sites out there now it becomes really difficult so I prefer using a plug-in yet your article is really unique and would help many people who thought it was not possible without a plugin. Thanks

    • Agreed, it is hard work to do something like this. The more I think about it, the best method is only to use these in a blog post unless you know something about WordPress development. Still I am glad to show people there are other ways to accomplish a task.

  • Susan,

    Thanks for sharing your solution to the plugin problem.

    To clarify, I should add the hyperlink to a widget then add it to my sidebar or existing widget? I’m a technotard. I can figure out basic stuff. Anything more involved makes my eyes cross.
    Lauren recently posted…How to Survive a Total Social CollapseMy Profile

    • Actually, that is a solution, but not the most optimal.

      Unfortunately to get your social sharing to work properly involves a bit of php magic via WordPress. So it requires a function which takes some coding effort. I’ve already created the snippet when I added the buttons to my blog for people interested. But then I realize that most people don’t want to go that far.

      I can put it into plugin form and let people download from my website if they would like.

  • Hey Susan,
    Nice post and Thanks for sharing these tips with us. Yes, Social media is really play an important role in blogging as it helps us to promote our blog but using social media share buttons without plugin is really a good point and it also help us to decrease number of plugins.
    Sudipto recently posted…Whatsapp For Nokia Asha 200, 305, 501, 201, 205, 301, 203 SymbianMy Profile

  • Nice tutorial !
    Social media sharing buttons are must for a website to have as it makes possible for the visitors to easily share our posts . I’d be trying out the HTML code on one of my blog posts . I’m sure that the load time of these buttons would probably be lesser than the plugin. Thanks for sharing the information.

    -Pramod
    Pramod recently posted…Wechat download for PC/Computer/Android :The How to GuideMy Profile

  • Hi Susan,

    If we have the freedom to put social sharing button on a website I think we have better chance to make the website more visible on the internet especially through the social networking sites. As a non tech-savvy bloggers, this is really helpful to me. Thanks for sharing this post with us.
    Okto recently posted…How Do I Create Video Content for Free?My Profile

  • wow, I just know now that there’s html for sosial sharing button…
    Now, I’m using a plugin for that and it’s slowing my site performance 🙁 I want to try this, but I’m afraid that it’ll make error in my site cuz I’m not very good in coding ….

  • You know, most of what you write is like a foreign language to me. Notice I don’t even have a Twitter account! But I love your expertise and your style. If I ever want to move in this direction, you are the first place I’m going to come to learn what I need to know. I love the way you share your knowledge with such reassurance and enthusiasm.

  • Nice to meet you Susan 🙂

    I had thought about creating custom sharing buttons for my blog (and I assumed there would be a plugin that allows us to replace original buttons with our own). So far, I haven’t been able to find a plugin like that, but this will work. I never thought about using HTML. I could add this after each post – I am sure I can find some way to do it automatically). Plus, this will help to improve the loading time of my blog (well, upcoming blog anyways).

    Thank you for sharing this, Susan 😀 Appreciate it!

    • I realized that most people aren’t code savvy to add these properly in WordPress. I just tweeted Lisa and I am going to make a plugin available to people on my website for download. Just something simple that people can play with. Not going to put it out for public release, just have it for those who are interested.

  • Hi Susan,

    I am so grateful for this article. I just published a post on increasing the speed of a blog because I had some speed issues with my site. One of the plugins that was giving me a problem was also the social plugin but of course I would not give it up because I want to have it on my site.

    Your article is so perfect and such a good find. I definitely will be passing it to my readers in the near future.

    So thanks a million!

    Dita

  • Hi Susan,

    Welcome to Lisa’s blog!

    I like the idea of this but I’m technically challenged when it comes to anything HTML. I get intimidated so I start to think I’d mess something up, so I go for a plugin. 🙂

    I do realize the loading time if affected which is why I don’t have too many plugins, I’m very careful about that. Thanks for telling us about this option.

    Have a great day!
    Corina Ramos recently posted…Monday Work from Home Job Lead MadnessMy Profile

    • True, it can be really confusing. That is why I think this is a great option for those looking to get more comfortable with code. No way it can break your blog because it is just a link.

      Thank you so much for leaving a comment 🙂

  • Hi Lisa,

    I’ve been going through my plugins lately and started to delete and uninstall them. This is a great reminder that even though it may be a pain in the butt to get certain functions to be coded onto your site, but in the long run it’s well worth the trouble. That way you have a faster loading site and it’s a lot cleaner. This post has inspired me to start moving forward with getting my plugins hard coded into my site. Thanks Lisa!
    Nate Leung recently posted…Why You Need to Stop Procrastination and How it Will Kill Your BusinessMy Profile

    • Sweet! Great to hear that Nate. The best part of coding things into your website is that you don’t have to worry about a plugin no longer being supported or losing a function just because you deactivate something. It is a little bit of extra work that can save you in the long run.

  • Hi Lisa,

    I love having this type of information. Right now, I feel like I have too many plugins and although I won’t change it at right this moment, it’s great you’ve supplied the code we need to perform certain tasks. Looking forward to making those changes. The other day I thought I had to many so this is great!

    Thanks for sharing. Great post.
    Barbara
    Barbara Charles recently posted…How To Find Your Niche Market?My Profile

  • Hi Susan,
    I must say must times it is very good to do way with plugins and use codes instead just like Harleena said i helps your blog load faster, tnx for sharing,
    Do have a great week ahead

    ~Bob
    Olili Bob recently posted…Download BBM For Android and IphoneMy Profile

  • Hi Susan,

    So nice of you to share this information with us because I agree, at times we should do away with some plugins when you find that you have too many.

    For the last three years I’ve been writing a post about my favorite WordPress plugins and they have dwindled down to just 14 now because some of that I’ve been able to code instead and my blog loads rather quickly so I’ve been told. I did have a young many comment on that particular post that at one time he had 103 plugins on his blog and of course it was so darn slow. I can’t imagine having that many.

    So this is just for hyperlinks right! I can see where that would come in handy though so thank you for sharing these codes. I’m going to definitely give this a try. I like the “tweet this” function but really didn’t want to add yet another plugin. I clicked that link on one person’s site not long ago and the plugin wasn’t working.

    You ladies have a wonderful week and hope you had a great time Lisa.

    ~Adrienne
    Adrienne recently posted…Why Effective Consistency in Blogging Is CrucialMy Profile

    • Thanks Adrienne, I think the reason why I was motivated to discuss this is because not a lot of people are aware of the hyperlink method. Even if people don’t use it to replace what they have now, it certainly help them down the line somehow.

      I also cannot imagine having over 100 plugins! Right now I only have 10. Three of them are for security. The speediness of my blog comes from the minimal use of scripts. The speed issue is like going down a rabbit hole. There are so many factors that can influence how quick a blog loads. It might be nice to write up a post that discusses the pros and cons of each method instead of offering a solution.

  • Hi, Lisa! I’m so glad you addressed this, because I know not of the ultimate impact of such things. 😯

    I use a plugin that produces a floating share button. It’s all buttoned – 😉 – up until a reader clicks on it, at which point it reveals the share options. It loads with relative speed even on my sometimes-murky Internet connection, so I’m hopeful it’s not too much of a drag.

    I appreciate having another option to consider, so thank you! 🙂

    • Tackling the issue of speed is a whole post in and of itself. There is only so much we can control, but at the end of the day it doesn’t make sense to sacrifice something that is working well for you. Weigh the pros and cons and choose what makes sense for you.

  • This post reminds me that I really need to move my blog to wordpress. I will be DMing you a question today.

    I use the “click to tweet” function at times on my blog, is this an example of what you are talking about?

  • Hi Susan
    It is funny how we come to rely on all the plugins and helpers we find on the web and then we forget that it can be done easily with HTML. But then we have to understand that this is not for everyone and some people are completely scared of html and coding – which I can understand :>
    Nice of you to share your findings though!
    have a great week
    ashley

    • I absolutely understand the fear of coding. I think an exercise like this, just creating a hyperlink, is a great way to start understanding.

      I know that a hyperlink can seem rather dull, but they truly have a life of their own. I read an amazing post once on six revisions that covered studies related to how people interpret a link. For example, I learned that underlines are super important for link recognition. You can’t go by color alone. It also helps people with disabilities find your links because it makes them stand out from the text. So the current trend of only using color to indicate a link, not the best.

      Ah, I’ve really gotten into more development type stuff over the past week. It is a lot of fun, but again, difficult to get started.
      Susan Silver recently posted…Use Font Awesome CDN for Speed and Easy InstallMy Profile

Leave a reply:

Your email address will not be published.

CommentLuv badge
This blog uses premium CommentLuv which allows you to put your keywords with your name if you have had 3 approved comments. Use your real name and then @ your keywords (maximum of 3)