Requerimientos para crear módulo:
Este tutorial está dirigido a aquellas personas que tienen conocimientos básicos de HTML, CSS, JavaScript, PHP.
Aparte de las tecnologías antes mencionadas, cabe señalar que estamos trabajando en un entorno basado en WordPress, es decir que también es necesario tener conocimientos básicos de este CMS.
Este módulo va a incluir los enlaces para compartir en Facebook Messenger, LinkedIn, Facebook, WhatsApp y e-mail. Voy a ir explicando cada bloque de código, de manera general no voy a profundizar demasiado en cada línea, ya que como dijiste este es un tutorial intermedio.
El siguiente script le permite compartir cualquier enlace/URL en Facebook Messenger desde la página web. Hemos utilizado el SDK de JavaScript de Facebook para lograrlo.
El script abre una nueva ventana en el navegador web de escritorio que le permite compartir cualquier enlace con un amigo suyo específico. Mientras está en el navegador móvil, abre la aplicación Facebook Messenger y el enlace se puede compartir fácilmente con sus amigos.
Estuve basándome en los siguientes recursos para la creación de este módulo.
Recursos:
https://stackoverflow.com/questions/33426752/linkedin-share-post-url
https://github.com/bradvin/social-share-urls
Este es el resultado visual que queremos lograr con el CSS.
<div id="fb-root"></div>
<script async defer crossorigin="anonymous" src="https://connect.facebook.net/en_US/sdk.js#xfbml=1&version=v13.0&appId={YOUR_FACBOOK_APP_ID}&autoLogAppEvents=1" nonce="ywRETNx8"></script>
<style>/* CSS Share Button 1*/
.blog_share_button{z-index:2;width:100%;padding:20px 0;display:inline-block;}
.blog_share_button .share_blog {display:block;}
.blog_share_button .share_blog .wrap1 {display: block;width: 100%;text-align: center;}
.blog_share_button .share_blog ul {margin:0;padding:0;}
.blog_share_button .share_blog ul li{list-style:none;list-style-type:none;padding:0;margin:2px;float:left;width:10%;max-width:100px;display:inline-block;font-size:13px;overflow:hidden;text-align:left;height:32px;line-height:32px;color:#fff;border-radius:3px;transition:all .4s}
.blog_share_button .share_blog ul li a,.blog_share_button .share_blog ul li a:hover{color:#fff;cursor:pointer;line-height:32px;height:100%;display:block;text-decoration:none}
.blog_share_button .share_blog .btn_fb{background:#3a579a}
.blog_share_button .share_blog .btn_fb:hover{background:#314a83}
.blog_share_button .share_blog .btn_insta{background:#DD2A7B}
.blog_share_button .share_blog .btn_insta:hover{background:#8134AF}
.blog_share_button .share_blog .btn_messe{background:#00C6FF}
.blog_share_button .share_blog .btn_messe:hover{background:#0078FF}
.blog_share_button .share_blog .btn_linkdin{background:#2554BF}
.blog_share_button .share_blog .btn_linkdin:hover{background:#224EB4}
.blog_share_button .share_blog .btn_wa{background:#25D366}
.blog_share_button .share_blog .btn_wa:hover{background:#1da851}
.blog_share_button .share_blog .btn_em{background:#6a6a6a}
.blog_share_button .share_blog .btn_em:hover{background:#e7e7e7}
.blog_share_button .share_blog .share.h6{font-size:10px;font-weight:700;text-align:center;color:#999;border-top:1px solid #000ccc;padding:8px 0 0;margin:8px auto 0;line-height:8px;width:42px;letter-spacing:.5px}
.blog_share_button .share_blog .share{margin:5px 5px 0 0;overflow:visible;width:45px}
.blog_share_button .share_blog .share .count.h4{font-size:18px;font-weight:700;text-align:center;color:#ff8349;line-height:16px;margin:-8px 0 0;min-height:15px}
.blog_share_button .share_blog .btn_fb .share-btn,.blog_share_button .share_blog .btn_insta .share-btn,.blog_share_button .share_blog .btn_messe .share-btn,.blog_share_button .share_blog .share-btn,.blog_share_button .share_blog .btn_linkdin .share-btn{position:relative;color:#fff;display:inline-block;text-align:center;font-weight:700;font-size:11px;float:right;min-width:12px;padding:0 8px 0 0}
</style>
<div class="share_blog">
<ul>
<li class="share">
<div class="share-btn button-home" data-service="total">
<div id="counter" class="count h4">Share</div>
<div class="share h6"></div>
</div>
</li>
<li class="btn_messe share-button">
<a href="javascript:;" onclick="messengerShare()" rel="nofollow">
<div class="wrap1">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-messenger" viewBox="0 0 16 16">
<path d="M0 7.76C0 3.301 3.493 0 8 0s8 3.301 8 7.76-3.493 7.76-8 7.76c-.81 0-1.586-.107-2.316-.307a.639.639 0 0 0-.427.03l-1.588.702a.64.64 0 0 1-.898-.566l-.044-1.423a.639.639 0 0 0-.215-.456C.956 12.108 0 10.092 0 7.76zm5.546-1.459-2.35 3.728c-.225.358.214.761.551.506l2.525-1.916a.48.48 0 0 1 .578-.002l1.869 1.402a1.2 1.2 0 0 0 1.735-.32l2.35-3.728c.226-.358-.214-.761-.551-.506L9.728 7.381a.48.48 0 0 1-.578.002L7.281 5.98a1.2 1.2 0 0 0-1.735.32z"/>
</svg>
</div>
<div class="share-btn" data-service="google">
<div class="count"></div>
</a>
</li>
<li class="btn_linkdin share-button">
<a href="https://www.linkedin.com/sharing/share-offsite/?url=<?php echo esc_url( get_permalink() ); ?>" target="_blank" rel="nofollow">
<div class="wrap1">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-linkedin" viewBox="0 0 16 16">
<path d="M0 1.146C0 .513.526 0 1.175 0h13.65C15.474 0 16 .513 16 1.146v13.708c0 .633-.526 1.146-1.175 1.146H1.175C.526 16 0 15.487 0 14.854V1.146zm4.943 12.248V6.169H2.542v7.225h2.401zm-1.2-8.212c.837 0 1.358-.554 1.358-1.248-.015-.709-.52-1.248-1.342-1.248-.822 0-1.359.54-1.359 1.248 0 .694.521 1.248 1.327 1.248h.016zm4.908 8.212V9.359c0-.216.016-.432.08-.586.173-.431.568-.878 1.232-.878.869 0 1.216.662 1.216 1.634v3.865h2.401V9.25c0-2.22-1.184-3.252-2.764-3.252-1.274 0-1.845.7-2.165 1.193v.025h-.016a5.54 5.54 0 0 1 .016-.025V6.169h-2.4c.03.678 0 7.225 0 7.225h2.4z"/>
</svg>
</div>
<div class="share-btn" data-service="linkedin">
<div class="count"></div>
</a>
</li>
<li class="btn_fb share-button">
<a href="https://www.facebook.com/sharer/sharer.php?u=<?php echo esc_url( get_permalink() ); ?>" target="_blank"rel="nofollow">
<div class="wrap1">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-facebook" viewBox="0 0 16 16">
<path d="M16 8.049c0-4.446-3.582-8.05-8-8.05C3.58 0-.002 3.603-.002 8.05c0 4.017 2.926 7.347 6.75 7.951v-5.625h-2.03V8.05H6.75V6.275c0-2.017 1.195-3.131 3.022-3.131.876 0 1.791.157 1.791.157v1.98h-1.009c-.993 0-1.303.621-1.303 1.258v1.51h2.218l-.354 2.326H9.25V16c3.824-.604 6.75-3.934 6.75-7.951z"/>
</svg>
</div>
<div class="share-btn" data-service="facebook">
<div class="count"></div>
</a>
</li>
<li class="btn_wa share-button">
<a href="https://api.whatsapp.com/send?text=%20<?php echo esc_url( get_permalink() ); ?>" target="_blank" rel="nofollow">
<div class="wrap1">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-whatsapp" viewBox="0 0 16 16">
<path d="M13.601 2.326A7.854 7.854 0 0 0 7.994 0C3.627 0 .068 3.558.064 7.926c0 1.399.366 2.76 1.057 3.965L0 16l4.204-1.102a7.933 7.933 0 0 0 3.79.965h.004c4.368 0 7.926-3.558 7.93-7.93A7.898 7.898 0 0 0 13.6 2.326zM7.994 14.521a6.573 6.573 0 0 1-3.356-.92l-.24-.144-2.494.654.666-2.433-.156-.251a6.56 6.56 0 0 1-1.007-3.505c0-3.626 2.957-6.584 6.591-6.584a6.56 6.56 0 0 1 4.66 1.931 6.557 6.557 0 0 1 1.928 4.66c-.004 3.639-2.961 6.592-6.592 6.592zm3.615-4.934c-.197-.099-1.17-.578-1.353-.646-.182-.065-.315-.099-.445.099-.133.197-.513.646-.627.775-.114.133-.232.148-.43.05-.197-.1-.836-.308-1.592-.985-.59-.525-.985-1.175-1.103-1.372-.114-.198-.011-.304.088-.403.087-.088.197-.232.296-.346.1-.114.133-.198.198-.33.065-.134.034-.248-.015-.347-.05-.099-.445-1.076-.612-1.47-.16-.389-.323-.335-.445-.34-.114-.007-.247-.007-.38-.007a.729.729 0 0 0-.529.247c-.182.198-.691.677-.691 1.654 0 .977.71 1.916.81 2.049.098.133 1.394 2.132 3.383 2.992.47.205.84.326 1.129.418.475.152.904.129 1.246.08.38-.058 1.171-.48 1.338-.943.164-.464.164-.86.114-.943-.049-.084-.182-.133-.38-.232z"/>
</svg>
</div>
<div class="share-btn" data-service="facebook">
<div class="count"></div>
</a>
</li>
<li class="btn_em share-button">
<a href="mailto:?subject=<?php echo get_the_title(); ?>&body=Resumen: <?php the_excerpt(); ?> URL: <?php echo esc_url( get_permalink() ); ?>" >
<div class="wrap1">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-envelope" viewBox="0 0 16 16">
<path d="M0 4a2 2 0 0 1 2-2h12a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V4Zm2-1a1 1 0 0 0-1 1v.217l7 4.2 7-4.2V4a1 1 0 0 0-1-1H2Zm13 2.383-4.708 2.825L15 11.105V5.383Zm-.034 6.876-5.64-3.471L8 9.583l-1.326-.795-5.64 3.47A1 1 0 0 0 2 13h12a1 1 0 0 0 .966-.741ZM1 11.105l4.708-2.897L1 5.383v5.722Z"/>
</svg>
</div>
<div class="share-btn" data-service="facebook">
<div class="count"></div>
</a>
</li>
</ul>
</div>
<script>
window.fbAsyncInit = function() {
FB.init({
appId: '{YOUR_FACEBOOK_APP_ID}',
xfbml: true,
version: 'v2.9'
});
FB.AppEvents.logPageView();
};
function isMobile() {
const toMatch = [/Android/i, /webOS/i, /iPhone/i, /iPad/i, /iPod/i, /BlackBerry/i, /Windows Phone/i];
return toMatch.some((toMatchItem) => {
return navigator.userAgent.match(toMatchItem);
});
}
function messengerShare() {
url = 'https://stw.mx/';
if (isMobile()) {
window.location.href = "fb-messenger://share/?link=" + url;
} else {
FB.ui({
method: 'send',
link: url,
redirect_uri: url
});
}
}
</script>