homefinance blog
Compartir cosas a través de las redes sociales es importante. ¡Así que haz el tiempo de carga de la página! Este tutorial rápido le mostrará cómo puede cargar acciones asíncronas de las redes sociales en WordPress y mejorar la velocidad de su página. ¿Qué significa “carga asíncrona”? Significa que los botones de distribución social se cargarán y ejecutarán en su página al mismo tiempo que la reproducción de la página, lo que significa que los visitantes de su sitio tendrán que esperar menos para ver su contenido. Beneficios:
Alojamiento superior recomendado por MEKS
Mejorará la velocidad de su página (tiempo de carga). Su sitio no tiene que esperar la respuesta de otros servidores (redes sociales).
Su sitio es completamente independiente, lo que significa que, si, por ejemplo, Facebook o Twitter están actualmente detenidos o sobrecargados, su contenido siempre estará disponible para los visitantes.
Sus visitantes no tienen que esperar y no se ejecutarán a otro sitio web. ¡Mejora la tasa de rechazo y el SEO!
Es probable que sus visitantes distribuyan sus artículos si los mantiene en su sitio web. ¡Mejora la cantidad de artículos compartidos, lo que significa más visitantes!
En este ejemplo, explicaremos cómo puede implementar esta técnica en su WordPress. El tutorial cubre la carga asíncrona de Facebook, Twitter, LinkedIn, Pinterest y Google+.
Ver también: Cargue JavaScript solo en ciertas páginas de WordPress
Paso 1: Cree el archivo JavaScript, por ejemplo, lo llamaremos Share.js y lo pondremos en la carpeta JS en la carpeta raíz del tema. Aquí está el código:
/ * Script para Asynchronus Carga de botones para compartir */
(función (w, d, s) {
Función go () {var js, fjs = d.getElementsBytagName (s) [0], load = function (url, id) {
If (d.getementById (id)) {return;}
JS = D. CREATEMENT (S); J.Src = url; J.ID = id;
fjs.parentnode.insertbefore (js, fjs);
};
// Facebook
Load (‘// Connect.facebook.net/en_us/all.js#xfbml=1’, ‘fbjssdk’);
// Google+
Load (‘https://apis.google.com/js/plusone.js’, ‘lplus1js’);
// Twitter
Load (‘// plataforma.twitter.com/widgets.js’, ‘tweTJS’);
// Linedin
Load (‘// plataforma.linkedin.com/in.js’, ‘lnkdjs’);
// Pinterest
Load (‘// assets.pinterest.com/js/pinit.js’, ‘pinitjs’);
}
If (w.addeventListener) {w.addeventListener (“cargar”, ir, falso); }
else if (w.attachevent) {w.attachevent (“onload”, go); }
} (Ventana, documento, ‘script’));
!
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
dieciséis
17
18
19
20
21
22
2. 3
24
25
(función (w, d, s) {
Función go () {
Var js, fjs = D. GetElementsBytagName (s) [0], load = function (url, id) {
If (d. GetemementById (id)) {return; }
js = d. creación (s); js. Src = url; js. id = id;
FJS. Parentnode. InsertBefore (JS, FJS);
};
Load (‘//connect.facebook.net/en_us/all.js#xfbml=1’, ‘fbjssdk’);
// Google+
Load (‘https://apis.google.com/js/plusone.js’, ‘lplus1js’);
Load (‘//platform.twitter.com/widgets.js’, ‘tweetjs’);
// Linedin
Load (‘//platform.linkedin.com/in.js’, ‘lnkdjs’);
Load (‘//assets.pinterest.com/js/pinit.js’, ‘pinitjs’);
}
if (w. addEventListener) {w. AddEventListener (“cargar”, ir, falso); } else if (w. adjectEvent) {w. AttachEvent (“Onload”, Go); }
} (Ventana, documento, ‘script’));
Paso 2: Pon el archivo share.js en su cola en su base, este es un código que debe agregar en las funciones.php de su base:
/ * Encarar el script dentro de sus funciones. Php */
Function meks_load_screscts () {
/* Esto cargará el archivo JS solo para sus publicaciones individuales,
Si desea usar la misma cosa para las páginas, use “IS_Singular ()”, verifique Intead.
O, si también desea usarlo en las páginas de archivo, elimine la declaración “si”. */
if (is_single ()) {
wp_enqueue_script (‘meks_async_share’, trailingsLashit (get_template_directory_uri ()). ‘/js/share.js’, array (‘jquey’));
}
}
add_action (‘wp_enqueue_scripts’, ‘meks_load_scripts’);
!
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
Function meks_load_screscts () {
/* Esto cargará el archivo JS solo para sus publicaciones individuales,
Si desea usar la misma cosa para las páginas, use “IS_Singular ()”, verifique Intead.
O, si también desea usarlo en las páginas de archivo, elimine la declaración “si”. */
if (is_single ()) {
wp_enqueue_script (‘meks_async_share’, trailingsLashit (get_template_directory_uri ()).
}
}
add_action (‘wp_enqueue_scripts’, ‘meks_load_scripts’);
Paso 3: Coloque una parte del HTML del código en sus plantillas es solo un paso. Deberá poner “sustituyentes” en sus plantillas reales, que se llenarán con botones de intercambio después de ejecutar el script. Tenga en cuenta que la mejor práctica es usarlo siempre en el “bucle”. Se puede ubicar en single.php, index.php o donde quiera. Aquí hay un ejemplo básico:
<a class="twitter-button data date-count -veral feche-via="oshq" date-url="?>
<script type = "in/share" date-counter = "top" date-url = "”>
<div class = "fb-like" date-send = "false" date-layout = "box_count" date- data-show -infins = "false" date-href = " “>
<g: plusone size = "tall" data-href = "”>
<a href="http://pinterest.com/pin/cres/button/?url= & medios = & descripción =
!
2
3
4
5
6
7
8
9
10
11
12
13
14
15
dieciséis
17
18
19
20
21
22
2. 3
24
25
26
27
<a class = "twitter -button" date – count = "verical" date – vía = "mekshq" date – url = " “>
>
<script type = "in/share" date-counter = "top" date-url = "”>
<div class = "fb -like" date – send = "false" date – diseño = "box_count" date – width = "50" fecha – show – faces = "falso" fecha – href = " “>
<g: plusone size = "tall" date – href = "”>
<a href = "http://pinterest.com/pin/cres/button/?url= & medios = & & & descripción =
¡Y eso es!¡Listo con los pasos!
Ver también: Transmisión de variables a la función WordPress get_template_part ().
¿Ejemplo en vivo?Puede ver todo esto en vivo en acción en nuestro sitio web Safarica WordPress Temo Demo.¡Siéntase libre de compartir sus comentarios y pensamientos!
