How to add social shares buttons to WordPress without plugins

Make it easy for your blog or website visitors to share your content and they are more likely to do it. The usual method is to add a plugin, but it can be done with a few lines of code.

Social sharing buttons are a great way to encourage visitors to your site to share your articles and images. If someone shares a link to a post on your site, it could expose you to a lot of extra readers that you would otherwise not reach. Some people have thousands of followers on Twitter, Facebook, Pinterest and other social sites and one share could result in a lot of page views.

Social sharing buttons are not essential and anyone can copy the URL at the top of the page and paste it into a social media post, but seeing a social button firstly reminds them to share the post and secondly, makes it easier to do so.

Advantages of a social plugin

  • Easy to use
  • Lots of great features and options for buttons
  • Buttons can easily be positioned on the page

Disadvantages of a social plugin

  • Too many plugins slow down the site
  • Flaws in plugins are often exploited by hackers
  • Updating plugins can sometimes cause website problems

There are dozens of plugins for WordPress and other website builders to enable you to add social shares buttons and they are very popular. Just go to Plugins > Add New in WordPress and search for ‘social shares’ to see plugins with tens of thousands of active installs. One of the most popular is AddToAny and it has over half a million installs.

However, you don’t need any plugins to add social sharing buttons to your site. I am going to use WordPress for this example, but it works with any site that lets you paste in a bit of HTML code.

1 AddToAny button builder

Create social shares buttons at the AddToAny website

Go to the AddToAny social shares button builder in a browser and set the Type to Share Buttons at the top. Several buttons are selected by default, but you will probably want to customise them. Click Choose services…

2 Select social networks

AdToAny social shares buttons

A long list of social networks is displayed, far more than in this screenshot. Click items on the left to add them to the list on the right, which is what will appear on your website. I will select just the four more common services, but you can choose more or different ones. Click the Done button when you have finished.

3 Get the code

Get the code to show share buttons from the AddToAny website

An email address is optional, so leave it blank and click the Get Button Code button. Some code appears in the box below and you must copy it. You don’t have to, but you might find it useful to save it to a text editor.

4 Paste in the code

Past HTML code into an HTML widget in WordPress

What do you do with the code? It must be inserted into a web page at the place you want to show the social sharing buttons. How this is achieved depends on the WordPress theme and the one I use has a widget areas above and below a post called Posts 1 – Advertisement and Posts 2 – Advertisement. I dragged an HTML widget to Posts 2 and then pasted the code into it. I chose to show the sharing buttons below a post, but putting it in the widget area above would show it above the post.

The same thing can be done with the sidebar. Go to Appearance > Widgets and drag an HTML widget to the Sidebar widget list and then paste in the code. The sharing buttons will then appear in the sidebar.

If the theme used on your site does not have features like these, use an advertising plugin like Ad Inserter or something similar to insert the code before or after each post. Ad plugins are designed to insert code into posts and work well with other bits of code, not just adverts.

Don’t install an ad plugin specially to insert the social shares code because you might as well use a social shares plugin, but if you already have an ad plugin anyway, make use of it.

5 View your social shares buttons

Social shares buttons on a web page

Now go and see your social shares buttons on a post on your site and try them out. Click the plus button to see a list of places you can share the post.

Don’t forget to disable any social shares plugins, you don’t want two sets of buttons to appear.

Advantages

  • You can remove one more plugin
  • It may speed up your website
  • There is no plugin, so no security problems
  • No need to update a plugin

Disdavantages

  • Fewer features
  • Fewer options for positioning the buttons
  • It runs an external script

Whether you choose a plugin for your social sharing buttons or use code like this is up to you. There are pros and cons for both methods. If you want to try these buttons created by code and see how they work, click mine below!

No script option

The share buttons code runs a script on the AddToAny website. If you are optimising your site for speed, it is best to avoid external scripts in case the servers that provide them are slow. You can see this with adverts where they slow down a website and sometimes don’t appear for several seconds after the page is loaded.

I have tried the AddToAny plugin and the script and if anything, AdToAny seems to be faster with the script than with the plugin. However, if you want to remove the script, click the More Options link next to the Get Button Code button.

Without the external script, the URL of the page must be provided. It is not practical to create custom code for every page on a site, but you could use it on the home page. It may be a bit faster – it’s worth trying.