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.