The result is here:
https://www.warsintheworld.com
You can adapt this code on your theme.
It wiil be necessary copy this code below inside 4 files, and overwrite them on your website with ftp a program like Filezilla..
1) header.tpl (copy this code between <head> and </head>
<!-- ===== FONT AWESOME ===== -->
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/ ... ll.min.css"
crossorigin="anonymous"
/>
<!-- ===== STILE ===== -->
<style>
/* ===== DESKTOP ===== */
.share-desktop {
display: flex;
justify-content: center;
gap: 12px;
padding: 20px 0;
}
.share-desktop .share-button {
background: transparent;
border: none;
font-size: 22px;
cursor: pointer;
transition: transform 0.2s, opacity 0.2s;
opacity: 0.8;
}
.share-desktop .share-button:hover {
transform: scale(1.2);
opacity: 1;
}
/* ===== COLORI ICONe ===== */
.facebook i { color: #1877F2; }
.x i { color: #000; }
.linkedin i { color: #0077B5; }
.whatsapp i { color: #25D366; }
.messenger i { color: #0084FF; }
.telegram i { color: #0088cc; }
.email i { color: #6c757d; }
.print i { color: #17a2b8; }
.copy i { color: #28a745; }
/* ===== MOBILE ===== */
.share-mobile {
display: none;
}
@media (max-width: 768px) {
.share-desktop {
display: none;
}
.share-mobile {
position: fixed;
bottom: 30px;
left: 50%;
transform: translateX(-50%);
background: none; /* barra invisibile */
display: flex;
gap: -4px;
z-index: 9999;
align-items: center;
justify-content: center;
padding: 0;
}
.share-mobile .share-button {
border: none;
background: none;
cursor: pointer;
font-size: 26px;
display: flex;
align-items: center;
justify-content: center;
width: 48px;
height: 48px;
transition: transform 0.2s, opacity 0.2s;
opacity: 0.9;
}
.share-mobile .share-button:hover {
transform: scale(1.2);
opacity: 1;
}
/* Colori icone (colori ufficiali) */
.share-mobile .facebook i { color: #1877F2; }
.share-mobile .x i { color: #000; }
.share-mobile .linkedin i { color: #0077B5; }
.share-mobile .whatsapp i { color: #25D366; }
.share-mobile .messenger i { color: #0084FF; }
.share-mobile .telegram i { color: #0088cc; }
.share-mobile .email i { color: #6c757d; }
.share-mobile .print i { color: #17a2b8; }
.share-mobile .copy i { color: #28a745; }
}
</style>
2) entry-default.tpl insert this code before <ul class="entry-footer">:
<div itemprop="articleBody">
{$content|tag:the_content}
</div>
{if !empty($flatpress.params.entry)}
{literal}
<!-- ===== DESKTOP ===== -->
<div class="share-desktop" aria-label="Condivisione desktop">
<button class="share-button facebook" onclick="share('facebook')" title="Facebook"><i class="fab fa-facebook-f"></i></button>
<button class="share-button x" onclick="share('x')" title="X"><i class="fab fa-x-twitter"></i></button>
<button class="share-button linkedin" onclick="share('linkedin')" title="LinkedIn"><i class="fab fa-linkedin-in"></i></button>
<button class="share-button whatsapp" onclick="share('whatsapp')" title="WhatsApp"><i class="fab fa-whatsapp"></i></button>
<button class="share-button messenger" onclick="share('messenger')" title="Messenger"><i class="fab fa-facebook-messenger"></i></button>
<button class="share-button telegram" onclick="share('telegram')" title="Telegram"><i class="fab fa-telegram"></i></button>
<button class="share-button email" onclick="share('email')" title="Email"><i class="fas fa-envelope"></i></button>
<button class="share-button print" onclick="printPage()" title="Stampa"><i class="fas fa-print"></i></button>
<button class="share-button copy" onclick="copyLink()" title="Copia link"><i class="fas fa-link"></i></button>
</div>
{/literal}
{/if}
<ul class="entry-footer">
3) static.tpl insert this code before {/static_block}:
{literal}
<!-- ===== DESKTOP ===== -->
<div class="share-desktop" aria-label="Condivisione desktop">
<button class="share-button facebook" onclick="share('facebook')" title="Facebook"><i class="fab fa-facebook-f"></i></button>
<button class="share-button x" onclick="share('x')" title="X"><i class="fab fa-x-twitter"></i></button>
<button class="share-button linkedin" onclick="share('linkedin')" title="LinkedIn"><i class="fab fa-linkedin-in"></i></button>
<button class="share-button whatsapp" onclick="share('whatsapp')" title="WhatsApp"><i class="fab fa-whatsapp"></i></button>
<button class="share-button messenger" onclick="share('messenger')" title="Messenger"><i class="fab fa-facebook-messenger"></i></button>
<button class="share-button telegram" onclick="share('telegram')" title="Telegram"><i class="fab fa-telegram"></i></button>
<button class="share-button email" onclick="share('email')" title="Email"><i class="fas fa-envelope"></i></button>
<button class="share-button print" onclick="printPage()" title="Stampa"><i class="fas fa-print"></i></button>
<button class="share-button copy" onclick="copyLink()" title="Copia link"><i class="fas fa-link"></i></button>
</div>
{/literal}
{/static_block}
4) footer.tpl insert this code:
between
<div id="footer">
{action hook=wp_footer}
and
<p>
</div> <!-- end of #footer -->
{literal}
<!-- ===== DESKTOP ===== -->
<div class="share-desktop" aria-label="Condivisione desktop">
<button class="share-button facebook" onclick="share('facebook')" title="Facebook"><i class="fab fa-facebook-f"></i></button>
<button class="share-button x" onclick="share('x')" title="X"><i class="fab fa-x-twitter"></i></button>
<button class="share-button linkedin" onclick="share('linkedin')" title="LinkedIn"><i class="fab fa-linkedin-in"></i></button>
<button class="share-button whatsapp" onclick="share('whatsapp')" title="WhatsApp"><i class="fab fa-whatsapp"></i></button>
<button class="share-button messenger" onclick="share('messenger')" title="Messenger"><i class="fab fa-facebook-messenger"></i></button>
<button class="share-button telegram" onclick="share('telegram')" title="Telegram"><i class="fab fa-telegram"></i></button>
<button class="share-button email" onclick="share('email')" title="Email"><i class="fas fa-envelope"></i></button>
<button class="share-button print" onclick="printPage()" title="Stampa"><i class="fas fa-print"></i></button>
<button class="share-button copy" onclick="copyLink()" title="Copia link"><i class="fas fa-link"></i></button>
</div>
<!-- ===== MOBILE ===== -->
<div class="share-mobile" aria-label="Condivisione mobile">
<button class="share-button facebook" onclick="share('facebook')" title="Facebook"><i class="fab fa-facebook-f"></i></button>
<button class="share-button x" onclick="share('x')" title="X"><i class="fab fa-x-twitter"></i></button>
<button class="share-button linkedin" onclick="share('linkedin')" title="LinkedIn"><i class="fab fa-linkedin-in"></i></button>
<button class="share-button whatsapp" onclick="share('whatsapp')" title="WhatsApp"><i class="fab fa-whatsapp"></i></button>
<button class="share-button messenger" onclick="share('messenger')" title="Messenger"><i class="fab fa-facebook-messenger"></i></button>
<button class="share-button telegram" onclick="share('telegram')" title="Telegram"><i class="fab fa-telegram"></i></button>
<button class="share-button email" onclick="share('email')" title="Email"><i class="fas fa-envelope"></i></button>
<button class="share-button print" onclick="printPage()" title="Stampa"><i class="fas fa-print"></i></button>
<button class="share-button copy" onclick="copyLink()" title="Copia link"><i class="fas fa-link"></i></button>
</div>
<!-- ===== SCRIPT ===== -->
<script>
function share(platform) {
const url = encodeURIComponent(window.location.href);
const text = encodeURIComponent(document.title || "Guarda questo contenuto!");
let shareUrl = "";
switch (platform) {
case "facebook":
shareUrl = `https://www.facebook.com/sharer/sharer.php?u=${url}`;
break;
case "x":
shareUrl = `https://twitter.com/intent/tweet?url=${url}&text=${text}`;
break;
case "linkedin":
shareUrl = `https://www.linkedin.com/shareArticle?m ... &url=${url}`;
break;
case "whatsapp":
shareUrl = `https://wa.me/?text=${text}%20${url}`;
break;
case "messenger":
shareUrl = `fb-messenger://share/?link=${url}`;
break;
case "telegram":
shareUrl = `https://t.me/share/url?url=${url}&text=${text}`;
break;
case "email":
shareUrl = `mailto:?subject=${text}&body=${text}%0A${url}`;
break;
default:
alert("Piattaforma non supportata.");
return;
}
window.open(shareUrl, "_blank");
}
function printPage() {
window.print();
}
function copyLink() {
navigator.clipboard.writeText(window.location.href)
.then(() => alert("Link copiato negli appunti!"))
.catch(() => alert("Errore durante la copia del link."));
}
</script>
{/literal}
Now you can verify here the result https://www.warsintheworld.com
If someone can create a plugin with this code, could be fantastic.