Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
  • #14069

    Hi everyone,

    I spent today sorting out the social links on my posts today, and managed to replicate the same look and rollover effects that are used on the header social links.

    Ive posted a screenshot of the end result:

    I thought some of you would like to do the same, so i’ve drafted a quick guide.


    1. Download WP Socializer:

    2. Install and activate the plugin

    3. Within plugin’s admin screen, go to the manual customisation setting, then select social buttons

    4. Select the buttons you want to use, choosing the 32px size

    5. In settings at he bottom of the same window select:

    Image hover: none

    Use sprites: Yes

    (At this point you may want to setup other bits, like choosing pages they appear on etc, until you are happy, and you just want to change the appearance).

    6. Now we are going to create/upload our icons.

    I’ve uploaded the icons for facebook, twitter, pinterest, google plus and email, including a fireworks template so others can be made. The file can be downloaded here:

    The icons are sprites stacked vertically (32px x 64px)

    7. Now we have our icons, we need to overwrite the default ones, so using an FTP client overwrite the default icons saved in here:


    8. Now to edit a bit of PHP so we can add the sprite the rollover effect

    Edit this file:


    Find the note that says:

    // Check whether sprites is enabled

    and replace the first paragraph with this

    // Check whether sprites is enabled
    if($sprites == 1){
    $socialbts_list .=
    '<a href="' . $finalUrl . '" title="' . $finalTitle . '"' . $finalTarget . $finalNofollow . $params . '>' .
    '<img src="' . $spriteMaskImage . '" alt="' . $finalName . '" style="width:' . $pixel . '; height:' . $pixel . '; background: transparent url(' . $finalIcon . ') no-repeat; background-position: bottom left; border:0;"/>' .
    "</a>" . $finalLabel ;

    9. Now to update the css

    Open, edit then reupload the following file:


    Rename this rule:

    .wp-socializer img, .wp-socializer-single img{


    .wp-socializer-single img{

    Then add these new rules to the bottom of the css file

    .wp-socializer img {
    float: none;
    border: 1px #ECECEC solid !important;
    margin: 0px 0px 0px 0px !important;
    padding: 0px !important;

    max-width: none9; /* IE max-width fix on v2.1 */

    .wp-socializer img:hover {
    background-position: top left !important;

    10. The hard work is done, so test the appearance, and tweak as needed, i recommend using the firefox firebug plugin to iron out any css issues.

    I can’t provide support for this, but i hope it’s useful for some of you



    Great – thanks for sharing your tutorial :)




    The Filesend download doesn’t work anymore…



    I contacted alan_82 and asked him to reupload the files.




    Hi BelleLurette & Peter

    Thanks for letting me know the download expired,

    I’ve setup a new download link which is hosted on my site, so it wont go down again:

    The finished result also be seen on one of my portfolio pages:





    Thanks alan_82 :)

    Best regards,


Viewing 6 posts - 1 through 6 (of 6 total)

The topic ‘Tutorial: Use the same style header social icons for sharing individual posts’ is closed to new replies.