How to Add Social Media Icons to your WordPress Site

 
I get this question a lot: How do you add the social media icons to your sidebar and at the end of posts? Here’s how.

But first, let’s clarify the difference between social share buttons and social follow buttons.

Social share buttons allow blog visitors to share your post with their followers on their network or to social bookmarking sites like StumbleUpon. Social follow buttons, on the other hand, allow blog visitors to follow you on your network. The setup of the two buttons is different.

Adding a Social Share Button

To allow visitors to share your blog post or page with their friends and followers, you can download any number of social share plugins. Popular ones are Digg Digg, Sociable, Sexy Bookmarks. I currently use Digg Digg as it offers the option of having it float vertically or horizontally.

You have two ways of uploading plugins. You can download the plugin from WordPress in its zipped format to your desktop, and then upload it into WordPress from the Plugins menu in its zipped format. Or you can install it directly into WordPress by doing a search from within the Plugins menu.

Some plugins show up as a menu item in the admin panel, and from there you can configure it. So be sure to check the panel after installing the plugin. You can choose to add the bookmarks either at the start or at the end of posts or pages.

No matter where you install the bookmark, remember to tell your readers to share your post!

Adding a Social Follow Button

To install a social follow button, first get the button icons. I normally send clients to http://www.noupe.com/freebie/50-free-social-media-icon-sets.html. Some sets come in different sizes that you can choose from. Download the set, then open it in an image editing program. Choose the icons that you want to use.

For the sidebar, the icon size that works well is 64 x 64, but if you create a sidebar that is smaller or wider than 300px, then you may need different sized icons.

Upload the icons to your media library and note the URL for each. Copy and paste each URL into a text editor or notepad. Open your widgets under Appearance in the admin dashboard. Drag a text widget into the sidebar. We are going to first add the URL of the social media site, then the URL for the image that you had copied. So it looks like this:

The URL of the social media site starts with the less than symbol then a href=, open quotation marks. Close the URL with quotation marks and the greater than symbol. Then the less than symbol followed by img src=, which tells the browser that this is the image source. Type the code as shown above.

If the icons are squished together, add space between them by inserting

after each link, either to the right of the link to create horizontal spacing, or below to get vertical spacing.

I highly recommend, however, that you use Twitter’s official follow button, especially at the end of your posts so that people can follow you while sharing your content.

To get the Twitter follow button, go to this link.
Have your web designer add the code so that it shows up on every post or page.

If you have any questions, do give me a shout. And please share!
 

Category: Social Media