Performanceoptimeret social-sharing i WordPress

29-07-14 brianbrandt 0 kommentarer

Hos WPDK mener vi, der er brug for performanceoptimeret social-sharing i WordPress.

Performanceoptimeret social-sharing?

Det korte af det lange er, at mange WordPress hjemmesider lider af, at plugins til social-sharing/deling er MEGET tunge. Så tunge, at hele siden køres i sænk i flere sekunder, grundet de mange filer og scripts der skal hentes og afvikles hver gang, blot for at vise en side. Dvs. sidens performance – og derved dens brugervenlighed og karakter hos søgemaskiner – går hurtigt ned ad bakke grundet de tunge plugins. Det er drønærgeligt, da de ikke rigtig gør andet end at vise et par knapper for deling af den pågældende side/artikel på sociale medier.

Jeg har for nyligt har siddet og bøvlet med et WordPress site, der ikke kunne sluge nogen social-sharing plugins (de crashede) i blog delen. Plus de hentede MANGE scripts og billedfiler (op til 40 af slagsen). Dette var selvfølgelige ikke acceptabelt – og et problem vi her i virksomheden ser i stigende grad hos vores kunder.

Så nu har jeg skrevet min egen løsning, der henter KUN 1 FIL i løbet af en brøkdel af ét sekund, men virker med Facebook, Twitter, Google+ og LinkedIn. Dvs. hjemmebrygget performanceoptimeret social-sharing i WordPress. Jeg vil bruge den som eksempel i dette blogindlæg.

Men hvorfor er det interessant?

Jo hurtigere din side vises, jo mindre chance er der for, at brugere (og søgemaskiner) surfer videre og ignorerer dit indhold – uanset hvor godt og relevant det nu end kan være…

Det anslås, at ca. lidt over halvdelen af alle brugere mister tålmodigheden første gang de besøger en side, hvis ikke den er hentet i løbet af de første 3 sekunder. Derfor er det drøn ærgeligt hvis knapper til deling af dit (evt. geniale) indhold på sociale medier medvirker til, brugeren løber skrigende bort i frustration, før sidens indhold overhovedet bliver vist. Dvs. ikke alene virker knappen modsat til det den skal (deling af indhold på sociale medier) men rent faktisk forhindrer brugeren i at lære indholdet at kende på din side.

Det holder selvfølgelige ikke.

Hvordan kan problemet løses?

Der findes umiddelbart fire måder at løse problemet på:

1. At droppe helt knapperne til social-sharing / deling – i det mindste på sitets forside. Ikke den mest optimale løsning, men den virker, dog med den irriterende side-gevinst at din side nok ikke bliver delt på sociale medier…

2. At hente de scripts knapperne bruger først når en bruger udviser interesse for deling (ved at bevæge musen indover knappen). Se eksempel på: http://www.feldstedt.dk/. Læg mærke til hvor hurtigt siden hentes…

3. At droppe helt de scripts og skrive funktionaliteten i stedet for som PHP funktioner i dit theme og bruge simple html links i stedet for knapper. Det giver nok den bedste performance, men ser ret kedeligt ud.

4. At droppe helt de scripts og skrive funktionaliteten i stedet for som PHP funktioner i dit theme – samt at bruge CSS sprite-blitting- og animations teknikker for at simulere billeder af flere knapper, selvom der kun er tale om et enkelt billede. Se eksempel på: http://gittemandrup.dk/hr-business-boost-blog/. Læg mærke til hvor hurtigt siden hentes…

Lad os se nærmere på mulighed nr. 4. Jeg har udarbejdet følgende billede som base for knapperne:

iconer

 

(højre-klik og Gem billede, hvis du ønsker at bruge det.)

Det vi kommer til at gøre, er kun at vise en del af billedet ad gangen i hver “knap” og så bevæge det rundt for at simulere animation i knappen. På den måde kan vi genbruge det samme billede for alle knapperne. Husk at når et billede engang er hentet ind i browseren, “koster” det ikke ekstra ressourcer at bruge det igen og igen…

 

Det giver følgende boks:

[del]

WordPress har to fantastiske funktioner, der indeholder stort set alt hvad vi har brug for, for at lave et link til deling af en side:

get_the_title() der returnerer sidens eller indlæggets overskrift/titel.

get_permalink() der returnerer sidens eller indlæggets URL.

Hvilket er nok til at vi kan lave et link med en kort beskrivelse, der egner sig godt til f.eks. Twitter og Facebook.

OBS: Husk at udskifte TWITTER-NAVN (i koden) med dit Twitter navn… (for os er det “WP_DK”)

 

Dette snippet er beregnet til filen “functions.php” i dit theme.

/* Shortcode for super effektiv social deling UDEN scripts */
/* Brug: [delSLET] */
/* se bort fra SLET.. */ 
function wpdk_share($atts){
	$del_title = get_the_title();
	$del_link = get_permalink();
	$del_html = '';
	$del_html .= '<div class="del"><div class="del-label">Del på: </div><a href="http://www.facebook.com/sharer.php?u=';
	$del_html .= $del_link;
	$del_html .= '&t=';
	$del_html .= $del_title;
	$del_html .= '" target="_blank" title="Del på Facebook"><span class="del-facebook"></span></a><a href="http://twitter.com/share?url=';
	$del_html .= $del_link;
	$del_html .= '&text=';
	$del_html .= $del_title;
        $del_html .= ' - ';
	$del_html .= '&via=TWITTER-NAVN" target="_blank" alt="Del på Twitter" title="Del på Twitter"><span class="del-twitter"></span></a><a href="https://plus.google.com/share?url=';
	$del_html .= $del_link;
	$del_html .= '" target="_blank" title="Del på Google+"><span class="del-googleplus"></span></a><a href="http://www.linkedin.com/shareArticle?mini=true&url=';
	$del_html .= $del_link;
	$del_html .= '&title=';
	$del_html .= $del_title;
	$del_html .= '" target="_blank" title="Del på LinkedIn"><span class="del-linkedin"></span></a></div><div class="del-break">&nbsp;</div>';
	return $del_html;
}
/* Tilføj vores shortcodes til listen over ting WordPress "lytter" efter */
add_shortcode('del', 'wpdk_share');

 

Dette snippet er beregnet til filen “style.css” i dit theme.

/*------------------------------------------------
                 KNAPPER + AFSNIT
--------------------------------------------------*/
.del {padding:10px;}
.del-label {
	width:50px;
	height:39px;
	display:block;
	float:left;
}
.del-facebook {
	margin-left: 10px;
	width:39px;
	height:39px;
	display:block;
	float:left;
	background-image: url('images/iconer.png');
	animation: animatedFacebookNO .1s linear;
	-moz-animation: animatedFacebookNO .1s linear;
	-webkit-animation: animatedFacebookNO .1s linear;
	-ms-animation: animatedFacebookNO .1s linear;
	-o-animation: animatedFacebookNO .1s linear;
	background-position: 0px 39px;
}
.del-twitter {
	margin-left: 10px;
	width:39px;
	height:39px;
	display:block;
	float:left;
	background-image: url('images/iconer.png');
	animation: animatedTwitterNO .1s linear;
	-moz-animation: animatedTwitterNO .1s linear;
	-webkit-animation: animatedTwitterNO .1s linear;
	-ms-animation: animatedTwitterNO .1s linear;
	-o-animation: animatedTwitterNO .1s linear;
	background-position: 133px 39px;
}
.del-googleplus {
	margin-left: 10px;
	width:39px;
	height:39px;
	display:block;
	float:left;
	background-image: url('images/iconer.png');
	animation: animatedGoogleplusNO .1s linear;
	-moz-animation: animatedGoogleplusNO .1s linear;
	-webkit-animation: animatedGoogleplusNO .1s linear;
	-ms-animation: animatedGoogleplusNO .1s linear;
	-o-animation: animatedGoogleplusNO .1s linear;
	background-position: 39px 39px;
}
.del-linkedin {
	margin-left: 10px;
	width:39px;
	height:39px;
	display:block;
	float:left;
	background-image: url('images/iconer.png');
	animation: animatedLinkedinNO .1s linear;
	-moz-animation: animatedLinkedinNO .1s linear;
	-webkit-animation: animatedLinkedinNO .1s linear;
	-ms-animation: animatedLinkedinNO .1s linear;
	-o-animation: animatedLinkedinNO .1s linear;
	background-position: 86px 39px;
}
.del-facebook:hover {
	animation: animatedFacebookMO .1s linear;
	-moz-animation: animatedFacebookMO .1s linear;
	-webkit-animation: animatedFacebookMO .1s linear;
	-ms-animation: animatedFacebookMO .1s linear;
	-o-animation: animatedFacebookMO .1s linear;
	background-position: 0px 0px;
}
.del-twitter:hover {
	animation: animatedTwitterMO .1s linear;
	-moz-animation: animatedTwitterMO .1s linear;
	-webkit-animation: animatedTwitterMO .1s linear;
	-ms-animation: animatedTwitterMO .1s linear;
	-o-animation: animatedTwitterMO .1s linear;
	background-position: 133px 0px;
}
.del-googleplus:hover {
	animation: animatedGoogleplusMO .1s linear;
	-moz-animation: animatedGoogleplusMO .1s linear;
	-webkit-animation: animatedGoogleplusMO .1s linear;
	-ms-animation: animatedGoogleplusMO .1s linear;
	-o-animation: animatedGoogleplusMO .1s linear;
	background-position: 39px 0px;
}
.del-linkedin:hover {
	animation: animatedLinkedinMO .1s linear;
	-moz-animation: animatedLinkedinMO .1s linear;
	-webkit-animation: animatedLinkedinMO .1s linear;
	-ms-animation: animatedLinkedinMO .1s linear;
	-o-animation: animatedLinkedinMO .1s linear;
	background-position: 86px 0px;
}
.del-break {
	display:block;
	clear:both;
	height:20px;
	width:100%;
}
/*------------------------------------------------
        KNAPPER ANIMATION (SPRITE-BLITTING)
--------------------------------------------------*/
/* Facebook*/
@keyframes animatedFacebookMO {
	0% { background-position: 0px 39px; }
	100% { background-position: 0px 0px; }
}
@-moz-keyframes animatedFacebookMO {
	0% { background-position: 0px 39px; }
	100% { background-position: 0px 0px; }
}
@-webkit-keyframes animatedFacebookMO {
	0% { background-position: 0px 39px; }
	100% { background-position: 0px 0px; }
}
@-ms-keyframes animatedFacebookMO {
	0% { background-position: 0px 39px; }
	100% { background-position: 0px 0px; }
}
@-o-keyframes animatedFacebookMO {
	0% { background-position: 0px 39px; }
	100% { background-position: 0px 0px; }
}
@keyframes animatedFacebookNO {
	0% { background-position: 0px 0px; }
	100% { background-position: 0px 39px; }
}
@-moz-keyframes animatedFacebookNO {
	0% { background-position: 0px 0px; }
	100% { background-position: 0px 39px; }
}
@-webkit-keyframes animatedFacebookNO {
	0% { background-position: 0px 0px; }
	100% { background-position: 0px 39px; }
}
@-ms-keyframes animatedFacebookNO {
	0% { background-position: 0px 0px; }
	100% { background-position: 0px 39px; }
}
@-o-keyframes animatedFacebookNO {
	0% { background-position: 0px 0px; }
	100% { background-position: 0px 39px; }
}
/* Twitter */
@keyframes animatedTwitterMO {
	0% { background-position: 133px 39px; }
	100% { background-position: 133px 0px; }
}
@-moz-keyframes animatedTwitterMO {
	0% { background-position: 133px 39px; }
	100% { background-position: 133px 0px; }
}
@-webkit-keyframes animatedTwitterMO {
	0% { background-position: 133px 39px; }
	100% { background-position: 133px 0px; }
}
@-ms-keyframes animatedTwitterMO {
	0% { background-position: 133px 39px; }
	100% { background-position: 133px 0px; }
}
@-o-keyframes animatedTwitterMO {
	0% { background-position: 133px 39px; }
	100% { background-position: 133px 0px; }
}
@keyframes animatedTwitterNO {
	0% { background-position: 133px 0px; }
	100% { background-position: 133px 39px; }
}
@-moz-keyframes animatedTwitterNO {
	0% { background-position: 133px 0px; }
	100% { background-position: 133px 39px; }
}
@-webkit-keyframes animatedTwitterNO {
	0% { background-position: 133px 0px; }
	100% { background-position: 133px 39px; }
}
@-ms-keyframes animatedTwitterNO {
	0% { background-position: 133px 0px; }
	100% { background-position: 133px 39px; }
}
@-o-keyframes animatedTwitterNO {
	0% { background-position: 133px 0px; }
	100% { background-position: 133px 39px; }
}
/* Google Plus */
@keyframes animatedGoogleplusMO {
	0% { background-position: 39px 39px; }
	100% { background-position: 39px 0px; }
}
@-moz-keyframes animatedGoogleplusMO {
	0% { background-position: 39px 39px; }
	100% { background-position: 39px 0px; }
}
@-webkit-keyframes animatedGoogleplusMO {
	0% { background-position: 39px 39px; }
	100% { background-position: 39px 0px; }
}
@-ms-keyframes animatedGoogleplusMO {
	0% { background-position: 39px 39px; }
	100% { background-position: 39px 0px; }
}
@-o-keyframes animatedGoogleplusMO {
	0% { background-position: 39px 39px; }
	100% { background-position: 39px 0px; }
}
@keyframes animatedGoogleplusNO {
	0% { background-position: 39px 0px; }
	100% { background-position: 39px 39px; }
}
@-moz-keyframes animatedGoogleplusNO {
	0% { background-position: 39px 0px; }
	100% { background-position: 39px 39px; }
}
@-webkit-keyframes animatedGoogleplusNO {
	0% { background-position: 39px 0px; }
	100% { background-position: 39px 39px; }
}
@-ms-keyframes animatedGoogleplusNO {
	0% { background-position: 39px 0px; }
	100% { background-position: 39px 39px; }
}
@-o-keyframes animatedGoogleplusNO {
	0% { background-position: 39px 0px; }
	100% { background-position: 39px 39px; }
}
/* LinkedIn */
@keyframes animatedLinkedinMO {
	0% { background-position: 86px 39px; }
	100% { background-position: 86px 0px; }
}
@-moz-keyframes animatedLinkedinMO {
	0% { background-position: 86px 39px; }
	100% { background-position: 86px 0px; }
}
@-webkit-keyframes animatedLinkedinMO {
	0% { background-position: 86px 39px; }
	100% { background-position: 86px 0px; }
}
@-ms-keyframes animatedLinkedinMO {
	0% { background-position: 86px 39px; }
	100% { background-position: 86px 0px; }
}
@-o-keyframes animatedLinkedinMO {
	0% { background-position: 86px 39px; }
	100% { background-position: 86px 0px; }
}
@keyframes animatedLinkedinNO {
	0% { background-position: 86px 0px; }
	100% { background-position: 86px 39px; }
}
@-moz-keyframes animatedLinkedinNO {
	0% { background-position: 86px 0px; }
	100% { background-position: 86px 39px; }
}
@-webkit-keyframes animatedLinkedinNO {
	0% { background-position: 86px 0px; }
	100% { background-position: 86px 39px; }
}
@-ms-keyframes animatedLinkedinNO {
	0% { background-position: 86px 0px; }
	100% { background-position: 86px 39px; }
}
@-o-keyframes animatedLinkedinNO {
	0% { background-position: 86px 0px; }
	100% { background-position: 86px 39px; }
}

 

 

Det, der sker, er at vi opretter funktioner, der returnerer noget HTML, når de kaldes. Disse funktioner hægtes så på listen over de ting WordPress kigger efter, når den løber igennem indholdet i dit indløg/side.

Denne bruges ved at skrive: [delSLET]

Grunden til at jeg skriver SLET, er at ellers ville WordPress fortolke koden, da ovenstående kode-eksempel er en del af dette indlægs indhold og da jeg bruger de shortcodes for at generere citat-bokse på dette site. Dvs. slet “SLET” fra koden… 🙂

Jeg har valgt at bruge Facebook, Twitter, Google+ og LinkedIn. Men selvfølgelige kan koden udvides med links for andre sociale medier (så længe de har en API til deling).

[obs-hacks]

[obs-backup]