Want to add your social connections to your Drupal site with icons? Follow these simple steps and you can be on your way to social simplicity.

Make a new content type and name it whatever you want. Add a url field and an image field for your icon.
Make a new node-custom.tpl.php instructions can be found here. Add this piece of code to your node-custom.tpl.php:

<pre><?php print_r($node)?></pre>

This will enable you to see what code you need to put into your node-custom.tpl.php. Save the file and upload it to your server.

Create new content for your new content type. For the image upload you can make your own icons, or you can simply grab the favicon from your social sites. Make sure that they are files you can actually use. I ran mine through Photoshop just to make sure they were small file sizes and the correct extension.

After you hit save you should now see your icon with your URL beside it and then a bunch of code below it similar to this.

Your going to grab the code to pull the url for the image and url for your social site. Mine happened to be field_url[0]['url'] and field_icon[0]['filepath']. If you want hover text grab the url title as well, field_url[0]['title'].
Place them in your node-custom.tpl.php like this:

<a href="<?php print $node->field_url[0]['url'] ?>" title="<?php print $node->field_url[0]['title'] ?>"><img src="/<?php print $node->field_icon[0]['filepath'] ?>"></a>

*Note that I placed a forward slash "/" before the print in the img tag. That is there to make sure it goes to your root directory. Otherwise your icon won't show up.

Delete the code you used to print all the functions and save the file and upload to your server. Refresh your content's page and you should have just an icon that links to your social site.

    Make a new view with these options:
  • Display: Block
  • Filter: Node Type
  • Style: Grid - I used 6 horizontal columns, you can use what fits your block.
  • Row Style: Node - Uncheck all options.
  • Add other options to taste and save.

Go to your Blocks page and add your new block to the area you want and volia!

If you have other uses for this or tweaks to what I have done, I'd love to hear your ideas.