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:

<div class="sbmbuttonsx">

<a href="">
<img src="" />
</a>

</div>

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,

<div class="sbmbuttonsx">

<a href="http://www.facebook.com/vizRED">
<img src="http://example.com/wp-content/uploads/Facebook.png" />
</a>

</div>

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

<a href="">
<img src="" />
</a>

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

For example:

<div style="display: inline; float:right;" class="sbmbuttonsx">

<a href="http://www.facebook.com/vizRED">
<img src="http://example.com/wp-content/uploads/Facebook.png" />
</a>

<a href="twitter.com/#!/vizred">
<img src="http://example.com/wp-content/uploads/Twitter.png" />
</a>

</div>

In the <div> tag it says

style="display: inline; float: right;"

• 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.

Sharing is caring!