web stats

For Bloggers: How To Make Disclosure Buttons For WordPress

How To

Need a way to do this Blogger? See Christine’s post at 15 Minute Beauty Fanatic!

In looking for ways to keep the FTC happy given their newly stated desire to see disclosures up front, I came across a resource for adding buttons to blog posts. Part One of this post tells you how to make custom buttons and add them to a post. This method requires the installation on one plugin. It not make images that get picked up by social media, but the text of your button will show in your RSS feed and will get picked up Blogluvin. You may or may not desire that.

If you want the button text to show in your feed, stop after Part One. If you want to hide the button text from the feed and from Blogluvin, do Part One, and then go on to Part Two, which requires a couple more plugins.  If you need more information on the FTC’s latest statement on disclosures, see my post on it here.

Here are my new disclosure buttons to put at the top of posts:

[button link=”https://www.beautyandfashiontech.com/about/disclosures-and-content-use” target=”_blank” rel=”nofollow” color=”D”]Press Sample[/button][button link=”https://www.beautyandfashiontech.com/about/disclosures-and-content-use” target=”_blank” rel=”nofollow” color=”D” ]Affiliate Links[/button][button link=”https://www.beautyandfashiontech.com/about/disclosures-and-content-use” target=”_blank” rel=”nofollow” color=”D”]Sponsored[/button][button link=”https://www.beautyandfashiontech.com/about/disclosures-and-content-use” target=”_blank” rel=”nofollow” color=”D” ]I Bought This[/button]

PART ONE: How To Get Your Own Buttons

(1) Get the Easy Short Code Buttons Plugin. You could also use a different shortcodes plugin if you prefer another or if your theme comes with one already. However, the directions here are specific to the Easy Shortcodes option. There might be some variation with other plugins.

(2) Make a custom button using a CSS Button Generator.  My buttons are set very small in the generator, using 0 px vertical, 4 px horizontal and 10p x font.

(3) Paste the code into the custom code box in the plugin settings (it is in the settings section of the dashboard)

4) Change the first .mybutton to .bk-button-wrapper .customName

You can make the custom name whatever you like. Mine is just D so I replaced .mybutton with   .bk-button-wrapper .D

Inserting The Buttons

NOTE: If you plan to do Part Two, you will insert the code given here into an option box instead of your post.  Follow these instructions but add it to the Hidden Thought box as described in Part Two.

To insert the buttons in a post, you will see a new icon for it in your visual editor. It will put a line that looks like this in your post, except that I used parenthesis here in place of brackets so that it would display the text instead of a button when I published the post:

(button link=”#” target=”_blank” color=”default” shape=”rounded” size=”small” align=”left”)Replace This Text(/button)

Change the color to your custom name, insert any link you want where # is (or remove it for no link), add your text, and remove the rest (if you leave the shape and size fields, it tends to overwrite your custom code, so be sure to remove them). I also suggest adding nofollow to the link just to avoid making Google unhappy about seeing it so often.

So, my Press Sample button line now  looks like this:

(button link=”https://www.beautyandfashiontech.com/about/disclosures-and-content-use” target=”_blank” rel=”nofollow” color=”D”)Press Sample(/button)

To add another button, just put it right next to the first. So two look like this:

(button link=”https://www.beautyandfashiontech.com/about/disclosures-and-content-use” target=”_blank” rel=”nofollow” color=”D”)Press Sample(/button)(button link=”https://www.beautyandfashiontech.com/about/disclosures-and-content-use” target=”_blank” rel=”nofollow” color=”D”)]Affiliate Links(/button)

Once you have it set up, you can using a clipping tool, a macro, or simply keep a document with it to copy and paste from so that you don’t have to do the changes from scratch every time.

If anyone has other plugins or tips for doing this, let me know!

PART TWO: How To Keep The Text of Your Buttons Out Of Your Feed And Out Of Blogluvin

The above method of making buttons leaves the text of your buttons in your RSS feed, which will display the text on services such as Blogluvin. If you would like to keep that out of the feed, follow the next steps.

(1) Get the Custom Fields Shortcodes Plugin and activate it. You do not need to do anything else with this plugin to set it up.

(2) Get the Custom Fields Template Plugin.

(3)  To set up this plugin to hide your buttons (or anything else for that matter) from your RSS feed, do the following in the plugin settings (look in the settings portion of your dashboard): Scroll down the settings for the default template to “Template Content.” You will see a bunch of stuff such  as “Plan,”  “Miles Walked” etc.  Delete everything except the following:

[Hidden Thought]
type = textarea
rows = 4
cols = 40
tinyMCE = true
htmlEditor = true
mediaButton = true

B) Save by clicking  “Update Options”

Insert Your Buttons Into Your Post

Go to a post page and you will see the below box in your options under the post area. See how it looks like a mini visual editor? Add your button shortcode there instead of in your post as I directed earlier in Part One. Be sure to hit save. In the image, I already added my shortcode.


Next, in your post visual editor you will see a new button above the visual editor, next to the button for adding images (or in my case next to the Gravity Forms button that is also there).  That is what was added from the Custom Fields Shortcodes Plugin. Click it, select “hidden thought,” and it will pop a shortcode into your post for you as shown below.


C) Complete and save your post as normal.

This process adds your shortcode in a hidden field that is not considered part of the content by the RSS feed. When I tested this, the text from the links was not included in the feed, nor was picked up by Blogluvin.

Advertisements and Sponsors
Shop Our Favorite Stores!