SimpleFolio Customization: Update Social Media Options

February 20th, 2011 Posted by Public 0 comments on “SimpleFolio Customization: Update Social Media Options”

One thing you will most likely notice with SimpleFolio is the choices made for social media.  By default the following are included if you enable social connect in the theme configuration:

  • DesignFloat
  • Delicious
  • Digg
  • StumbleUpon
  • Reddit
  • Technorati

For the purposes of this site I wanted things like twitter, linkedin, email and facebook.   I started by thinking I would modify the code in the single.php and styles.css file to include these options.

SimpleFolio Social Media Options – Single.php line 27:


<ul>
<li><a href="http://www.designfloat.com/submit.php?url=<?php the_permalink(); ?>&amp;title=<?php the_title_attribute() ?>">DesignFloat</a></li>
<li><a href="http://del.icio.us/post?url=<?php the_permalink(); ?>&amp;title<?php the_title_attribute() ?>">Delicious</a></li>
<li><a href="http://digg.com/submit?phase=2&amp;url=<?php the_permalink(); ?>&amp;title=<?php the_title_attribute() ?>">Digg</a></li>
<li><a href="http://www.stumbleupon.com/submit?url=<?php the_permalink(); ?>&amp;title=<?php the_title_attribute() ?>">StumbleUpon</a></li>
<li><a href="http://reddit.com/submit?url=<?php the_permalink(); ?>&amp;title=<?php the_title(); ?>">Reddit</a></li>
<li><a href="http://technorati.com/faves?add=<?php the_permalink(); ?>">Technorati</a></li>
</ul>

Also, corresponding CSS –


#main .container .content .social ul li.designfloat {
background-image:url(images/fav/designfloat.png);
}
#main .container .content .social ul li.delicious {
background-image:url(images/fav/delicious.png);
}
#main .container .content .social ul li.digg {
background-image:url(images/fav/digg.png);
}
#main .container .content .social ul li.stumbleupon {
background-image:url(images/fav/stumbleupon.png);
}
#main .container .content .social ul li.reddit {
background-image:url(images/fav/reddit.png);
}
#main .container .content .social ul li.technorati {
background-image:url(images/fav/technorati.png);
}

I soon realized that while these updates would not be hard to make someone must have done this before.  With a few seconds of research I found the ShareThis plugin and installed it.

This worked like a charm and with a little configuration I had what I wanted minus a “Share This Post” heading.   All I did was add my title in the HTML settings in ShareThis with a H3 tag to match the SimpleFolio style.

Finalized ShareThis

That’s it, Hopefully this will help someone.

Tags: , ,