The plugin Sassy Social Share, which I recommend for share buttons, includes the ability to add a widget with “social links” to the organization’s social media pages. Generally, you also have one or more mailing lists, and might like to provide a “subscribe to newsletter” link right next to these other similar actions, without taking up a lot of screen space.
(You might prefer a field below where people can type their email address for a one-click subscribe, but many sites offer subscription options that make that too many fields for a sidebar widget.)
Sassy has an option in the widget to insert HTML code after the set of icons, so you can use that to add your custom link. In this case, we’ll add a “Newsletter” link.
There’s not much to it: just:
<a href="/subscribe">Newsletter</a>
Change the part inside of quotes to the URL of the page on your site where people can subscribe, and change “Newsletter” to whatever text you want (e.g. “Subscribe”). That gives the link, but the link appears below the buttons:
You might be happy with that. If not, use your theme’s “additional CSS” capability (most themes have this) to add the following:
/* "Follow us icons" alignment and spacing */
.heateor_sss_follow_icons_container {
padding-right: 12px;
display: inline-block;
}
.heateor_sss_follow_icons_container + div
{
display: inline-block;
position: absolute;
bottom: 16px;
right: 16px;
}
.heateor_sss_follow_icons_container + div a {
padding: 6px;
margin-top: 22px;
background-color: lightblue;
text-align: center;
border-radius: 8px; /* corner roundness */
font-weight: bold;
font-size: 16px;
}
There are three rules here (each beginning with “.heateor”)
- for the “div” element containing the social media buttons.
- for the “div” following that, which contains your custom link.
- for the link itself.
You may have to adjust the numbers (those followed by “px”) to get the button the position and size you want, and in the last of the three rules, you might want to change styling for background color, border-radius, and font.
I like to use, instead of a solid background for the link, a background image for the second div. If you like, you may use the image below, which I created.
Upload the image to your media library, and you should find the URL among the fields describing the image. Then you can refer to the image when specifying the background in the second rule by adding these lines:
background-image: url(/wp-content/uploads/2020/07/envelope-icon.png); background-size: contain; background-repeat: no-repeat;
Just add those in before the “}” of the second rule. The exact image URL will be different for your site. You can find out what it is by looking at the image information in your media library after you upload it. You also must add width and height properties in the third rule to make your link big enough to make the background image a good size and aspect ratio.