Overview
We’ve made it super simple for developers and non-developers to add Social Warfare sharing buttons anywhere in your posts, pages and WordPress themes. There are two ways you can 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 you need. Click here to check it out.
This article will walk through each use case so you can take full advantage to Social Warfare’s placement versatility.
Using the Shortcode
You can add the 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
But what if you wanted to add share buttons to a page that actually share out another page? For example, what if you wanted to place share buttons on a “Thank you” page after someone signs up for your email list and you want them to share your sign-up page?
We’ve built this ability in as well! All you’ll need is the post ID for the page you want to share. You can find this by going to you Posts/Pages list and hovering your mouse over 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 into 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 buttons 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 |
