Adding Social Media Icons

This document is deprecated! The information on this page refers to a Thesis version that is now obsolete. Please visit the Thesis Docs for current documentation.

While plugins and iframes may be easy to install, social media icons are an effective, fast-loading method to expand your contact network and social reach.

Adding a set of “linked” social icons can be as simple as adding a text widget and writing a small amount of HTML to output clickable images. You’ll need to find and upload your images, but free sets of social media icons are commonly available.

An example of a text widget containing links and images to four popular social media sites would be:

<div id="social-icons">
<a href="https://twitter.com/YOUR_USER_NAME"><img src="YOUR_IMAGE_URL" width="48" height="48" alt="Twitter" /></a>
<a href="http://feeds.feedburner.com/YOUR_FEED_URL"><img src="YOUR_IMAGE_URL" width="48" height="48" alt="RSS" /></a>
<a href="https://www.linkedin.com/in/YOUR_DISPLAY_NAME"><img src="YOUR_IMAGE_URL" width="48" height="48" alt="LinkedIn" /></a>
<a href="https://www.facebook.com/YOUR_FB_IDENTIFIER"><img src="YOUR_IMAGE_URL" width="48" height="48" alt="Facebook" /></a>
</div>

Change the links to reflect your own accounts and image locations. Note that without adding a line to custom.css, the above will result in a vertical layout of these images.

To add social media images to other areas, a function and the appropriate Thesis Hook will help you place social media images wherever you like.

For example, if you want 48×48 sized icons to show at the end of your pages only, adding this to custom_functions.php will do so:

function add_my_social_icons() {
if (is_page()) { ?>
  <div id="social-icons">
  <a href="https://twitter.com/YOUR_USER_NAME"><img src="YOUR_IMAGE_URL" width="48" height="48" alt="Twitter" /></a>
  <a href="http://feeds.feedburner.com/YOUR_FEED_URL"><img src="YOUR_IMAGE_URL" width="48" height="48" alt="RSS" /></a>
  <a href="http://www.linkedin.com/in/YOUR_DISPLAY_NAME"><img src="YOUR_IMAGE_URL" width="48" height="48" alt="LinkedIn" /></a>
  <a href="http://www.facebook.com/YOUR_FB_IDENTIFIER"><img src="YOUR_IMAGE_URL" width="48" height="48" alt="Facebook" /></a>
  </div>
<?php }
}

add_action('thesis_hook_after_post','add_my_social_icons');

Again, adjust the above to reflect your own accounts and image locations.

To change from vertical to horizontal presentation, you can add this to custom.css.

.custom #social-icons a img { float:left; }

Slightly more complex combinations of custom_functions.php and custom.css let you position social media images in a fixed location, such as on the side of your content.

As visitors scroll down the page, the social media images will follow. Here it is assumed you already have your social images uploaded to your /custom/images folder, and that your images are 32×32 pixels in size.

For fixed-position images, step one is to add this to custom_functions.php:

function fixed_position_social_icons() { ?>
  <div id="fixed-social-icons">
  <a href="https://twitter.com/YOUR_USER_NAME" class="social-twitter" title="Follow us on Twitter"></a>
  <a href="http://feeds.feedburner.com/YOUR_FEED_URL" class="social-rss" title="Subscribe to RSS Feed" rel="nofollow"></a>
  <a href="https://www.linkedin.com/in/YOUR_DISPLAY_NAME" class="social-linkedin" title="Connect on Linkedin"></a>
  <a href="https://www.facebook.com/YOUR_FB_IDENTIFIER" class="social-facebook" title="Join us on Facebook"></a>
  </div>
<?php }

add_action('thesis_hook_after_html','fixed_position_social_icons');

Change the “YOUR…” areas above to reflect the correct links to your social profiles.

Step two is adding the below to custom.css:

.custom #fixed-social-icons { background:transparent; width:32px; position:fixed; top:50px; left:0px; }
 .custom #fixed-social-icons a { display:block; height:32px; width:32px; }
  .custom #fixed-social-icons a.social-twitter { background: url('images/YOUR_TWITTER_IMAGE_FILENAME') 0 0 no-repeat; }
  .custom #fixed-social-icons a.social-rss { background: url('images/YOUR_RSS_IMAGE_FILENAME') 0 0 no-repeat; }
  .custom #fixed-social-icons a.social-linkedin { background: url('images/YOUR_LINKEDIN_IMAGE_FILENAME') 0 0 no-repeat; }
  .custom #fixed-social-icons a.social-facebook { background: url('images/YOUR_FB_IMAGE_FILENAME') 0 0 no-repeat; }

Modify the CSS background image URLs to reflect your image file names.

That’s it — you now have a set of social media images that your visitors are sure to see.