When it comes to web developers we want to have the ability to get our social media sites out easily and without a website slow down. Now this can be difficult if you want them to be flash prepare for a slower loading however if you want to get the point across like me then you don’t want complex javascript. I went with simple buttons, and they are proving to be effective at their job. Now here I will show you some simple buttons that you can create and give you recommendations to further increase the load time of these images. In later posts we will go over the use of javascript.

Example Button Code

As you can see this is a clickable button to my Google+ page. This is a very simple button and takes a little editing on your part. So bear with me on these 2 lines of code.

Yellow: This is where you put in the link of your websites social media site. Whether it is a Facebook, Google+ page. ANY  web address will work in this spot. You may use shortened links such as bit.ly or google to get analytics on how many clicks these buttons are generating.

Green: This line is where you have your image hosted. You can upload these images anywhere just make sure that the public can see it and that you have control over the image. I recommend storing these images onto a Google server such as Blogger or use your own web hosting service. This way the server can handle the views and you have control over it.

What Is This ?
That is an html comment, you do not need it, and it will not effect the display of the code. What you should know is that many people will try to promote their websites through these as you can see I have not done this. I use these comments to make it easier for you too keep the code organized, you can delete these at anytime, and you will see no difference on your website.

How To Increase Load Time?
You can increase the load time of these images by using simple coding, software, or just changing the location of the image. All of these techniques are free of cost to you and can increase the load time.

  • Compress the image with a popular software. I recommend using Caesium which is a free open source program I use it on all of my post images including the one above. This can reduce the total size of the page. Now granted an image like this is only a few hundred kilobytes worth of space, it can still shave milliseconds off of load time and every second or millisecond matters. You may download Caesium here.
  • Move the image to a faster server if you are using a free blogging service move it to Blogger. you can do this by adding the image to a post and copying the url. This is faster than most web servers because it is hosted on Google servers so you wont need to worry about it being deleted or poor loading times.
  • Use a CSS sprite. Now I am not going to lie I hate CSS sprites and I don’t bother using them. Basically,a CSS sprite is a combination of these images into one image. This loads the page faster because it does not have to send more http requests for those other images. Instead a CSS sprite will take the position of the image and once entered the image in that spot will be shown. Here is a tutorial on CSS sprites provided by CSS tricks.
Where Can I Download Social Media Images?
 I have a small collection of images that you can download from my Google drive. You can use the Google Drive links as a form of hosting, and it wont affect me at all. What I warn you is that in case my account is ever closed or I remove the images those images on your site will disappear. While I probably wont do this in the event of something like that happening it is better to be safe than sorry.

Download Social Media Icons Here!


Please enter your comment!
Please enter your name here