Come inserire un pulsante per condividere le singole pagine create sui social ? 
Autor: Nicola S.Come inserire un pulsante per condividere le singole pagine create sui social ?
Autore: Nicola S.
Visite 7, Followers 1, Condiviso 0
Parole Chiave: condivisione,pagina,social,website x5 pro 2025.2
Buongiorno, desidero potere pubblicare sui social le pagine del sito che ho creato, tramite un pulsante condividi, ho chiesto a chatgpt è mi ha dato questo codice:
<!DOCTYPE html>
<html lang="it">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="Condividi il nostro contenuto del blog su ClickSicilia con i tuoi amici e famigliari! Leggi articoli interessanti, news e aggiornamenti sulla nostra piattaforma.">
<!-- Open Graph Meta Tags per una migliore condivisione su social -->
<meta property="og:title" content="Pulsanti di Condivisione - Blog ClickSicilia">
<meta property="og:description" content="Condividi il nostro contenuto del blog su ClickSicilia con i tuoi amici e famigliari! Leggi articoli interessanti, news e aggiornamenti sulla nostra piattaforma.">
<meta property="og:image" content="https://www.clicksicilia.com/logo.png"> <!-- Assicurati che questa immagine esista e sia pubblicamente accessibile -->
<meta property="og:url" content="https://www.clicksicilia.com/blogclicksicilia/blog/index.php">
<meta property="og:type" content="website">
<!-- Twitter Card Meta Tags -->
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:title" content="Pulsanti di Condivisione - Blog ClickSicilia">
<meta name="twitter:description" content="Condividi il nostro contenuto del blog su ClickSicilia con i tuoi amici e famigliari! Leggi articoli interessanti, news e aggiornamenti sulla nostra piattaforma.">
<meta name="twitter:image" content="https://www.clicksicilia.com/logo.png"> <!-- Assicurati che questa immagine esista e sia visibile -->
<meta name="twitter:creator" content="@clicksicilia">
<title>Pulsanti di Condivisione - Blog ClickSicilia</title>
<!-- Font Awesome per le icone social -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css">
<style>
/* Stile base per i pulsanti */
a {
text-decoration: none;
padding: 12px 24px;
margin: 8px;
border-radius: 5px;
color: white;
display: inline-flex;
align-items: center;
font-size: 16px;
transition: background-color 0.3s ease, transform 0.2s ease;
box-sizing: border-box;
}
/* Colori specifici per ogni social */
.facebook {
background-color: #3b5998;
}
.twitter {
background-color: #1DA1F2;
}
.linkedin {
background-color: #0077b5;
}
.pinterest {
background-color: #e60023;
}
.tumblr {
background-color: #35465c;
}
.telegram {
background-color: #0088cc;
}
/* Hover Effect */
a:hover {
opacity: 0.8;
transform: scale(1.05); /* Effetto ingrandimento */
}
/* Icone prima del testo */
i {
margin-right: 10px;
font-size: 20px;
}
/* Responsività per schermi più piccoli */
@media (max-width: 600px) {
a {
font-size: 14px;
padding: 10px 20px;
}
i {
font-size: 18px;
}
}
</style>
</head>
<body>
<h2>Condividi questa pagina del blog su:</h2>
<!-- Pulsante Facebook -->
<a href="https://www.facebook.com/sharer/sharer.php?u=https://www.clicksicilia.com/blogclicksicilia/blog/index.php" target="_blank" class="facebook" aria-label="Condividi su Facebook">
<i class="fab fa-facebook"></i> Condividi su Facebook
</a>
<br>
<!-- Pulsante Twitter -->
<a href="https://twitter.com/intent/tweet?url=https://www.clicksicilia.com/blogclicksicilia/blog/index.php&text=Leggi questo interessante articolo su ClickSicilia!" target="_blank" class="twitter" aria-label="Condividi su Twitter">
<i class="fab fa-twitter"></i> Condividi su Twitter
</a>
<br>
<!-- Pulsante LinkedIn -->
<a href="https://www.linkedin.com/sharing/share-offsite/?url=https://www.clicksicilia.com/blogclicksicilia/blog/index.php" target="_blank" class="linkedin" aria-label="Condividi su LinkedIn">
<i class="fab fa-linkedin"></i> Condividi su LinkedIn
</a>
<br>
<!-- Pulsante Pinterest -->
<a href="https://www.pinterest.com/pin/create/button/?url=https://www.clicksicilia.com/blogclicksicilia/blog/index.php&media=https://www.clicksicilia.com/logo.png&description=Leggi questo interessante articolo su ClickSicilia!" target="_blank" class="pinterest" aria-label="Condividi su Pinterest">
<i class="fab fa-pinterest"></i> Condividi su Pinterest
</a>
<br>
<!-- Pulsante Tumblr -->
<a href="https://www.tumblr.com/widgets/share/tool?posttype=link&title=Pulsanti di Condivisione - Blog ClickSicilia&caption=Leggi questo interessante articolo su ClickSicilia!&content=https://www.clicksicilia.com/blogclicksicilia/blog/index.php" target="_blank" class="tumblr" aria-label="Condividi su Tumblr">
<i class="fab fa-tumblr"></i> Condividi su Tumblr
</a>
<br>
<!-- Pulsante Telegram -->
<a href="https://t.me/share/url?url=https://www.clicksicilia.com/blogclicksicilia/blog/index.php&text=Leggi questo interessante articolo su ClickSicilia!" target="_blank" class="telegram" aria-label="Condividi su Telegram">
<i class="fab fa-telegram-plane"></i> Condividi su Telegram
</a>
</body>
</html>
il problema è che riduce le icone dell'Header e del Footer
a titolo d'esempio vi inserisco una pagina : https://www.clicksicilia.com/blogclicksicilia/index.html
grazie rimango come al solito in attesa
... non devi usare i tag di pagina, che devono essere univoci e solo quelli generati dal programma, cioè questi con le relativa chiusure:
<html> <head> <body>
.
ciao
.
.. questo è il tuo stesso codice ripulito pronto per un copia/incolla in Oggetto Codice HTML:
<style> /* Stile base per i pulsanti */
a { text-decoration: none; padding: 12px 24px; margin: 8px; border-radius: 5px; color: white; display: inline-flex; align-items: center; font-size: 16px; transition: background-color 0.3s ease, transform 0.2s ease; box-sizing: border-box; } /* Colori specifici per ogni social */ .facebook { background-color: #3b5998; } .twitter { background-color: #1DA1F2; } .linkedin { background-color: #0077b5; } .pinterest { background-color: #e60023; } .tumblr { background-color: #35465c; } .telegram { background-color: #0088cc; } /* Hover Effect */ a:hover { opacity: 0.8; transform: scale(1.05); /* Effetto ingrandimento */ } /* Icone prima del testo */ i { margin-right: 10px; font-size: 20px; } /* Responsività per schermi più piccoli */ @media (max-width: 600px) { a { font-size: 14px; padding: 10px 20px; } i { font-size: 18px; } } </style>
<!-- Pulsante Facebook -->
<a href="https://www.facebook.com/sharer/sharer.php?u=https://www.clicksicilia.com/blogclicksicilia/blog/index.php" target="_blank" class="facebook" aria-label="Condividi su Facebook"> <i class="fab fa-facebook"></i> Condividi su Facebook </a> <br>
<!-- Pulsante Twitter -->
<a href="https://twitter.com/intent/tweet?url=https://www.clicksicilia.com/blogclicksicilia/blog/index.php&text=Leggi questo interessante articolo su ClickSicilia!" target="_blank" class="twitter" aria-label="Condividi su Twitter"> <i class="fab fa-twitter"></i> Condividi su Twitter </a> <br>
<!-- Pulsante LinkedIn -->
<a href="https://www.linkedin.com/sharing/share-offsite/?url=https://www.clicksicilia.com/blogclicksicilia/blog/index.php" target="_blank" class="linkedin" aria-label="Condividi su LinkedIn"> <i class="fab fa-linkedin"></i> Condividi su LinkedIn </a> <br>
<!-- Pulsante Pinterest -->
<a href="https://www.pinterest.com/pin/create/button/?url=https://www.clicksicilia.com/blogclicksicilia/blog/index.php&media=https://www.clicksicilia.com/logo.png&description=Leggi questo interessante articolo su ClickSicilia!" target="_blank" class="pinterest" aria-label="Condividi su Pinterest"> <i class="fab fa-pinterest"></i> Condividi su Pinterest </a> <br>
<!-- Pulsante Tumblr -->
<a href="https://www.tumblr.com/widgets/share/tool?posttype=link&title=Pulsanti di Condivisione - Blog ClickSicilia&caption=Leggi questo interessante articolo su ClickSicilia!&content=https://www.clicksicilia.com/blogclicksicilia/blog/index.php" target="_blank" class="tumblr" aria-label="Condividi su Tumblr"> <i class="fab fa-tumblr"></i> Condividi su Tumblr </a> <br>
<!-- Pulsante Telegram -->
<a href="https://t.me/share/url?url=https://www.clicksicilia.com/blogclicksicilia/blog/index.php&text=Leggi questo interessante articolo su ClickSicilia!" target="_blank" class="telegram" aria-label="Condividi su Telegram"> <i class="fab fa-telegram-plane"></i> Condividi su Telegram </a>
<!-- Font Awesome per le icone social -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css">
.
... ma non serve IA(!) ...
... fai prima e meglio, e più sotto controllo con le opzioni di collegamento del programma e senza possibilità di interferire con altri oggetti della pagina che possano usare ID e classi simili...
.
ciao
.
Autor
intanto, grazie, soprattutto per la velocità nella risposta adesso provo.
quali sarebbero le opzioni del programma ?
Alternativa gratuita che utilizzo anch'io sul mio sito, condividere pagine del tuo sito con i social
https://sharethis.com/
oppure barra fluttuante per i link ai tuoi social
https://giancawordpress.altervista.org/barra-laterale-social.html
ciao.
... puoi usare qualsiasi oggetto che preferisci, testo, immagine, livelli del MENU, oggetti del > Marketplace, pulsanti/button, ecc....
... devi semplicemente selezionare nelle opzioni di collegamento l'opzione File o URL | File su Internet e incollare nell'apposita casella di input il relativo URL...
... per esempio, per collegare l'indirizzo del tuo FaceBook che è indicato nel tuo codice dal commento segnaposto <!-- Pulsante Facebook --> ...devi semplicemente incollare solo questa stringa, con opzione di apertura nella stessa finestra oppure in seconda finestra:
https://www.facebook.com/sharer/sharer.php?u=https://www.clicksicilia.com/blogclicksicilia/blog/index.php
... se vuoi puoi provare subito...
... se ti servissero chiarimenti fatti sentire...
.
ciao
.
Metti tutto in oggetto HTML. Provalo. Hai parecchie scelte sulla pagina di questo Forum.
<!-- Carica Font Awesome (deve essere inserito tramite opzione esterna se non funziona direttamente) -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css">
<style>
a {
text-decoration: none;
padding: 12px 24px;
margin: 8px;
border-radius: 5px;
color: white;
display: inline-flex;
align-items: center;
font-size: 16px;
transition: background-color 0.3s ease, transform 0.2s ease;
box-sizing: border-box;
}
.facebook { background-color: #3b5998; }
.twitter { background-color: #1DA1F2; }
.linkedin { background-color: #0077b5; }
.pinterest { background-color: #e60023; }
.tumblr { background-color: #35465c; }
.telegram { background-color: #0088cc; }
a:hover {
opacity: 0.8;
transform: scale(1.05);
}
i {
margin-right: 10px;
font-size: 20px;
}
@media (max-width: 600px) {
a {
font-size: 14px;
padding: 10px 20px;
}
i {
font-size: 18px;
}
}
</style>
<h2>Condividi questa pagina del blog su:</h2>
<a href="https://www.facebook.com/sharer/sharer.php?u=https://www.clicksicilia.com/blogclicksicilia/blog/index.php" target="_blank" class="facebook">
<i class="fab fa-facebook"></i> Facebook
</a>
<br>
<a href="https://twitter.com/intent/tweet?url=https://www.clicksicilia.com/blogclicksicilia/blog/index.php&text=Leggi questo interessante articolo su ClickSicilia!" target="_blank" class="twitter">
<i class="fab fa-twitter"></i> Twitter
</a>
<br>
<a href="https://www.linkedin.com/sharing/share-offsite/?url=https://www.clicksicilia.com/blogclicksicilia/blog/index.php" target="_blank" class="linkedin">
<i class="fab fa-linkedin"></i> LinkedIn
</a>
<br>
<a href="https://www.pinterest.com/pin/create/button/?url=https://www.clicksicilia.com/blogclicksicilia/blog/index.php&media=https://www.clicksicilia.com/logo.png&description=Leggi questo interessante articolo su ClickSicilia!" target="_blank" class="pinterest">
<i class="fab fa-pinterest"></i> Pinterest
</a>
<br>
<a href="https://www.tumblr.com/widgets/share/tool?posttype=link&title=Pulsanti di Condivisione - Blog ClickSicilia&caption=Leggi questo interessante articolo su ClickSicilia!&content=https://www.clicksicilia.com/blogclicksicilia/blog/index.php" target="_blank" class="tumblr">
<i class="fab fa-tumblr"></i> Tumblr
</a>
<br>
<a href="https://t.me/share/url?url=https://www.clicksicilia.com/blogclicksicilia/blog/index.php&text=Leggi questo interessante articolo su ClickSicilia!" target="_blank" class="telegram">
<i class="fab fa-telegram-plane"></i> Telegram
</a>
Autor
Beh che dire, grazie a tutti, adesso provo e spero di fare la dcelta giusta, grazie, Nicola Sorge