TikTok en WordPress

Que TikTok es la red social con más crecimiento a nadie se le escapa. No sabemos cuál será su evolución o futuro pero está claro que actualmente es el ecosistema social que más tráfico genera y consume tras las 4 grandes: YouTube, Instagram, Twitter, Facebook.

Pero ¿qué pasa con TikTok en WordPress? ¿se pueden integrar? ¿hay algún modo de interactuar entre ambas plataformas o compartir contenidos?

Vamos a ver qué posibilidades tenemos de integración de TikTok en WordPress y viceversa.

Incrustar TikTok en WordPress

El uso más común entre plataformas es compartir contenido de unas en otras, y en el caso de TikTok, al ser contenido dinámico, vídeos en su totalidad, es genial para un blog personal por ejemplo, poder insertar tiktoks en tu WordPress.

Incrustación directa de TikTok en WordPress

Tristemente, el sistema de incrustado mediante oEmbed incorporado en WordPress no es compatible con TikTok, así que si copias la URL de una publicación de la red, algo muy fácil, pues ofrecen una caja para compartirlos …

… simplemente no funciona directamente:

Afortunadamente tenemos algún que otro modo de incrustarlo, y es que el mismo TikTok, en cada publicación, ofrece un icono en el que nos ofrece el código para incrustarla. Solo hay que hacer clic y copiar el código.

Luego lo pegamos en el editor HTML o en un bloque HTML y ya tenemos nuestro tiktok publicable en nuestro WordPress.

Que se verá de modo totalmente interactivo.

Además, hay algunos parámetros que puedes personalizar en el código de incrustación, como el tamaño del vídeo.

Incrustación de TikTok en WordPress mediante Embedly

Otra posibilidad es usar el servicio Embedly de incrustación de contenido dinámico, en este caso desde TikTok.

Solo tienes que copiar la URL de un tiktok y pegarla en la caja denominada «Embed TikTok Now» y te ofrece un modo sencillo – y algo personalizable – de obtener un código para incrustar contenido de TikTok en WordPress.

Incrustar TikTok en WordPress con plugins

Pues sí, ya van apareciendo plugins para incrustar contenido de TikTok en WordPress.

Y resulta que también hay un plugin de Embedly para WordPress, el sistema que vimos antes, pero aquí la cosa cambia.

Una vez lo instales y actives ya puedes incrustar automáticamente tiktoks solo con pegar la URL que veíamos al principio, y ahora sí, WordPress los reconoce y convierte en contenido dinámico incrustado, sin tener que lidiar con códigos.

Otro plugin muy fácil de usar en realidad es un bloque, llamado Embed Block for TikTok.

Cuando instales y actives el plugin tendrás un nuevo bloque en el editor desde el que incrustar fácilmente tus tiktoks.

Una vez insertado el bloque, en sus ajustes, tienes una caja para pegar ahí la URL del tiktok.

Otras integraciones de TikTok en WordPress

No todo es incrustar contenido de TikTok en WordPress, también hay alguna otra integración que podemos hacer.

Por ejemplo, la versión premium (una pena) del plugin WSM Downloader permite descargar contenidos de TikTok en nuestro WordPress. Y es una pena que solo esté la integración con TikTok en la versión gratuita porque el plugin es una maravilla.

Se integra totalmente con el cargador de medios de WordPress, y permite descargar e insertar contenido de todo tipo de orígenes fácilmente.

Un uso más especializado es el que ofrece el plugin Add TikTok Advertising Pixel, pues facilita la inserción del píxel de anuncios de TikTok, para gestionar, seguir y rentabilizar campañas de anuncios en la red TikTok.

Y es realmente interesante, pues TikTok es la red con más crecimiento como te comentaba al principio, con posibilidades aún sin explorar en el campo de la publicidad, y otras que ya están dando unos rendimientos tremendos, por la popularidad y frescura de sus vídeos.

Lo que ofrece el plugin es un modo sencillo de insertar el píxel con el que rastrear el sistema publicitario de TikTok, con lo que se insertará incluso en productos de WooCommerce.

¿Y tú, estás en TikTok?

Aunque en sus inicios TikTok era una red principalmente utilizada por los más jóvenes para compartir sus vídeos de música y baile, cada vez hay más gente que disfruta de la sencillez y posibilidades de esta plataforma social, una especie de Instagram de vídeos.

Te animo a probarla, y luego, siguiendo esta guía, a integrar TikTok en WordPress.

La entrada TikTok en WordPress la publicó primero Fernando Tellado en Ayuda WordPress. No copies contenido, no dice nada bueno de ti a tus lectores.

Cómo crear una cabecera con menú fijo

A todo el mundo le gustan los menús fijos ¿verdad?

Sí, me refiero a esos menús que siguen al usuario a medida que hace scroll por la web, para que tenga siempre a mano los elementos principales de la web, que para eso los ponemos en los menús ¿no?

Pues bien, en este artículo vamos a aprender a crear una cabecera con menú fijo, si es que nuestro tema no tiene esa funcionalidad.

Pero antes…

¿Por qué debería ofrecer un menú fijo?

Cuando los visitantes navegan por tu web seguramente querrás ofrecerles acceso sencillo a tus contenidos principales, y a muchos de estos visitantes les resultará molesto tener que volver a hacer scroll hacia arriba para navegar por tu web.

Los menús fijos ofrecen una solución sencilla a este desagradable problema. Con una barra de navegación fija los visitantes pueden rápidamente encontrar lo fundamental de tu web.

Además, mejoran la experiencia de navegar por la web y animan al visitante a consumir más contenidos, lo que resulta en una reducción de la tasa de rebote.

Por otra parte, hay situaciones en las que no es recomendable, especialmente si tu menú (o cabecera) fijo ocupa demasiado espacio, lo que molestaría a la hora de ver tu contenido.

Menú fijo hecho totalmente a mano

¡No hay dolor! Vamos a ver cómo hacer un menú fijo totalmente a mano, para impresionar a tus amistades, pero sobre todo para aprender los conceptos básicos, algo que nunca está de más.

Crea el HTML

Lo primero que vamos a hacer es añadir el siguiente HTML en la cabecera de nuestra web, normalmente en el archivo

header.php

del tema.

Como verás es muy básico, incluyendo los

div

y clases fundamentales, y solo un par de enlaces, a los que puedes añadir tantos como quieras agregando elementos (

  • otro elemento
  • ).

    Crea el CSS

    Lo siguiente es crear un poco de CSS para hacer un bonito menú fijo. Pega el siguiente código en la hoja de estilos de tu tema, normalmente será en el archivo

    style.css

    .

    #menufijo{
            width: 1122px;
            height:30px;
            margin-left:-48px;
            padding:5px 48px;
            position:fixed;
            top:0;
            background:#7eb7d9;
            display:none;
    }
            
    .menu-fijo{
            width: 260px;
            float: right;
            text-align: right;
            padding:4px 0 5px 0;
            list-style-type:none;
    }
    
    .menu-fijo li{ display:inline; }
    .menu-fijo a{
            ont-size:0.9em;
            color:#fff; 
            text-shadow:1px 1px #5E8BC5;
            padding:0 0 0 10px;
    }

    El riquitaun … estoooo … el jQuery

    Pero ¿cómo detectamos cuando se hace scroll en la página suficientemente como para que no se vea la cabecera?

    Pues usando jQuery, por supuesto.

    Pega el siguiente código en el archivo

    footer.php

    del tema. Eso sí, asegúrate de que tu WordPress incluye jQuery (normalmente lo tiene).

    $(document).ready(function() {
            $(window).scroll(function(){
                    if(document.body.scrollTop > 300)
                            $('#menufijo').fadeIn( "slow", function() { });
                    else    
                            $('#menufijo').fadeOut( "slow", function() { });
            });
    
            $('a#srolltotop').click(function(){
                    $('html, body').animate({scrollTop:0}, 100);
                    return false;
            });
    });

    Lo que hace este código es sencillo.

    En la línea 3 detecta si el documento ha hecho scroll más de 300 píxeles desde arriba, y si así fuera se llama a la función jQery

    fadeIn()

    para que muestre el menú fijo.

    Luego, se usa la función

    fadeOut()

    para ocultar el menú fijo cuando sea visible la parte superior de la página.

    Si te fijas, además, en la línea 9 está añadido un código para detectar cuando esté activo el enlace

    #scrolltop

    , el clic que hará scroll a la parte de arriba de la página.

    Menú fijo solo con tus menús de WordPress y un poco de CSS

    Si lo anterior se te hace bola, aquí tenemos otro método sencillito, para hacer fijo cualquier menú que ya hayas creado en tu WordPress desde el Personalizador. Son solo 2 pasos.

    Identifica la clase CSS de tus menús

    Lo primero es identificar la clase CSS que usa tu tema para la cabecera y los menús de navegación.

    Para ello haz clic derecho en cualquier parte de tu web y haz clic en «Inspeccionar» (Chrome) o «Inspeccionar elemento» (Firefox y Safari). Se abrirá el inspector del navegador.

    Ahora pon el cursor sobre la cabecera y se mostrará el nombre de la clase CSS que usa tu tema para mostrarla.

    Aquí tienes tres ejemplos de nombres que te puedes encontrar, aunque variará en cada tema:



    Depende de dónde sitúes el cursor se seleccionará la clase para la cabecera o solo para los menús, pero mi consejo es que uses la clase para la cabecera, que funcionará siempre bien al hacer scroll.

    Añade ese «poquito» de CSS

    Una vez identificada la clase CSS que usa tu tema para la cabecera (dónde esté el menú que quieres hacer fijo), ve a

    Apariencia > Personalizar > CSS adicional

    de tu WordPress y añade lo siguiente:

    #masthead.site-header { //Aquí sustituye este ID de la clase CSS por el de tu tema. 
    background:#fff;
    height:60px;
    z-index:170;
    margin:0 auto;
    border-bottom:1px solid #dadada;
    width:100%;
    position:fixed;
    top:0;
    left:0;
    right:0;
    text-align: center;
    }

    Del código anterior, a priori, solo hay que cambiar el ID de la clase CSS que use tu tema. El resto es cuestión de gustos, pero procura cambiar lo mínimo, colores si acaso.

    Publica los cambios y comprueba si tu menú sigue la navegación a medida que haces scroll por la página hacia abajo.

    Dependiendo de la estructura de tu tema puede requerir también cambios en la altura, márgenes o incluso posiciones.

    Menú fijo con plugins

    Pues sí, también hay algunos plugins que te ayudarán a hacer fijo tu menú y/o cabecera. Vamos a ver los que son gratuitos ¿vale?

    Sticky Menu (or anything)

    Este requiere un pelín de esfuerzo por tu parte porque, igual que con el método anterior, debes identificar antes de configurarlo el ID de la clase CSS que use tu tema para la cabecera/menús.

    Una vez lo tengas solo tienes que ponerlo en la página de ajustes del plugin.

    Sticky Menu on Scroll

    Con este otro plugin, aunque también puedes indicar la clase CSS, te permite seleccionar el menú que quieres fijar, lo que no deja de ser una ayuda.

    Simply Sticky Header on Scroll

    Este es diferente, lo que ofrece es que crees un menú nuevo que siga el scroll. Puedes añadir un logo y personalizarlo a tu gusto.

    Se hace todo desde su propio menú en el Personalizador.

    Es un enfoque diferente pero igual te gusta.

    Fixed and Sticky Header

    Muy sencillo y fácil de configurar. Como en el primero, tienes que identificar el ID de la clase CSS, pero funciona de maravilla.

    Temas que ya ofrecen menús fijos

    Para finalizar, hay temas que ya llevan esta funcionalidad incorporada, como por ejemplo Divi, en su página de opciones, y otros muchos.

    ¿Cuándo debería ofrecer una cabecera o menú fijo?

    Hay muchas posibles situaciones, pero las siguientes son unas bastante buenas razones para usar una cabecera o menú fijo en tu web:

    • Tu sitio tiene mucho contenido
    • Tu sitio utiliza scroll infinito o tiene páginas muy largas
    • Quieres que tus usuarios se registren o compren algo (que esté en tu menú)
    • Tu sitio es una aplicación web con botones/enlaces usados con frecuencia
    • Tu sitio tiene páginas importantes que los usuarios visitan con frecuencia (revisa tus datos de Analytics)
    • Quieres mostrar siempre un buscador (que está en la cabecera)
    • Tienes una tienda online, y quieres que el carrito siempre esté visible
    • En tus menús enlazas a tus contenidos esenciales

    Reflexionando

    Ahora te preguntarás…

    «¿Y por qué tú no tienes un menú fijo en Ayuda WordPress si el blog cumple con muchas de las razones para tenerlo?»

    Pues porque este blog siempre he querido que esté totalmente centrado en el contenido, sin forzar la máquina, y cuando sigues al usuario con un menú parece que «le estás diciendo» que haga clic en algo de esa cabecera.

    Y, además, considero que, como lector de Ayuda WordPress, ya sabes que además de contenido gratis a diario también tengo servicios de los que pagan facturas y eso, y que si quieren hacer una consultoría en directo o un curso conmigo ya sabrán encontrar los enlaces.

    Vamos, que cada sitio es un mundo, y tú debes elegir qué experiencia de navegación quieres ofrecer. En mi caso, en este blog, he querido que sea lo más sencilla posible con las mínimas distracciones.

    La entrada Cómo crear una cabecera con menú fijo la publicó primero Fernando Tellado en Ayuda WordPress. No copies contenido, no dice nada bueno de ti a tus lectores.

    Auditoría de contenido para SEO [Plantilla]

    Auditoría de contenido SEOEstá claro que hacer una auditoría de contenidos enfocada al SEO no mola tanto como conseguir enlaces entrantes o echarte la siesta mientras ves documentales de leones en la Sabana africana, pero puede ser muuuuy importante; o por lo menos te puede servir para dejar tu sitio la mar de limpito. 👌   Y ya […]

    La entrada Auditoría de contenido para SEO [Plantilla] se publicó primero en Posicionamiento web | Vivir de un blog.