In today’s connected world you can increase traffic to your website or blog if you add social media share and follow buttons to your pages and posts. There are a number of WordPress themes and plugins that make this easy. While a current theme I’ve used as a base theme on a number of sites (Kadence Ascend) has basic support for social media follow icons and links it didn’t have an easy way to add additional social media accounts beyond the most popular. So today I’ll show you how to add social media share and follow buttons using the AddToAny WordPress plugin which has a large library of social media accounts. It also allows you to easily add additional social media accounts. This is great because we’ve recently started using MeWe which is a social media platform similar to Facebook but without all the ads, privacy issues and increasingly censoring of non-conforming content.
Add Social Media Share and Follow Buttons with WordPress AddToAny Share Buttons Plugin and Widgets
Configure AddToAny Share Buttons Settings
Social Media Share buttons allow your readers to share your content to their social media accounts with a simple button click. You can select which primary social media icons you wish to feature and AddToAny includes a universal menu that readers can use to share to a myriad of additional social media accounts.
Settings -> AddToAny
You can set the desired size and change the colors to match your site if you wish.
Then click on the Add/Remove Services button if you would like to change the account icons being shown. After selecting which social media icons/accounts you would like to include you may then drag the icons to reorder how they will appear.
Customize the AddToAny Share Buttons PopUp Menu
One issue I had with the universal popup menu is the over-saturated blue link color. You can customize the universal popup menu but not through a simple setting. Instead you need to add a little JavaScript code to the Additional JavaScript field right on the plugin settings like this:
var a2a_config = a2a_config || {};
a2a_config.color_bg = "FFFFFF";
a2a_config.color_main = "D7E5ED";
a2a_config.color_border = "AECADB";
a2a_config.color_link_text = "333333";
a2a_config.color_link_text_hover = "333333";
Which customizes the popup menu link colors resulting in this:
Add Social Media Follow Icons / Accounts
In addition to the social media share buttons AddToAny also allows you to add social media follow icon buttons. Follow buttons bring the reader to your social media accounts so that they may follow them.
You can easily add social media follow buttons to any widget area, including sidebars, by going to Appearance -> Widgets and dragging the AddToAny Follow widget to any desired widget area. Then simply enter your social media IDs in the fields of any social media accounts you would like to enable.
The AddToAny Follow widget has a long list of available fields for services but it doesn’t have as many as are available in the AddToAny Share widget. But they have built it with a filter you can use to add additional custom social media services to follow.
Add the following code to your child theme’s functions.php file or use a plugin that enables the addition of custom functions. Edit the code for your own purposes. Note I commented out the size and color from here and instead will adjust those in the CSS for more flexibility without having to change the functions.php any time I want to change the size or color.
// Add MeWe to addToAny Follow widget
function addtoany_add_follow_services( $services ) {
// Add MeWe
$services['mewe'] = array(
'name' => 'MeWe',
'href' => 'https://mewe.com/i/${id}',
'icon' => 'mewe',
//'icon_width' => 32,
//'icon_height' => 32,
//'color' => 'e50e25',
);
return $services;
}
add_filter( 'A2A_FOLLOW_services', 'addtoany_add_follow_services', 10, 1 );
I then added the following in the Additional CSS field on the AddToAny settings to set the color, style, etc.
/* styling the mewe icon added to the AddToAny social media follow widget */
.widget_a2a_follow_widget img {
background-color: #2ca6d6;
width: 28px;
height: 28px;
border-radius: 4px;
}
And here is the final result!
DreamLight Can Design an Award-winning Web Site for You
DreamLight can develop an award-winning WordPress website for you. We can work closely with your marketing team to update your existing Web site that may be outdated or to design a brand new custom WordPress website. In addition to leveraging SEO as discussed above, we design all our custom WordPress websites to be fully responsive. As a result the overall design layout automatically re-flows on-the-fly to take advantage of modern mobile devices. As multimedia experts we can also create a wide range of integrated branded marketing content for your website to help it really stand out, including: 2D/3D digital design, illustration, animation, interactive multimedia or even web application development.
Contact us for more information about designing a custom WordPress website or to explore your specific needs.
Leave a Reply