How To Create A Social Toolbar For Your Thesis-Powered Wordpress Blog

If you use the Thesis Wordpress Theme and want to be easily contacted from your blog and make yourself discoverable in the social networks you use most, I jus realized a simple toolbar which puts together all your IDs and can be placed on the top-right corner of my blog.

Here is how to create it, step-by step. The following example includes your Email, Twitter, Facebook, Friendfeed, Linkedin, Skype, Feedburner, but you can add more by just adding new <li></li> blocks where you like.

1) Open the custom-functions.php file inside the /thesis/custom folder.

2) Add the following code and save:

function add_social_links() {?>
<span>
<ul class=”icon-links”>
<li><a href=”mailto:YOUREMAIL”><img src=”http://YOURSITE/wp-content/themes/thesis/custom/images/gmail_16.png” title=”Email YOURNAME” /></a></li>
<li><a rel=”me” href=”http://twitter.com/YOURTWITTERUSER”><img src=”http://YOURSITE/wp-content/themes/thesis/custom/images/twitter_16.png” title=”Follow YOURNAME on Twitter” /></a></li>
<li><a rel=”me” href=”http://www.facebook.com/profile.php?id=YOURFBID”><img src=”http://www.lucafiligheddu.com/wp-content/themes/thesis/custom/images/facebook_16.png” title=”YOURNAME’s Facebook profile” /></a></li>
<li><a href=”http://friendfeed.com/YOURFFUSERNAME”><img src=”http://YOURSITE/wp-content/themes/thesis/custom/images/friendfeed_16.png” title=”Join me on friendfeed” /></a></li>
<li><a rel=”me” href=”http://www.linkedin.com/in/YOURLINKEDIN”><img src=”http://YOURSITE/wp-content/themes/thesis/custom/images/linkedin_16.png” title=”Luca’s LinkedIn profile” /></a></li>
<li><a href=”callto://YOURSKYPEID/”><img src=”http://YOURSITE/wp-content/themes/thesis/custom/images/skype_16.png” title=”Contact me with Skype” /></a></li>
<li><a href=”http://feeds2.feedburner.com/lucafilighedducom”><img src=”http://YOURSITE/wp-content/themes/thesis/custom/images/feedburner_16.png” title=”Subscribe to this blog” /></a></li>
</ul>
</span> <?php }

Then

add_action(‘thesis_hook_header’, ‘add_social_links’);

In the function above please replace:

YOURSITE with your website’s URL

YOURNAME with your name

YOURTWITTERUSER with your Twitter username

YOURFBID with your Facebook ID

YOURFFUSERNAME with your Friendfeed username

YOURLINKEDIN with your id available on your Linkedin public profile

YOURSKYPEID with your Skype ID

3) Open your custom.css file inside the /thesis/custom folder.

4) Add the following code and save:

//links to social networks, email and RSS
.custom ul.icon-links {
padding: 0;
margin: 0 0 8px 0;
font-size: 1em;
padding: 0.2em 0.2em;
width: 100%;
}
.custom ul.icon-links li {
list-style-type: none;
display: inline;
color: #807E70;
}
.custom ul.icon-links img {
vertical-align: text-top;
}
.custom #header span {
position:absolute;
top: 0;
right: 0;
}

5) Upload to your /thesis/custom/images folder a 16×16 icon for each service. There are tons of alternatives. Make sure the names of the icon files specified in (2) are correct.

If you follow the simple steps above, you’ll get something similar to the bar you can see on top-right of this blog.

Hope this helps, enjoy

Related articles by Zemanta

• Facebook, Twitter, LinkedIn… Oh My (myventurepad.com)
• Social Networking, signal to noise ratio (mathewpacker.com)

Tagged as: facebook, friendfeed, linkedin, luca filigheddu, RSS, skype, Social network, Thesis, Twitter, wordpress