Compartir temas por medio de redes sociales

angeluz 20 Dec, 2020, 7:41 pm

Hola a todos!

En esta ocasión les enseñaré como agregar los enlaces para compartir sus temas en redes sociales o mediante link Big Grin

Paso 1:
Ir a la plantilla -Showthread- y agregar esto antes de cerrar la etiqueta </head>

Código:
<script>

jQuery(document) .ready(function() {    

$('#openshare').on('click', function(){

        $('#sharemenu').fadeIn('100');

        return false;

    });

    $('body').on('click',function(){

        $('#sharemenu').fadeOut('100');

    });

    $("#sharemenu").click(function(e){

        e.stopPropagation();

    });

});

</script>

<script type="text/javascript">

function copiarAlPortapapeles(id_elemento) {

  var aux = document.createElement("input");

  aux.setAttribute("value", document.getElementById(id_elemento).value);

  document.body.appendChild(aux);

  aux.select();

  document.execCommand("copy");

  document.body.removeChild(aux);

  $('#copyurl').on('click', function() {

        $(".sharalert").fadeIn(1500);  

    setTimeout(function() {

      $(".sharalert").fadeOut(1500);

return false;  },3000);

  });}

</script>

Paso 2:
En la misma plantilla buscar {$ratethread} y antes colocar:

Código:
<a href="#" id="openshare"><i style="padding-top: 2px;"class="fas fa-share-alt"></i></a>

Paso 3:

Código:
<div id="sharemenu">

 <div class="sharalert">El enlace ha sido copiado correctamente</div>

<div class="shareform">

<div><span class="smalltext">Compartir esta publicación:</span></div>

<input type="text" id="urlshare" value="{$mybb->settings['bburl']}/showthread.php?tid={$thread['tid']}" readonly="readonly" />

<button id="copyurl" onclick="copiarAlPortapapeles('urlshare')">Copiar enlace</button>

</div>

<div>

<ul>

<li><a class="fbshare" target="_blank" href="http://www.facebook.com/share.php?u={$mybb->settings['bburl']}/showthread.php?tid={$thread['tid']}" title="Compartir en Facebook"><i class="fab fa-facebook-square"></i></a></li>

<li><a  class="washare" target="_blank"  href="https://api.whatsapp.com/send?text={$thread['subject']} - {$mybb->settings['bburl']}/showthread.php?tid={$thread['tid']}" title="Compartir por Whatsapp"><i class="fab fa-whatsapp-square"></i></i></a></li>

<li><a  class="twshare" target="_blank"  href="http://twitter.com/home?status={$thread['subject']} - {$mybb->settings['bburl']}/showthread.php?tid={$thread['tid']}" title="Compartir en Twitter"><i class="fab fa-twitter-square"></i></a></li>

<li><a  class="lkshare" target="_blank"  href="http://www.linkedin.com/shareArticle?url={$mybb->settings['bburl']}/showthread.php?tid={$thread['tid']}" title="Compartir en Linkedin"><i class="fab fa-linkedin-square"></i></a></li>

<li><a  class="emshare" target="_blank"  href="sendthread.php?tid={$tid}" title="Compartir por correo"><i class="fas fa-envelope-square"></i></a></li>

</ul>

</div>

</div>

Paso 4:
Agregar en la la hoja de estilo showthread.css lo siguiente:

Código:
#sharemenu{

position: fixed;

    display: none;

    right: 35%;

    top: 35%;

    background: #fff;

    padding: 10px;

    box-shadow: 0 0 3px ccc;

    color: 333;

}

.sharalert{

 color:#fff;

position: fixed;

bottom: 15px;

right: 15px;

padding: 10px;

border-radius: 3px;

display: none;

background: 333;

z-index: 999;

}

#sharemenu ul {

 list-style: none;

}

#sharemenu li{

display: inline-block;

}

#sharemenu li a{

color: 333;

padding: 5px;

font-size: 30px;

}

#sharemenu li a.emshare:hover{

color: c1ab3d;

}

#sharemenu li a.washare:hover{

color: 25D366;

}

#sharemenu li a.fbshare:hover{

color: 3b5998;

}

#sharemenu li a.twshare:hover{

color: 00ACEE;

}

#sharemenu li a.lkshare:hover{

color:  0E76A8;

}

#urlshare{

background: #ffffff;

    color: #a7a7a7;

    border: 1px solid f2f3f4;

    padding: 5px;

    outline: 0;

    font-size: 13px;

}

Con eso podrán enviar sus temas a través de redes sociales, espero les sirva Big Grin

Última modificación: 9 Jan, 2021, 7:56 pm por angeluz.

Omar G. 21 Dec, 2020, 3:13 pm

¡Gracias por tu aporte!

Seria perfecto que colocaras un captura para ver como queda, especialmente si es en el estilo por defecto.

{SIGNATURE_IMAGE}

angeluz 21 Dec, 2020, 7:48 pm

Todo el css fue cambiado al momento de enviar el tema, por lo que el tutorial resulta inútil.

En cuanto a la imagen, pasa que mi foro de pruebas está caído desde ayer ajajaja

En mi foro se ve así:

Corregiré el tutorial tan pronto me sea posible :c

Omar G. 21 Dec, 2020, 11:24 pm

Si, se ven algunos errores en tu código CSS.

Si tu código para el copiado al porta papeles funciona quizás lo robe en algún momento, yo nunca he logrado hacer que funcione mi código para copiar al porta papeles.

También, si quieres un código para abrir una ventanilla estilo PopUp puedes revisar el código de este foro para abrir ventanillas para Facebook o Twitter, ya que viendo el código me parece que tu tutorial abre una nueva pestaña.

{SIGNATURE_IMAGE}

angeluz 9 Jan, 2021, 7:51 pm

(21 Dec, 2020, 11:24 pm)Omar G. escribió: Si, se ven algunos errores en tu código CSS.

Si tu código para el copiado al porta papeles funciona quizás lo robe en algún momento, yo nunca he logrado hacer que funcione mi código para copiar al porta papeles.

También, si quieres un código para abrir una ventanilla estilo PopUp puedes revisar el código de este foro para abrir ventanillas para Facebook o Twitter, ya que viendo el código me parece que tu tutorial abre una nueva pestaña.

El error en el CSS pasa que si pones algún color #cuatrocuatrocuatro; te pone el link de un tema, deberías darle una revisada a ese tema.

Lo del código funciona, lo que he notado es que la primera vez que le das clic no te manda la alerta hasta a partir del segundo clic, a ver si puedes resolverlo, porque sí fue un lío hacer que el código de copiado funcione, me pase todo un día con esa cosa

Lo del popup no lo vi necesario por que igual fb y twitter te cierran la pestaña al enviar el tema, lo mismo con whatsapp que te abre directo a la app ya sea movil o de escritorio. No podría usar el popUp de aquí ya que usan la librería de semantic UI para que funcione y yo no utilizo eso.

El tutorial es totalmente funcional, solo deberá agregar el # cada color en hexadecimal, los tuve que retirar para que no diera el error que mencioné anteriormente.

Última modificación: 9 Jan, 2021, 7:52 pm por angeluz.

Omar G. 11 Jan, 2021, 12:49 am

Ya solucione el problema con el carácter `#`.

Cita:Lo del código funciona, lo que he notado es que la primera vez que le das clic no te manda la alerta hasta a partir del segundo clic, a ver si puedes resolverlo, porque sí fue un lío hacer que el código de copiado funcione, me pase todo un día con esa cosa

¿Te refieres a las alertas en este foro?

{SIGNATURE_IMAGE}

angeluz 11 Jan, 2021, 1:48 pm

No, me refiero a lo de la alerta del tutorial, cuando das clic en copiar enlace te aparece el mensaje de "enlace copiado correctamente" pero solo a partir del segundo clic, no aparece a la primera, aunque sí se copia con un solo clic

Omar G. 11 Jan, 2021, 2:20 pm

Bueno, pienso que el tener `$('#copyurl').on(...);` dentro de la funcion es problematico, por que significa que esa parte del codigo se considera solo hasta que la funcion se ejecuta (es decir, al segundo click).

Si no es eso, entonces intenta repetir la funcion dentro de si misma, algo asi:

Código:
function copiarAlPortapapeles(id_elemento, repetido) {

    if(repetido === true)

    {

        return;

    }

    /*...codigo...*/

    copiarAlPortapapeles(id_elemento, true);

}

Saludos.

{SIGNATURE_IMAGE}