Colorful and glitterous custom social media icons

I realized that branding design may seem like a horrible manipulative monster for some people lately. That’s because the process of developing it is – very – meticulous and not easy to explain.

 
As a designer (and solopreneur) I understand not everyone needs to go for a full branding design. It’s alright to build your business according to its needs and not according to “what everyone is doing”. But in all cases, sooner or later we always feel the need to customize our graphics a little more. And there are ways you can try things that works for your business and use branding design through small and uncomplicated details.

 
(And I swear that can feels more like playing dress up and less like coding for a multinational corporation.)
I will cover up that on this new series of posts called Brand it easy.

 
And our first post is about how to add custom social media icons and buttons. Something you can apply on WordPress, Blogger, or pretty much on any other platform where you are able to use HTML widgets.

 

WHAT DO YOU NEED:

• Image Host (I will use ImageShack);
• Image files for the custom social media icons and buttons (scroll till the end of the post to download);
• Small HTML code (just a copy and paste thing).

 


 

 

  1. Host your image files on a image host, I’m doing it with Image Shack, but Tinypic works just fine too and gives you access to the direct link right after the upload..

     
    Brand it easy, part I: colorful and glitterous custom social media icons

  2.  

  3. After the upload look for the direct URL/LINK for your image.
     
    Brand it easy, part I: colorful and glitterous custom social media icons
  4.  

  5. Open a new file on a text editor and copy the following HTML code on it:
     

     

  6. Replace where it says “DIRECT IMAGE URL” for the direct link of one the images you just uploaded. The first image on my link list is for Instagram.
     
    Brand it easy, part I: colorful and glitterous custom social media icons
  7.  

  8. Edit where it says “SOCIAL NETWORK LINK”, for your own page link.
     
    Brand it easy, part I: colorful and glitterous custom social media icons
  9.  

  10. If you need more than one icon or button copy and paste the HTML code and repeat the process above changing the image URL and link each time.
     
    Brand it easy, part I: colorful and glitterous custom social media icons

 
TIP 1: for icons remove the space between each code so they will stay one the same line.
TIP 2: for buttons, you can keep each one on a different line.

 

HOW TO ADD THE CUSTOM SOCIAL MEDIA ICONS CODE ON BLOGGER:

Go to “Layout” > “Add a gadget” > Scroll until you find “HTML/Javascript”. Copy and paste the code there and save.

 

HOW TO ADD THE CODE ON SELF-HOSTED WORDPRESS:

Go to “Appearance” > “Widgets” > Select the widget “Custom HTML”. Copy and paste the code there and save.

 

HOW TO ADD THE CODE ON SQUARESPACE:

If you are on Squarespace, you can use a Code Block to add your code.

No Comments Yet

Leave a Reply

Your email address will not be published.