WordPress Sharing

Having nice buttons for sharing your WordPress posts and pages to the social media can be extremely beneficial!
Learn how to achieve great user engagement and drive more traffic including nice social sharing bars to your posts and pages.

Topic Progress:

share buttons addtoany

 

AddToAny Plugin Installation

Now you are ready to install the AddToAny plugin. Open your WP Dashboard and navigate to Plugins -> Add New -> Search for AddToAny. Install and activate the plugin.

AddToAny install

Figure 1. Installing the AddToAny plugin

 

AddToAny Standard Configurations

Now you need to make the preferred configurations for your social sharing buttons by going to your WP Admin -> Settings -> AddToAny.

AddToAny standard configurations

Figure 2. Standard configurations in AddToAny

Start by choosing the icon size. Usually, the Large icons are most suited. Next, there are Standalone buttons. This is how the buttons will look like under your posts. Under some buttons, you will notice a small arrow. By pressing on it, you can choose to show the number of shares if you want. Note that not every button has an option for showing the count of shares (like Twitter).

AddToAny show number sharesl

Figure 3. Show number of shares

You can change the order of the buttons with drag and drop. Now, by pressing on the Add/Remove Services, you can disable a button or add a new one from the hundreds of services. You can add/remove service by selecting/deselecting the chosen service.

AddToAny all services

Figure 4. All sharing services in AddToAny

In the last row, you can notice the buttons for direct liking, tweeting, pinning, Instead of the buttons for classic sharing, you can use those buttons for a different kind of sharing with just one click.

AddToAny 1 click sharing

Figure 5. Buttons for 1-click sharing

If you want, you can use those buttons for a more subtle way of sharing, and here’s how: For example, you can choose the Like, Tweet, and G+1 button, under Icon Size, choose Custom 20px (for perfect alignment of all buttons) and select the Universal Button with Show count selected like on Figure 9. Click on Save Changes at the bottom.

AddToAny 1 click sharing customize

Figure 6. Customize 1-click sharing buttons

Here’s how it would look like on the frontend:

AddToAny 1 click sharing frontend

Figure 7. Buttons for 1-click sharing on the frontend with the universal button clicked

The buttons will appear under your post/page and under the related posts. Now, let’s explain the other features. The Universal Button is for allowing your users to choose additional services for sharing that are not visually present in your listed buttons. So for example, if you choose to include only buttons for Facebook, Twitter and Google Plus, your users can also choose to share your post/page on LinkedIn by finding the LinkedIn service when clicked Universal Button (Figure 10). You can use the standard Universal Button with blue icon (recommended), but you can further customize the button by:

  • Using different image (put your image URL in this format -> https://mysite.com/myimage.jpg)
  • Using only text (without the image)
  • None (not using this button at all)
  • Showing count (showing the number of shares on other social services)

Sharing Header is the text above the buttons. You can get creative here by writing some header like: Spread the love Placement is for positioning your social sharing buttons. The features here are self-explanatory. It’s up to you where you want to place your social sharing buttons (top of the article, the bottom of the article, or both). Also, from here you can choose on kind of what posts or pages you want your buttons to be displayed.

AddToAny universal bitton

Figure 8. Universal Button, header, and placement

Next features are more advanced, and they are good by their defaults, but we will explain them as well. Under Menu Options, you can choose to show the universal button on click (the default is on hover). The other option is to show the title of the page on the universal share menu. By pressing on the Open Menu Styler, you can change the colors of the universal sharing menu. The Styler will generate code that needs to be put in the Additional JavaScript field. Additional CSS field is for putting custom CSS values to the default CSS selectors of the AddToAny sharing buttons. Example:

#a2apage_dropdown{
background-color:#0000ff;
}

Lastly, in Advanced Options, you can use custom images for your sharing buttons, you can set their width and height, you can choose to cache the AddToAny buttons, etc.

AddToAny advanced configuratons

Figure 9. Advanced settings in AddToAny

When you are done configuring the buttons, you need to click on Save Changes.  

AddToAny Floating Configurations

In the Floating tab, you can choose to include floating bar with the sharing buttons on the left or the right of your posts. Here’s how to configure it:

Vertical Floating Bar

From your WP Admin -> Settings -> AddToAny -> Floating tab you can select on which side you want your floating bar to appear. The bar will stay fixed on one position when users scroll down your post or page. Note: The 1-click sharing buttons (Like, Tweet, Pin.) that we’ve configured previously, WON’T work as floating bar! Now, start by choosing the Placement of the vertical buttons (left docked or right docked). For Responsiveness, it’s a good idea the floating bar to only be displayed when the screen is larger than 980px. For smaller screens (tablets and phones we will use horizontal buttons). Experiment with the Position and the Offset of the floating bar (on each theme is different). Put dimensions that look most symmetrical to you.

AddToAny floating vertical buttons

Figure 10. Vertical buttons configuration

And here’s the result on the frontend:

AddToAny floating

Figure 11. AddToAny floating bar – frontend

Now we will configure the Horizontal floating bar.

Horizontal Floating Bar

The whole idea of using the horizontal buttons is for appearing on smaller screens. When someone with phone or tablet visit your post or page, the floating bar can still appear (but horizontally). Now, start by choosing the Placement of the horizontal buttons (left docked or right docked). Check the Responsiveness checkbox and play with the Position and Offset until you place the horizontal bar correctly.

AddToAny horizontal floating bar customization

Figure 12. Customizing the Horizontal Buttons

Now open some post and resize the window of your browser. You will notice how the horizontal bar will appear.

AddToAny horizontal floating bar

Figure 13. Horizontal floating bar frontend – small screen

Congratulations, now you have floating bar on your posts and pages.

Exclude The Sharing Bar From Specific Page/Post

Not every post or page you have will need to include the sharing buttons. For example, the core pages (Contact Us, Privacy Policy, Terms and Conditions) don’t need sharing and here’s how to exclude the sharing bar on particular post or page. Navigate to your WP Admin -> Pages -> All Pages (or Posts -> All Posts). Find the particular post or page from where you want to exclude the sharing buttons and click on Edit.

edit page

Figure 17. Editing the core page

Now scroll below and uncheck the Show sharing buttons.

show sharing buttons

Figure 14. Uncheck the Show sharing buttons

Update your page.

update page

Figure 15. Update your page

Now your page won’t have any sharing buttons.   With that being said, we conclude our lesson for AddToAny sharing buttons. Excellent job!


progress-bar-lead-magnet

You're So Close! Fill Out Your Username And Email For Your Free Guide!

Your Free Guide Is On Its Way...