HowTo: Manually Add Social Bookmark Buttons to WP Posts & Widgets

There are lots of plugins that add social bookmark buttons to WordPress but not so many that only add the buttons for only the social sites you use such as your Twitter page, Facebook fan page, Flickr page or YouTube channel. And most social bookmark plugins increase page load times with Javascripts and tons of CSS code for what might be only three or four buttons that you want to add to your site.

When you need a lightweight solution — and who doesn’t? — use these few steps to add your own, lightweight bookmark buttons to your WordPress site.

Adding Social Bookmark Buttons

We will create a Facebook fan page button in this example. Using the same method we can create buttons for any social media page you want your visitors to bookmark.

One: Upload The Button Icon

  1. Go to iconfinder.com
  2. Search for a social media button icon to add to your site e.g this Facebook one.
  3. Download the button
  4. In your WordPress dashboard, click Media > Add New
  5. Upload or drag the icon to your media library
  6. Copy the file URL at the bottom of the upload screen
  7. Click Edit Image (it’s under the icon)
  8. Click Scale Image
  9. Enter an appropriate size for the image (24 or 32 pixels are good)
  10. Click Scale
  11. Click Save All Changes

Two: Create The Social Bookmark Buttons

Examine this HTML:

The line <a href=”"> is where the link to your site’s fan page needs to be entered.

The line <img src=”" /> is where the link to the button icon for the fan page needs to be entered.

For example,

For every bookmark button you need to add to your site, simply put the bookmark page link and the icon link into the following HTML

Then put it between the opening <div> and closing </div> tags in the above snippet.

For example:

In the <div> tag it says

  • display: inline causes the div box that holds the icons to sit nicely next to other items in the same row as it. Change inline to block if you want it to display on a row of its own.
  • float: right forces the div box to sit as close to the right edge of the browser window as it possibly can. Change it to float: left if you prefer it to sit as close to the left of the screen as it can.

Three: Placement

Put the HTML into a text widget or into your theme’s footer or header. You could even add it to a post or page by using the HTML editor instead of the visual editor.

Comments

  1. says

    I wonder, when we can get the plugin for free, why should we bother with manually editing html and css for adding SB buttons? Or else, why not try adding developers code from the site itself.

    • says

      There are plenty of plugins to add social bookmark buttons to WordPress. Social Sharing Toolkit is one of them. The method shown in this post is just a lightweight way to do it when only a few social bookmark buttons are required.

      Using the developers code from the bookmark site is simple to implement but some of them use iFrames and other bits of unnecessary script.

      Thanks for commenting.

Leave a Reply