This plugin adds social share buttons to posts and/or pages, for:
Twitter, Facebook, Google+, LinkedIn, Mastodon, Bluesky social networks, mail and if possible with browser's sharing menu.
.share {
font-size: 0.875em;
margin-top: 1.5em;
margin-bottom: 1.5em;
padding: 0.5em 0;
clear: both;
}
.share ul,
.share li {
margin: 0;
padding: 0;
}
.share ul {
display: flex;
flex-wrap: wrap;
justify-content: flex-end;
gap: 0.25em;
}
.share ul li {
list-style: none;
}
.share a {
padding: 0.25em 0.5em 0.25em 2em;
background-position: 0.25em center;
background-repeat: no-repeat;
background-size: 1.5em auto;
text-decoration: none;
border-bottom: none;
}
.share a:hover {
color: #fff;
}
.share .share-twitter:hover {
background-color: #78cbef;
}
.share .share-fb:hover {
background-color: #547bbc;
}
.share .share-in:hover {
background-color: #1686b0;
}
.share .share-mastodon:hover {
background-color: #3088d4;
}
.share .share-bluesky:hover {
background-color: #1185fe;
}
.share .share-mail:hover {
background-color: #99c122;
}
.share .share-menu:hover {
background-color: #666666;
}
.share .share-twitter {
background-image: url('index.php?pf=socialShare/img/icon-twitter.svg');
}
.share .share-fb {
background-image: url('index.php?pf=socialShare/img/icon-facebook.svg');
}
.share .share-in {
background-image: url('index.php?pf=socialShare/img/icon-linkedin.svg');
}
.share .share-mastodon {
background-image: url('index.php?pf=socialShare/img/icon-mastodon.svg');
}
.share .share-bluesky {
background-image: url('index.php?pf=socialShare/img/icon-bluesky.svg');
}
.share .share-mail {
background-image: url('index.php?pf=socialShare/img/icon-email.svg');
}
.share .share-menu {
background-image: url('index.php?pf=socialShare/img/icon-menu.svg');
}