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
- Go to iconfinder.com
- Search for a social media button icon to add to your site e.g this Facebook one.
- Download the button
- In your WordPress dashboard, click Media > Add New
- Upload or drag the icon to your media library
- Copy the file URL at the bottom of the upload screen
- Click Edit Image (it’s under the icon)
- Click Scale Image
- Enter an appropriate size for the image (24 or 32 pixels are good)
- Click Scale
- 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.
<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.
<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.
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.