Actualización de botones para compartir en WhatsApp e Instagram

  • Autor Autor rikrdomat
  • Fecha de inicio Fecha de inicio
R

rikrdomat

Gamma
Verificado por Whatsapp
¡Usuario con pocos negocios! ¡Utiliza siempre saldo de Forobeta!
Hola, tengo una web que tiene botones para compartir, facebook, twitter, pinterest, mail, pero quiero remplazar dos de esos con whatsapp e instagram, por ejemplo quiero que la persona al presionar botón de compartir via whatsapp comparta esa url actual que está viendo en ese momento, aquí dejo el código que viene por defecto, quisiera remplazar pínterest por el de whatsapp:

<div class="rz-modal rz-modal-share" data-id="share">

<a href="#" class="rz-close">
<i class="fas fa-times"></i>
</a>

<div class="rz-modal-heading rz--border">
<h4 class="rz--title"><?php esc_html_e( 'Share', 'routiz' ); ?></h4>
</div>

<div class="rz-modal-content">
<div class="rz-modal-append">
<div class="rz-modal-container rz-scrollbar">

<div class="rz-signin-social rz-mb-1">
<ul>
<li>
<a href="https://www.facebook.com/sharer/sharer.php?u=<?php echo get_permalink(); ?>" class="rz-button rz--gg" target="_blank">
<span class="fab fa-facebook rz-mr-1"></span>
<span><?php esc_html_e( 'Share with Facebook', 'routiz' ); ?></span>
</a>
</li>
<li class="rz-mt-2">
<a href="https://twitter.com/share?url=<?php echo get_permalink(); ?>&text=<?php echo urlencode( esc_html( get_the_title() ) ); ?>" class="rz-button rz--gg">
<span class="fab fa-twitter rz-mr-1"></span>
<span><?php esc_html_e( 'Share with Twitter', 'routiz' ); ?></span>
</a>
</li>
<li class="rz-mt-2">
<a href="https://pinterest.com/pin/create/button/?url=<?php echo get_permalink(); ?>&media=&description=<?php echo urlencode( esc_html( get_the_title() ) ); ?>" class="rz-button rz--gg">
<span class="fab fa-pinterest rz-mr-1"></span>
<span><?php esc_html_e( 'Share with Pinterest', 'routiz' ); ?></span>
</a>
</li>
<li class="rz-mt-2">
<a href="mailto:?&subject=<?php echo esc_html( get_the_title() ); ?>&body=<?php echo get_permalink(); ?>" class="rz-button rz--gg">
<span class="far fa-paper-plane rz-mr-1"></span>
<span><?php esc_html_e( 'Share by email', 'routiz' ); ?></span>
</a>
</li>
</ul>
</div>

</div>
</div>
<?php Rz()->preloader(); ?>
</div>

</div>
 
WhatsApp

<li class="rz-mt-2">
<a href="https://wa.me/?text=<?php echo urlencode( esc_html( get_the_title() ) ); ?>%20<?php echo urlencode(get_permalink()); ?>" class="rz-button rz--gg">
<span class="fab fa-whatsapp rz-mr-1"></span>
<span><?php esc_html_e( 'Share with WhatsApp', 'routiz' ); ?></span>
</a>
</li>

Instagram

<li class="rz-mt-2">
<a href="https://www.instagram.com/?url=<?php echo urlencode(get_permalink()); ?>" class="rz-button rz--gg">
<span class="fab fa-instagram rz-mr-1"></span>
<span><?php esc_html_e( 'Share with Instagram', 'routiz' ); ?></span>
</a>
</li>
 
Hermano GRACIAS, solo dos cositas, la primera es que en WhatsApp me gustaría agregar un mensaje personalizado al link de manera automática, por ejemplo: "Mira lo que encontré aquí, échale uun ojo" y el link..

En instagram no hace nada, solo abre la aplicación, quisiera que al darle clic lleve directamente a enviar un mensaje directo a un contacto, si es que se puede, no estoy seguro. Muchas Gracias!
 
<li class="rz-mt-2">
<a href="https://wa.me/?text=Mira%lo%que%encontre%aqui.%Echale%un%ojo<?php echo urlencode( esc_html( get_the_title() ) ); ?>%20<?php echo urlencode(get_permalink()); ?>" class="rz-button rz--gg">
<span class="fab fa-whatsapp rz-mr-1"></span>
<span><?php esc_html_e( 'Share with WhatsApp', 'routiz' ); ?></span>
</a>
</li>
rikrdomat dijo:
Hermano GRACIAS, solo dos cositas, la primera es que en WhatsApp me gustaría agregar un mensaje personalizado al link de manera automática, por ejemplo: "Mira lo que encontré aquí, échale uun ojo" y el link..

En instagram no hace nada, solo abre la aplicación, quisiera que al darle clic lleve directamente a enviar un mensaje directo a un contacto, si es que se puede, no estoy seguro. Muchas Gracias!
Hacer clic para expandir...
 
En todo caso, si no se puede lo de Instagram del DM, entonces que sea un icono de enlace, que cuando la persona haga clic allí se copie el link, aparezca quizás un mensaje tipo "Copia este link y compártelo en Instagram" con dos botones, cancelar, copiar.

Como en este ejemplo:
www.zapgpt.ai

How to automate the creation of content for social media with ZapGPT

You may have already noticed that the technologies behind ZapGPT are among the most innovative in the world. That is why it is important to know the best way to send messages (which we call 'prompts') to obtain the best possible result. This tip will help optimize your time when you don't know...
www.zapgpt.ai www.zapgpt.ai
 
IchiMaRu dijo:
<li class="rz-mt-2">
<a href="https://wa.me/?text=Mira%lo%que%encontre%aqui.%Echale%un%ojo<?php echo urlencode( esc_html( get_the_title() ) ); ?>%20<?php echo urlencode(get_permalink()); ?>" class="rz-button rz--gg">
<span class="fab fa-whatsapp rz-mr-1"></span>
<span><?php esc_html_e( 'Share with WhatsApp', 'routiz' ); ?></span>
</a>
</li>
Hacer clic para expandir...
Así me sale en este último código que me enviaste, adjunto:
 

Adjuntos

  • 1685289995132.webp
    1685289995132.webp
    174,1 KB · Visitas: 12
Modifícale entonces la estructura bro, es raro porque por navegador los espacios se rellenan con %
rikrdomat dijo:
Así me sale en este último código que me enviaste, adjunto:
Hacer clic para expandir...
 
IchiMaRu dijo:
Modifícale entonces la estructura bro, es raro porque por navegador los espacios se rellenan con %
Hacer clic para expandir...
Le quité los porcentajes y se ve bien pero todavía me faltan algunos detallitos, en la primera imagen como se ve actualmente, en la segunda, como quiero que se vea.
 

Adjuntos

  • 1685290522994.webp
    1685290522994.webp
    173,9 KB · Visitas: 12
  • 1685290545753.webp
    1685290545753.webp
    169,6 KB · Visitas: 15
No entiendo, no veo diferencia, solo que en el de la izquierda está todo pegado, y en el de la derecha todo está separado, y después de Baddy creo que es la palabra que tienes puesta ahí, después de esa palabra viene un espacio no veo nada más , puedes mostrarme exactamente qué es?
 
IchiMaRu dijo:
No entiendo, no veo diferencia, solo que en el de la izquierda está todo pegado, y en el de la derecha todo está separado, y después de Baddy creo que es la palabra que tienes puesta ahí, después de esa palabra viene un espacio no veo nada más , puedes mostrarme exactamente qué es?
Hacer clic para expandir...
Exactamente Bro, después de la palabra Bady viene un espacio, un salto de línea y luego abajo Food House Grill es el nombre de la página o URL. Solamente eso.
 
Si le das espacio no funciona? Envíame el código por el privado para hacértelo como quieres hermano.
 
IchiMaRu dijo:
Si le das espacio no funciona? Envíame el código por el privado para hacértelo como quieres hermano.
Hacer clic para expandir...
No se como enviarte mensaje por privado, el código es este:

<li class="rz-mt-2">
<a href="https://wa.me/?text=Te recomiendo este negocio que encontré en Bady<?php echo urlencode( esc_html( get_the_title() ) ); ?>%20<?php echo urlencode(get_permalink()); ?>" class="rz-button rz--gg">
<span class="fab fa-whatsapp rz-mr-1"></span>
<span><?php esc_html_e( 'Share with WhatsApp', 'routiz' ); ?></span>
</a>
</li>

El Título de la url es Food House Grill, si ves en la imagen aparece pegado del mensaje que quiero colocar que termina en Bady, y quiero que se vea así:

Te recomiendo este negocio que encontré en Bady:

Food House Grill
URL
 
No sería así?

<li class="rz-mt-2">
<a href="https://wa.me/?text=Te recomiendo este negocio que encontré en Bady

<?php echo urlencode( esc_html( get_the_title() ) ); ?>%20
<?php echo urlencode(get_permalink()); ?>" class="rz-button rz--gg">
<span class="fab fa-whatsapp rz-mr-1"></span>
<span><?php esc_html_e( 'Share with WhatsApp', 'routiz' ); ?></span>
</a>
</li>
 
IchiMaRu dijo:
No sería así?

<li class="rz-mt-2">
<a href="https://wa.me/?text=Te recomiendo este negocio que encontré en Bady

<?php echo urlencode( esc_html( get_the_title() ) ); ?>%20
<?php echo urlencode(get_permalink()); ?>" class="rz-button rz--gg">
<span class="fab fa-whatsapp rz-mr-1"></span>
<span><?php esc_html_e( 'Share with WhatsApp', 'routiz' ); ?></span>
</a>
</li>
Hacer clic para expandir...
No bro, sigue sin salir como te muestro en la imagen, y con este código el icono de instagram para compartir se va mas arriba. No se si habrá que usar un "<br>"; o algo así no se..
 
Este código es para wordpress?
rikrdomat dijo:
No bro, sigue sin salir como te muestro en la imagen, y con este código el icono de instagram para compartir se va mas arriba. No se si habrá que usar un "<br>"; o algo así no se..
Hacer clic para expandir...
 
Puko dijo:
Para un "salto de linea" se agrega %0A ...

... este negocio que encontré en Bady%0A<?php ...
Hacer clic para expandir...
Bro puedes colocarme el código? Yo no sé nada de esto, por eso es que tengo la duda. Gracias
 
rikrdomat dijo:
que sea un icono de enlace, que cuando la persona haga clic allí se copie el link, aparezca quizás un mensaje tipo "Copia este link y compártelo en Instagram" con dos botones, cancelar, copiar
Hacer clic para expandir...
<li class="rz-mt-2">

<span class="rz-button rz--gg rz-link-copy">
<span class="fab fa-instagram rz-mr-1"></span>
<span><?php esc_html_e( 'Share with Instagram', 'routiz' ); ?></span>
</span>

<textarea class="rz-link-textarea" style="position:absolute;left:-9999px;" readonly></textarea>

<div class="rz-notification">
<p><?php esc_html_e( 'Copia este link y compártelo en Instagram', 'routiz' ); ?></p>
<div class="rz-buttons">
<span class="rz-button rz--gg rz-copy-btn"><?php esc_html_e( 'Copiar', 'routiz' ); ?></span>
<span class="rz-button rz--gg rz-cancel-btn"><?php esc_html_e( 'Cancelar', 'routiz' ); ?></span>
</div>
</div>

</li>


JavaScript

jQuery(document).ready(function($) {
// Seleccione el botón de copiar y el área de texto que contiene el enlace
var $copyButton = $('.rz-copy-btn');
var $linkTextArea = $('.rz-link-textarea');
// Seleccione el botón de cancelar y la notificación que se muestra cuando se copia el enlace
var $cancelButton = $('.rz-cancel-btn');
var $notification = $('.rz-notification');
// Agregar evento de clic al icono de enlace
$('.rz-link-copy').on('click', function() {
// Obtener el enlace y colocarlo en el área de texto
var link = 'https://www.instagram.com/?url=' + encodeURIComponent('<?php echo get_permalink(); ?>');
$linkTextArea.val(link);
// Mostrar la notificación
$notification.fadeIn(300);
});
// Agregar evento de clic al botón de cancelar y la notificación
$cancelButton.on('click', function() {
$notification.fadeOut(300);
});
// Agregar evento de clic al botón de copiar
$copyButton.on('click', function() {
// Seleccionar y copiar el enlace en el área de texto
$linkTextArea.select();
document.execCommand('copy');
// Ocultar la notificación y reiniciar el contenido del área de texto
$notification.fadeOut(300);
$linkTextArea.val('');
});
});
 
Hay que estar conectado o registrado para responder aquí.

Temas similares

R
Agregar "no follow" a botones de compartir de redes sociales
Respuestas
0
Visitas
346
Riven Captain
R
pulga91
Tutorial: Tutorial de botones de compartir y Sharebar Responsive para Blogger
2
Respuestas
22
Visitas
5K
Squall990
Squall990
S
Tutorial: Incorporar botón de compartir en WhatsApp
2
Respuestas
26
Visitas
3K
SnakeNet
S
M
Tutorial: Cómo agregar botones de compartir en tu blog de forma personalizada
Respuestas
9
Visitas
3K
penwen
penwen
Atrás
Arriba