Finally the help of IT is here

Blog of computer solutions.

Improve website performance (Social buttons)

Written by Xaus Xavier Nadal on March 17th, 2013

Save pagePDF pageemail pagePrint page

Today we show you how to improve website performance by making the social buttons facebook, twitter and google plus loaded on the web, but only when you hover over it.

As you all know I am passionate about improving Web performance and you can see examples of this in this blog.

We got very good results even in a load sharing without VPS hosting for lack of pasta.

One of the latest developments that have implemented has been the burden of sandwiches annoying social networks to get off part of the score in the performance test pages as http://www.webpagetest.orgo http://www.gtmetrix.com made the loaded web slower causing a decrease in google positioning among other search engines.

To get around this problem I will show several examples Live to adapt it to any of your websites.

  • The site charges a 55% faster.
  • WordPress -> You can see the result in this blog http://www.megacrack.es.
  • Prestashop -> You can see the result in http://www.venlotodo.com (Website selling all kinds of products including sexshop with impressive prices (send an email to ventas@venlotodo.com and say that you come from MegaCracks and will make a insurance discount.) The pity is that only sell to Spain, and also if you are in the province of Barcelona speak with them and the price even better).

For you to see the change you can use the following link comparing the speed of loading between sites 2 http://whichloadsfaster.com/.

I consider myself quite unable to programming, but I am quite skilled at the art of logic and understand how things work and most of all I like what I do and invest the time it takes. (I say this because I am sure that the source code can be improved greatly with your comments and if you can make the community benefits it will thank you from this blog seeing your suggestions for improvement).

To implement on any web with HTML

Then the source code of the web I teach (HTML), What we do is have multiple images of the same buttons we have on facebook, twitter and google plus and if you hover over using a javascript function call that triggered the script of each of the social elements.

<html>
<body>

<div class="G-plusone" data-size="medium" data-href="Http://www.megacrack.es" onMouseOver="Activate_gp ()">
<I'M G SRC=".. / Files / gplus.png" width=35 height=23>
</div>
<div>
<a href="Https://twitter.com/megacracks" class="Twitter-follow-button"
 data-show-count="True" data-show-screen-name="False" data-lang="Is" onMouseOver="Activate_tw ()">
<I'M G SRC=".. / Files / seguir.png" width=62 height=22></A></div>
<div class="Fb-like" data-href="Http://www.megacrack.es" data-send="False" data-layout="Button_count"
 data-width="100" data-show-faces="False" onMouseOver="Activate_fa ()" >
<div class="Fb-like" data-href="Http://www.megacrack.es" data-send="False" data-layout="Button_count"
 data-width="100" data-show-faces="False" onMouseOver="Activate_fa ()" ></div>
<I'M G SRC="../files/megusta.png" width=74 height=24></div>

<script type="Text / javascript">

	<! - <JavaScript SD forum Facebook Like Button /> ->
	function activate_fa () {(function(D, s, id) {
		  was js, fjs = d.getElementsByTagName (s) [0];
		  if (D.getElementById (id)) return, Js = d.createElement (s); js.id = id; js.src = "/ / Connect.facebook.net / es_LA / all.js # XFBML = 1"; Fjs.parentNode.insertBefore (js, fjs);} (document, 'Script',  'Facebook-jssdk'));} <! - <JavaScript SD forum Like Google Plus Button /> ->
	function activate_gp () {window.___gcfg = {lang: 'en'}; (function() {
			was po = document.createElement ('Script'); Po.type = 'Text / javascript'; Po.async = true; Po.src = 'Https://apis.google.com/js/plusone.js';
			
			was s = document.getElementsByTagName ('Script') [0]; s.parentNode.insertBefore (po, s);}) ();} <! - <JavaScript SD forum Twitter Button /> ->	
	function activate_tw () {!function (D, s, id) {
			was js, fjs = d.getElementsByTagName (s) [0];if(! D.getElementById (id)) {js = d.createElement (s); js.id = id; js.src ="/ / Platform.twitter.com / widgets.js"; Fjs.parentNode.insertBefore (js, fjs);}} (document,"Script","Twitter-WJS");}
</script>

</body>
</html>

To deploy Wordpress

First of all you will have to upload your image files are optimized with such RIOT (Impressive program for compressing images) to be as efficient as possible to your wordpress files in the folder for example. At the end of the article I will post the link to the png files to keep them, downloading them and compress them, etc ... (They are super optimized)

What I have done is to separate the code of the functions in javascript and put it in the file header.php located on Route wp-content \ themes \ <vuestro tema> \ header.php just before closing the head.

<script type="Text / javascript"> <! - <JavaScript SD forum Facebook Like Button /> -> function activate_fa () {(function(D, s, id) { was js, fjs = d.getElementsByTagName (s) [0]; if (D.getElementById (id)) return, Js = d.createElement (s); js.id = id; js.src = "//connect.facebook.net/es_LA/all.js#xfbml=1"; Fjs.parentNode.insertBefore (js, fjs);} (document, 'Script', 'Facebook-jssdk'));} <! - <JavaScript SD forum Like Google Plus Button /> -> function activate_gp () {window.___gcfg = {lang: 'en'}; (function() { was po = document.createElement ('Script'); Po.type = 'Text / javascript'; Po.async = true; Po.src = 'Https://apis.google.com/js/plusone.js'; was s = document.getElementsByTagName ('Script') [0]; s.parentNode.insertBefore (po, s);}) ();} <! - <JavaScript SD forum Twitter Button /> -> function activate_tw () {!function (D, s, id) { was js, fjs = d.getElementsByTagName (s) [0];if(! D.getElementById (id)) {js = d.createElement (s); js.id = id; js.src ="/ / Platform.twitter.com / widgets.js"; Fjs.parentNode.insertBefore (js, fjs);}} (document,"Script","Twitter-WJS"); } </script>

I created an HTML widget and I have the code that displays the images within several div. This piece of code is what will show the buttons of social networks. Adaptadlos for which you may have.

<div class="G-plusone" data-size="medium" data-href="Http://www.megacrack.es" onMouseOver="Activate_gp ()">
<I'M G SRC=".. / Files / gplus.png" width=35 height=23>
</div>
<div>
<a href="Https://twitter.com/megacracks" class="Twitter-follow-button"
 data-show-count="True" data-show-screen-name="False" data-lang="Is" onMouseOver="Activate_tw ()">
<I'M G SRC=".. / Files / seguir.png" width=62 height=22></A></div>
<div class="Fb-like" data-href="Http://www.megacrack.es" data-send="False" data-layout="Button_count"
 data-width="100" data-show-faces="False" onMouseOver="Activate_fa ()" >
<div class="Fb-like" data-href="Http://www.megacrack.es" data-send="False" data-layout="Button_count"
 data-width="100" data-show-faces="False" onMouseOver="Activate_fa ()" ></div>
<I'M G SRC="../files/megusta.png" width=74 height=24></div>

Works great except for facebook do not know how to fix it. (If someone helps me be grateful and also community).

To deploy prestashop

In prestashop is a bit more complicated, but you can also do.

What we do is edit the file header.tpl you will find in the following path on your FTP or your hosting provider for prestashop: public_html \ themes \ default \ header.tpl

Agregad the following lines of code just before closing the head.

<script type="Text / javascript">

 function activate_fa () {(function(D, s, id) {
	  was js, fjs = d.getElementsByTagName (s) [0];
	  if (D.getElementById (id)) return, Js = d.createElement (s); js.id = id; js.src = "/ / Connect.facebook.net / es_LA / all.js # XFBML = 1"; Fjs.parentNode.insertBefore (js, fjs);} (document, 'Script',  'Facebook-jssdk'));}

function activate_gp () {
	was po = document.createElement ('Script'); Po.type = 'Text / javascript'; Po.async = true; Po.src = 'Https://apis.google.com/js/plusone.js';
	
	was s = document.getElementsByTagName ('Script') [0]; s.parentNode.insertBefore (po, s);}

function activate_tw () {!function (D, s, id) {
	was js, fjs = d.getElementsByTagName (s) [0];if(! D.getElementById (id)) {js = d.createElement (s); js.id = id; js.src ="/ / Platform.twitter.com / widgets.js"; Fjs.parentNode.insertBefore (js, fjs);}} (document,"Script","Twitter-WJS");}
</script>

When you have done this'll need a prestashop addon called HTMLBOX that you can download from http://mypresta.eu/modules/front-office-features/html-box.html.

Now only you will have to activate the module in its configuration and add the following code:

The first lines of code you can leave without putting (to get a look is identical to that of the other modules in 1.5.3 version of prestashop)

<P class = "title_block" style = "background-color: # 383838, padding: 6px 11px;

color: # fff; text-shadow: # 0 1 0 000 px; font-size: 12px; font-weight: bold; "> CLICK LIKE HELP</p>

This piece of code is what will show the buttons of social networks. Adaptadlos for which you may have.

<p>

<div class="Fb-like" data-href="Http://www.venlotodo.com" data-send="False"
 data-layout="Button_count" data-show-faces="False" ></div>
<div class="Fb-like" data-href="Http://www.venlotodo.com" onMouseOver="Activate_fa ()"
 data-send="False" data-layout="Button_count" data-show-faces="False" >
<I'M G SRC="../files/megusta.png" width=74 height=24>
</div>

<div class="G-plusone" data-href="Http://www.venlotodo.com" data-size="medium"
 onMouseOver="Activate_gp ()">
<I'M G SRC=".. / Files / gplus.png" width=35 height=23>
</div>

<div>
<a href="Https://twitter.com/share" class="Twitter-share-button" data-url="Http://www.venlotodo.com"
 data-lang="Is" onMouseOver="Activate_tw ()">
<I'M G SRC=".. / Files / twittear.png" width=62 height=22></A></div>
</p>

That's all, I hope you have learned as they work to improve website performance and if you have any problems leave a message and try to answer.

Files with social button images compressed

As I promised before I leave the image files of social networking tablets and ready to download:

Twitter -> http://www.megacrack.es/files/seguir.png

Google Plus -> http://www.megacrack.es/files/gplus.png

Facebook -> http://www.megacrack.es/files/megusta.png

Related Posts Plugin for WordPress, Blogger ...
Tags: , , , , , , , , ,


Leave a Reply

XHTML: You can use in Original tags: <a href="" title=""> <abbr title = ""> <acronym title = ""> <b> <blockquote cite = ""> <cite> <code> <del datetime = ""> <em> <i> <q cite = ""> <s> <strike> <strong>