Scriptless Social Sharing

FAQ

¿Cómo se muestran los botones/iconos de las redes sociales?

Scriptless uses SVG files to display the social network icons, or you can revert to using the old FontAwesome webfont.

También son una opción los botones de solo texto. Y, si prefieres flexbox para dar estilo a los elementos en las filas en vez de una tabla CSS, esto está ahora disponible en la página de ajustes.

¿Con qué redes sociales es compatible?

Scriptless Social Sharing actualmente es compatible con las siguientes redes sociales:

• X (Twitter)
• Facebook
• Pinterest
• LinkedIn
• Reddit
• WhatsApp
• Pocket
• Telegram
• Hatena Bookmark
• SMS
• Correo electrónico
• Bluesky

Instagram does not support social sharing buttons.

¿Puedo cambiar los iconos en SVG?

Yes, using a filter, you can change which SVG icons are used. The plugin provides SVG alternatives for social networks if they are available.

Aquí tienes un ejemplo de cómo podrías cambiar a los iconos «cuadrados» en cada red (no todas redes lo tienen):

add_filter( 'scriptlesssocialsharing_svg_icons', 'rgc_use_square_icons' );
/**
 * Change the Scriptless Social Sharing SVG icons to use the square versions when available.
 *
 * @param $icons
 *
 * @return array
 */
function rgc_use_square_icons( $icons ) {
    $square_icons = array(
        'email'     => 'envelope-square',
        'facebook'  => 'facebook-square',
        'pinterest' => 'pinterest-square',
        'reddit'    => 'reddit-square',
        'twitter'   => 'twitter-square',
        'whatsapp'  => 'whatsapp-square',
    );

    return array_merge( $icons, $square_icons );
}

Want to use an icon not provided by the plugin? Load your own icons in your theme. As of version 3.2.0, the plugin uses SVG files directly, instead of sprite files. To use your own SVG files instead of the plugin’s, add them to your theme, in assets/svg. The plugin will use the theme icons in preference of the plugin.

¿Y si quiero cambiar de sitio dónde se muestran los botones?

Buttons can be added in multiple places, or easily add support so you can add buttons anywhere you like. The default button locations are:

• Antes del contenido: al principio de la entrada, dentro del contenido de la entrada.
• Después del contenido: al final de la entrada, dentro del contenido de la entrada.
• Manual: selecciona esto si estás añadiendo botones con tu propio código (esto asegura que se carguen los estilos necesarios, y otras tareas habituales).

Para aprovechar las nuevas opciones de ubicación, debes visitar la página de ajustes del plugin y actualizar tus ajustes.

Nota: si tienes código que quita la visualización de los botones originales y los añade a mano, asegúrate de que has seleccionado «Manual» para la ubicación en cada tipo de contenido afectado.

La mejor manera de cambiar la ubicación de visualización del botón es usando un filtro. Este ejemplo cambia las ubicaciones utilizando el filtro the_content (con hook establecido a false) para usar ganchos de acción en su lugar.

add_filter( 'scriptlesssocialsharing_locations', 'prefix_change_sss_locations' );
function prefix_change_sss_locations( $locations ) {
    $locations['before'] = array(
        'hook'     => 'genesis_before_entry',
        'filter'   => false,
        'priority' => 8,
    );
    $locations['after'] = array(
        'hook'     => 'loop_end',
        'filter'   => false,
        'priority' => 8,
    );

    return $locations;
}

Si usas Genesis Framework, hay un ajuste para decirle al plugin que use los ganchos de Genesis en su lugar.

¿Hay un bloque de Scriptless Social Sharing?

¡Sí!, se introdujo en la versión 3.0, el nuevo bloque de compartir te permite poner botones de compartir en cualquier parte de tu contenido. Añade sólo unos pocos botones o confía en la configuración por defecto definida en la página de ajustes.

¿Hay algún shortcode?

Desde la versión 2.0.0 puedes añadir botones de compartir directamente a tu contenido con un shortcode. Puedes personalizar lo que se ve, también. Por ejemplo, para añadir los botones a tu contenido, exactamente como los has configurado en tus ajustes, simplemente usa este shortcode:

[scriptless]

Si quieres quitar el encabezado prueba de este modo (o personaliza el encabezado añadiendo texto):

[scriptless heading=""]

¿Quieres que solo ciertos botones se muestren en el shortcode? Añádelos como un atributo del shortcode (separados por comas, sin espacios). Esto mostrará solo los botones de email y facebook:

[scriptless buttons="email,facebook"]

¿Puedo añadir botones a las entradas en las páginas de archivo?

Sí. Primero tienes que decirle al plugin que puede, de hecho, funcionar en la página de archivo relevante:

add_filter( 'scriptlesssocialsharing_can_do_buttons', 'prefix_add_buttons_archives' );
function prefix_add_buttons_archives( $cando ) {
    if ( is_home() || is_tax() || is_category() ) {
        $cando = true;
    }
    return $cando;
}

Luego puedes añadir los botones a tus entradas individuales (este ejemplo funciona solo con Genesis Framework):

add_action( 'genesis_entry_content', 'prefix_scriptlesssocialsharing_buttons_entry_content', 25 );
function prefix_scriptlesssocialsharing_buttons_entry_content() {
    if ( ! function_exists( 'scriptlesssocialsharing_do_buttons' ) ) {
        return;
    }
    $is_disabled = get_post_meta( get_the_ID(), '_scriptlesssocialsharing_disable', true );
    if ( ! $is_disabled && ! is_singular() ) {
        echo wp_kses_post( scriptlesssocialsharing_do_buttons() );
    }
}

Algunas entradas no tienen el botón de Pinterest. ¿Por qué pasa esto?

Sí, esto es así a propósito. Pinterest realmente realmente realmente quiere que tus entradas tengan una imagen. El botón de Pinterest se rompe si no hay una imagen. El plugin mira en tres lugares para encontrar alguna: 1) la imagen personalizada de Pinterest; 2) la imagen destacada de la entrada; y 3) si no hay establecida ninguna imagen destacada, coge la primera imagen subida a esa entrada específica. Llegados a este punto, si sigue sin haber ninguna imagen, en vez de poner un botón que no funcionará, el plugin no muestra un botón de Pinterest en esa entrada concreta.

¿Qué es esto de «Imagen personalizada de Pinterest»?

You can add an image for the plugin to use specifically for Pinterest, instead of the post’s featured image. This image will be added to the Pinterest sharing button as well as hidden in your content, so that the Pinterest bookmarklet will be able to «see» the image. Scroll down in the post editor sidebar to find where to add the custom image.

How can I add a custom sharing button?

It has always been possible to add a custom sharing button with custom code, but version 3.2.0 makes this a little easier by creating a new helper function. You’ll access the helper function by using a filter. Here’s an example of how to add a button to share a post to Tumblr:

add_filter( 'scriptlesssocialsharing_register', 'prefix_scriptless_add_tumblr_button' );
/**
* Adds a custom sharing button to Scriptless Social Sharing.
*
* @return void
*/
function prefix_scriptless_add_tumblr_button( $buttons ) {
    $buttons['tumblr'] = array(
        'label'    => __( 'Tumblr', 'scriptless-social-sharing' ),
        'url_base' => 'https://www.tumblr.com/share/link',
        'args'     => array(
            'query_args' => array(
                'name' => '%%title%%',
                'url'  => '%%permalink%%',
            ),
            'color'      => '#35465c',
            'svg'        => 'tumblr-square', // Use this with the SVG icons and add the SVG file to your theme's `assets/svg` folder
            'icon'       => 'f173', // Use this when using the FontAwesome font for icons
        ),
    );

    return $buttons;
}

The %% are used to designate placeholders for the attribute variables that the plugin will apply when building the button.

Note that there is both an svg and an icon argument in the code sample. svg is preferred, but only applies if you are using the SVG option for the sharing icons. To add a new icon, upload it to your theme’s assets/svg directory and the plugin will use it automatically. If you are using the older FontAwesome option, use icon to add the CSS unicode for the icon.