Having accomplished all of this, I wanted to share the results of my hard work with the world, so I went searching for information on how to include social sharing buttons on my web pages. I already had social sharing buttons on my WordPress sites where adding share buttons is as simple as clicking on a few buttons to install a plugin, but how to include share buttons on a HTML website?
The most popular method of adding a Facebook like button to your webpage is to use Facebook's Like Button Configurator which will produce two pieces of javascript to add to your blog. One piece of code must be placed immediately after the BODY tag, and the other piece of code placed where you want the button to appear on your page. Like a mug, I went ahead and placed these pieces of code on every one of my hundred or so pages. I probably spent about 40 to 50 hours doing this. How could I be wrong? After all, when you search for 'how to add a Facebook button to your webpage', it's what all the techie blogs and 'experts' recommend, and it gives you a Facebook like button exactly the same as everyone else is using.
It was about a month later that I was using Google Webmaster Tools to do a general check-up for crawl errors or other usability issues when I came up with a profound shock - my web pages had mobile usability issues due to slow download speed. How could this be? I had worked hard and succeeded to have every page score over 90 points out of 100 on Google's Page Speed Insights. My page speed had dropped to less than 80 points, and some were in the red zone, signifying serious usability issues for mobile device users.
The problem was, of course the Facebook like button. This one little piece of code slowed down each page on which I placed it by 15 points on Page Speed Insights - about a 15% slowdown in the real world. The Facebook like buttons had to go, but surely there must be a simple solution?
<a class="top_social" href="javascript:window.location=%22http://www.facebook.com/sharer.php?u=%22+encodeURIComponent(document.location)+%22&t=%22+encodeURIComponent(document.title)" title="Share on Facebook..."><img src="LINK TO YOUR OWN FACEBOOK LIKE BUTTON IMAGE" alt="share this page on facebook"></a>
Note you have to grab a facebook like button image from somewhere and add it to your site. I just found one and cropped, resized, and changed the background button to suit my site's background color. Job done, now I have a Facebook like button on every page, with no download slowdown, and my pages score from the mid to high 90s on Google Page Speed Insights.
Next, I wanted to add Google+ buttons to my site. Now, you would expect that everything made by the world's #1 Internet company, and one that is so fussy about the quality of your webpages, would be A1 in quality and made to the standards and specifications of the World Wide Web Consortium. But no. After adding Google+ buttons to all of my webpages, I found they no longer validated to HTML 5.
<a href="https://plus.google.com/share?url={http://YOUR WEBPAGE/}" onclick="javascript:window.open(this.href,'', 'menubar=no,toolbar=no,resizable=yes,scrollbars=yes,height=600,width=600');return false;"><imgsrc="https://www.gstatic.com/images/icons/gplus-32.png" alt="Share on Google+"/></a>
The problem here is '{' and '}'. These characters are not supported by UTF-8 and need to be replaced by '%7b' and '%7d' respectively.
So finally, what I expected would be a simple task of adding social sharing buttons to my web pages, has been accomplished, after several months of work and some serious mistakes made by following the procedures recommended by the social sharing networks themselves and the various tech blogs parroting each others expert opinions and recommendations. I hope this information may help you avoid making these same mistakes.
You can see the final results on my website Atherton Tableland Netguide
No comments:
Post a Comment