How to Customize Social Media Icons

Their are many ways to customize social icons. I have used plugins, customized icons, and redesigned widgets. It took me a while to figure out how to do each of these and what you use will vary on your interactive skills. If you are new to the web, go for easier options like plugins.

*Free Icons

Social Media Sharing for Noobs

If you are new online, and using WordPress for your site or blog plugins will be your best friend. A few easy to install and use sharing plugins include:

  • Facebook Like
  • TweetMeme
  • AddThis
  • Share This
  • Socialable
  • Notable

Custom Social Media Sharing (Advanced)

You will need to have access to your site’s FTP, understand HTML/PHP, and know exactly where you want your buttons to show up in the WordPress Loop. If any of what I just said sounds foreign to you, email me and I’ll charge you $160 to do it all for you (plus icon design if you don’t choose one of my freebie packs but their are over 100 of them). If everything I’ve said so far sounds doable to you, continue onward…

*Please don’t email me asking for free help. NO, no and no. My blog is free, my time is not.

**Add the following code wherever you want the icon(s) to show up. Anything in bold may need edited by you.

Cool River Ranch social sharing

Custom Email Sharing Icon

This code will also add whatever subject you want.

<a href=”mailto:?subject=YOUR EMAIL SUBJECT HERE&amp;body=EMAIL BODY HERE Ie. Check out http://coolriverranch.com” target=”_blank” title=”Share Cool River Ranch’s Horses via Email“><img src=”http://example.com/youricon.png” alt=”Share via Email thanks to Desaraev” border=”0″ style=”float:left;” width=”30px;”></a>

 

Example: <a href=”mailto:?subject=I wanted you to see this horse&amp;body=Check out http://coolriverranch.com” TARGET=’_blank’ title=”Share Cool River Ranch’s Horses via Email”><img src=”http://coolriverranch.com/wp-content/themes/ePhoto/images/whitemail.png” alt=”Share Horse via Email” border=”0″ style=”float:left;” width=”30px;”></a>

Share Horse via Email

 

Custom Twitter Sharing Icon

This code will share your page via the user’s Twitter account. Everything in bold needs changed to match your site preferences.

<a href=”http://twitter.com/home?status=I like YOUR SITE NAME <?php the_permalink(); ?>” TARGET=’_blank’ title=”Share YOUR COMPANY NAME via Twitter thanks to Desaraev“><img src=”http://yoursite.com/yourimageurl.png” alt=”Share this site via Twitter” border=”0″ style=”float:left;” width=”30px;”></a>

 

Example: <a href=”http://twitter.com/home?status=I like this horse <?php the_permalink(); ?>” TARGET=’_blank’ title=”Share Cool River Ranch’s Horses via Twitter”><img src=”http://coolriverranch.com/wp-content/themes/ePhoto/images/whitetwitter.png” alt=”Share Horse via Twitter” border=”0″ style=”float:left;” width=”30px;”></a>

Share Horse via Twitter

 

Custom Facebook Sharing Icon

This code will also add whatever subject you want.

<a href=”http://www.facebook.com/plugins/like.php?href=<?php the_permalink(); ?>” TARGET=’_blank’ title=”Share YOUR SITE via Facebook“><img src=”http://yoursite.com/imgurl.png” alt=”Share  via Facebook thanks to Desaraev” border=”0″ style=”float:left;” width=”30px;”></a>

 

Example: <a href=”http://www.facebook.com/plugins/like.php?href=<?php the_permalink(); ?>” TARGET=’_blank’ title=”Share Cool River Ranch’s Horses via Facebook”><img src=”http://coolriverranch.com/wp-content/themes/ePhoto/images/whitefacebook.png” alt=”Share Horse via Facebook” border=”0″ style=”float:left;” width=”30px;”></a>

Share Horse via Facebook

 

Custom Digg Sharing Icon

This code will also add whatever subject you want.

<a href=”http://digg.com/submit?url=<?php the_permalink(); ?>” TARGET=’_blank’ title=”Share  via Digg”><img src=”http://yoursite.com/urlfortheimageicon.png” alt=”Share via Digg thanks to Desaraev and Agency Couture” border=”0″ style=”float:left;” width=”30px;”></a>

 

Example: <a href=”http://digg.com/submit?url=<?php the_permalink(); ?>” TARGET=’_blank’ title=”Share Cool River Ranch’s Horses via Digg”><img src=”http://coolriverranch.com/wp-content/themes/ePhoto/images/whitedigg.png” alt=”Share Horse via Digg” border=”0″ style=”float:left;” width=”30px;”></a>

Share Horse via Digg

 

Custom LinkedIn Sharing Icon

This code will also add whatever subject you want.

<a href=”http://www.linkedin.com/shareArticle?mini=true&url=<?php the_permalink(); ?>&title=YOURNAME&summary=I Love this site and thanks @Desaraev for this custom icon&source=<?php the_permalink(); ?>” TARGET=’_blank’ title=”Share  via LinkedIn thanks to Desaraev”><img src=”http://yoursite.com/icon.png” alt=”Share via LinkedIn thanks to Desaraev and Linkedin” border=”0″ style=”float:left;” width=”30px;”></a>

 

Example: <a href=”http://www.linkedin.com/shareArticle?mini=true&url=<?php the_permalink(); ?>&title=CoolRiverRanchHorse&summary=I Love Cool River Ranchs Hores&source=<?php the_permalink(); ?>” TARGET=’_blank’ title=”Share Cool River Ranch’s Horses via LinkedIn”><img src=”http://coolriverranch.com/wp-content/themes/ePhoto/images/in.png” alt=”Share Horse via LinkedIn” border=”0″ style=”float:left;” width=”30px;”></a>

Share Horse via LinkedIn

 

Custom MySpace Sharing Icon

This code will also add whatever subject you want.

<a href=”Http://www.myspace.com/index.cfm?fuseaction=postto&t=YOUR SITE NAME OR COMPANY&c=I LOVE THIS SITE OR WHAT YOU WANT THEIR NOTE TO SAY BY DEFAULT&u=<?php the_permalink(); ?>&l=<?php the_permalink(); ?>” TARGET=’_blank’ title=”Share via MySpace thanks to Desaraev”><img src=”http://yoursite.com/thelinktotheicon.png” alt=”Share via MySpace thanks to Desaraev” border=”0″ style=”float:left;” width=”30px;”></a>

 

Example: <a href=”Http://www.myspace.com/index.cfm?fuseaction=postto&t=COOL RIVER RANCH&c=I LOVE HORSES&u=<?php the_permalink(); ?>&l=<?php the_permalink(); ?>” TARGET=’_blank’ title=”Share Cool River Ranch’s Horses via MySpace”><img src=”http://coolriverranch.com/wp-content/themes/ePhoto/images/my.png” alt=”Share Horse via MySpace” border=”0″ style=”float:left;” width=”30px;”></a>

Share Horse via MySpace

 

 

Custom StumbleUpon Sharing Icon

This code will also add whatever subject you want.

<a href=”http://www.stumbleupon.com/submit?url=<?php the_permalink(); ?>” TARGET=’_blank’ title=”Share YOUR SITE NAME via Stumble Upon thanks to Desaraev”><img src=”http://yoursite.com/linktoicon.png” alt=”Share via Stumble Upon thanks to Desaraev” border=”0″ style=”float:left;” width=”30px;”></a>

 

Example: <a href=”http://www.stumbleupon.com/submit?url=<?php the_permalink(); ?>” TARGET=’_blank’ title=”Share Cool River Ranch’s Horses via Stumble Upon”><img src=”http://coolriverranch.com/wp-content/themes/ePhoto/images/whitestumbleupon.png” alt=”Share Horse via Stumble Upon” border=”0″ style=”float:left;” width=”30px;”></a>

Share Horse via Stumble Upon