Overview
It’s super simple for developers and non-developers to add Social Warfare sharing buttons anywhere in their posts, pages, and WordPress themes. There are two ways to do this:
- Shortcode – for use in pages and posts. We’ll cover the shortcode in detail right here in this article.
- PHP function – for use in theme files. We’ve got another in-depth article that gives you all the details. Click here to check it out.
This article will walk through each use case so you can take full advantage of Social Warfare’s placement versatility.
Using the Shortcode
You can add share buttons inside of a post or page by using the [social_warfare] shortcode. Wherever you place it, the buttons panel will be generated on that page. It’s that easy.
Control Which Page is Shared
With Social Warfare, you can add share buttons to one page that actually share a different page. For example, you can place share buttons on a “Thank you” page that appears after a subscriber signs up for your email list, then set those buttons to share your sign-up page (because sharing a “Thank you for subscribing” page with nonsubscribers is a bit aimless.)
It’s easy! All you need is the post ID for the page you want to share. You can find this by going to your Posts/Pages list and hovering your mouse over the top of the titles. When you do this, a URL will appear in the bottom-left corner of your browser. Inside that URL will be a string that looks like this: ...post=XXXX&action=...
The number that immediately follows the post= is your post ID. Once you have the ID of the post/page you want people to share, simply add it to the shortcode on the “Thank you” page like this:
[social_warfare id="X"]
Just replace X with the post ID, and you’re all set!
Control Which Buttons Show
With version 2.0, we’ve also added the ability to control which buttons are populated by the shortcode if you want them to be different than the site-wide settings. You can simply add the buttons="x" parameter and insert any of the following button labels:
twitterlinkedingoogle_plusfacebookemailpinterestwhatsappbuffermixflipboardhacker_newspocketreddittumblryummlytotaltotals
Note: If you use the “buttons” attribute, the total share counts will not display unless you include the “totals” in the list of buttons.
So if you wanted to show the Facebook, Twitter, and Pinterest buttons plus the total share count, your shortcode would look like this:
[social_warfare buttons="facebook,twitter,pinterest,totals"]
All Custom Arguments
In addition to the ID and being able to specify which buttons appear, there are a plethora of other attributes that can be used to customize a button panel. Here’s a list of them all:
| Argument | Description | Accepted Values |
| id | (integer) The ID of the post, page, or custom post type that this set of buttons should reflect. | Any valid post ID. Example: 247 |
| buttons | (string) A comma-separated list of snake_cased social network names. Total Shares: If you pass in the ‘buttons’ argument, the total share counts will not be displayed unless you include the ‘totals’ in the argument. | Core: google_plus, twitter, facebook, pinterest, linkedin, totals Pro: reddit, yummly, hacker_news, flipboard, whatsapp, pocket, tumblr, buffer, email |
| network_shares | (bool) Controls whether or not share counts are shown on individual buttons. | true/false |
| button_size | (decimal) This determines the size of the buttons. It accepts a number with 1 decimal place between 0.7 and 1.4. This will override the global setting found on the options page at Styles -> Visual Options -> Button Size | 0.7, 0.8, 0.9, 1, 1.1, 1.2, 1.3, 1.4 |
| button_shape | (string) This determines the shape of the buttons. This will override the global setting found on the options page at Styles -> Visual Options -> Button Shape | flat_fresh, leaf, shift, pill, three_dee, connected |
| default_colors | (string) This is the color set to use on the buttons when they are not being interacted with. This will override the global setting found on the options page at Styles -> Visual Options -> Default Color Set | full_color, light_gray, medium_gray, dark_gray, light_gray_outlines, medium_gray_outlines, dark_gray_outlines, color_outlines |
| hover_colors | (string) This is the color set to use for all of the buttons in the panel when the panel is being hovered. This will override the global setting found on the options page at Styles -> Visual Options -> Hover Color Set | full_color, light_gray, medium_gray, dark_gray, light_gray_outlines, medium_gray_outlines, dark_gray_outlines, color_outlines |
| single_colors | (string) This is the color set to use for the specific button being hovered in the panel. This will override the global setting found on the options page at Styles -> Visual Options -> Single Button Hover | full_color, light_gray, medium_gray, dark_gray, light_gray_outlines, medium_gray_outlines, dark_gray_outlines, color_outlines |
