How to Add Social Media Buttons to Your Site

First, let’s clarify. There are two separate objectives when folks talk about adding social media buttons to a site.

  1. You want to add one-click easy buttons to share a page or a post.
  2. You want to add buttons to social media sites where readers can connect with you or your company.

I recommend doing both.

Adding Social Media Buttons to Share Pages and Posts

These are pretty easy, especially if your site uses WordPress or a similar framework.  You just need a plugin.

Of course, there are plugins and widgets to add social media buttons.  I actually use a couple of them on my sites to encourage sharing (Sharing is Caring and Sociable).

At the bottom of each of my posts and pages, readers see quick links to share similar to this.

That’s a combination of using Sharing is Caring and Sociable.

Once the plugins are installed, configuration is pretty simple. You pretty much just check the buttons you want included and select an icon size.

Example screenshot configuring Sharing is Caring:

Example screenshot configuring Sociable:

Remember that most of these plugins are for one-click sharing on social networks, not for following someone on a social network.  For that, I recommend adding those manually to your site using basic HTML.

Follow Me Buttons

This is actually what many folks mean when they talk about adding social media buttons to a site.  They want icons that readers can click to FOLLOW someone on Facebook, Twitter, etc.

I’m sure there are probably plugins to do this, too, but since the links are going to your specific social media accounts and the icons need to match the look of your site, I highly recommend taking full control of these social media buttons through some basic HTML.

How to Add Social Media Buttons to Your Sidebar

You can add this HTML code anywhere on your site.  The examples below are just using a Sidebar on a WordPress site as an example.

Collect your icons.

Go to http://www.iconfinder.com/ or your favorite resource for icons and images to search for “social media” or a specific network like Facebook, Twitter, or Pinterest.

Find a style that complements your site and make sure the icons are free for commercial use or available for purchase.  Usually, you can find a set of social media icons with the same style.

Examples of Icon Sets:

Note that these examples are sets that are available for free under Creative Commons attribution requirements or are simply free for commercial use.  Make sure you only use freely available icons or that you purchase other icons for use on your site.

Once you find or purchase icons to use on your site, download the icons for the social media links you’d like to include.  If you can, download the original icon files in your preferred size (32×32, 64×64, etc.)  You can resize icons if needed, but the originals in the optimal size are always nice.

32×32

Follow Sherry on Facebook Add Sherry to your Circles on Google+ Follow Sherry's Boards on Pinterest Follow Sherry on Twitter

64×64

    

NOTE:  JPG or PNG formats work best online.

Save/Copy and upload the icons to your site.

Do this however you are most comfortable.

  • You can upload images through the blog or site’s built-in tools like WordPress’s Media Uploader.
  • If you’re using a self-hosted site, you can upload files through your host’s CPanel interface.
  • You can also use an FTP application to upload images to a specific folder on your site.

You actually could use the direct URLs/links to the images somewhere else rather than uploading them to your own site, but it’s risky. I suggest uploading the images to your own site rather than relying on some other site to keep them online, in the same spot, and in the same format.

Keep a list of the URLs/online locations of the images you upload.

In the html code you’ll need a URL/path to your uploaded icons and a URL/link to your social media accounts.

Example of the HTML Code for One Social Media Button

Notice that the pink highlighted text is the URL/path to the image you uploaded for the Facebook button.

Go ahead and make a list of the exact image file names and locations as you upload them to your site.

Example paths to uploaded images:

  • http://www.yourdomain.com/wp-content/uploads/icons/facebook.png
  • http://www.yourdomain.com/wp-content/uploads/2012/11/pinterest.png

Make a list of the URLs/Links to follow you on various social media sites.

Again, you’ll need to specify the URL/link where you want the reader to go when he or she clicks on a social media button.

Example of the HTML Code for One Social Media Button

Here, the yellow highlighted text shows the link readers will follow to your social media account when they click the button.

Go ahead and make a list of the links to your social media accounts.

Examples:

  • https://www.facebook.com/yourname
  • http://pinterest.com/yourname/

Note that you can use the Pretty Link Plugin or some other URL shortener if you’d like.  (Some of those URL paths can look a little odd.)

Create the HTML code for your social media buttons.

You can do this manually by typing all the HTML code for the images and the links, but you can also create the HTML code in a temporary blog post.

If you want to write the HTML code manually, I did create a shortcut for you.  Click here for a Word file with sample code you can copy, paste, and modify.

If you want to create the HTML code with a GUI (Graphical User Interface) like WordPress, start by creating a new, temporary blog post.

Add an image of the first social media icon you want displayed. You can upload it through WordPress in the post, or if you’ve already uploaded all your icon images, you can insert the image by using Add Media > From URL.  (This is why you needed the URL/link to where you uploaded the image.)

Add the relevant information for the image/icon including:

  • URL
  • Title
  • Alternate Text
  • Link Image To

Link Image To is where you paste the URL/link to follow you on that social media site.

Click the Insert into Post button and your first button is ready to go.

Key in a space and insert the next image until you have them all in a row.

Periodically click the Save Draft button to save all the images and information you’ve been adding for your social media buttons. You’ll never need to click the Publish button for this temporary post.  It’s just a means to create the HTML code you need to paste elsewhere.  In fact, you can delete the temporary post when you’re done if you’d like.  I tend to keep mine (in draft mode only) just in case I want to make changes in the future.

HTML Code NOTE:  Essentially what you’re doing for each image in the blog post is creating simple HTML code to display an image and link it to your social media account page.  The code for one of your buttons would look something like the following.

It’s totally up to you whether you prefer to create the HTML code through a visual interface (like a blog post or HTML editor) or to create it manually by typing the code.

Copy and paste the HTML code where you want your social media buttons to appear.

When you’re done adding buttons and links to your temporary blog post, click the HTML tab.  Select all the HTML code and Copy it.  (Shortcut:  You can use CTRL+A to select all the HTML text and use CTRL+C to copy it all.)

Yes, the actual code is smudged out on the image.  Click here for a Word file with sample code you can copy, paste, and modify.

To put your buttons on the Sidebar of a WordPress site, Select Widgets under the Appearance menu.

Drag a text widget over to the Sidebar and enter a title like “Follow Me.”  Then, paste your HTML code into the text box.  Click Save, and your buttons will be live on your site’s sidebar.

That’s it.  Your “Follow Me” social media buttons are good to go on your sidebar.  SImilarly, if you’d like these buttons in your header, footer, or some other spot on your site (like the Contact page), just paste the code and click Save.

Example Social Media Buttons on SherrySnider.com:

Now click the buttons below to share this post with all your friends on social media sites.  🙂

 

Be Sociable, Share!

Comments are closed.