web stats
post

For Bloggers: How To Make Disclosure Buttons For WordPress

Fotolia 37833981 XS thumb For Bloggers: How To Make Disclosure Buttons For Wordpress

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:

Press SampleAffiliate LinksSponsoredI Bought This

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=”http://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=”http://www.beautyandfashiontech.com/about/disclosures-and-content-use” target=”_blank” rel=”nofollow” color=”D”)Press Sample(/button)(button link=”http://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.

image thumb For Bloggers: How To Make Disclosure Buttons For Wordpress

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.

image thumb1 For Bloggers: How To Make Disclosure Buttons For Wordpress

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!
Sephora
ShopBop
Nordstrom
Beauty.com
Amazon.com

pixel For Bloggers: How To Make Disclosure Buttons For Wordpress

Comments

  1. Wow this is really great. I’ll have to search and see if there is something similar for blogger blogs.

  2. Wow, Carleen… You’ve nailed it! This is tasteful, but conspicuous. Thanks for sharing these easy-to-follow instructions!

  3. Thank you for this! I now have it enabled on my site. These new guidelines are an inconvenience but at least the buttons look professional. These new rules frustrate me. I’m an honest blogger!

    Kindness is the best accessory,
    Rebecca

  4. This was SO helpful, thank you so much! & I also appreciated your other post, thank you – I’m also a beauty blogging lawyer, good to know about another :)

  5. Emi, there are a number of Beauty Blogging Lawyers! Good to see another one! :D

  6. Thanks for the thorough review of the whole topic of FTC regs and how to make buttons to be in better compliance! As a relative newb, I appreciate all advice and assistance!

  7. This is a nice and easy way to do things. BUT one of the biggest things that the FTC did was say that ALL the methods you use to showcase your work must have proper disclosures. My thing is – nobody should be hiding anything from text based readers. Otherwise, you’d open yourself up to that liability, right?

  8. Rachel, you make a good point. I definitely would not recommend hiding the buttons from the feed if those are the only disclosure and a full feed is used or if an endorsement appears in the partial feed. In my case, partial feeds are ran with just a headline and a snippet of text. In those cases, if social media and RSS readers pick up the text from the buttons, it can be confusing for the people who see it since it will just be a few grammatically incorrect words before the opening sentence. As long as there are not undisclosed endorsements being picked up, it is fine to hide them. So, if the first sentences that are picked up by the feed do not actually recommend the product, all is fine. But, in the case where an endorsement appears in what is displayed in a partial feed, you are right that it should not be hidden. A good solution is to either avoid endorsing a product in the first few sentences or, if that is done, to add the endorsement into the regular text. For example, I might open with “Company A sent me their new lipstick to review and I really like it.” In that case the disclosure is still there even though the buttons are hidden. Of course, in that case, the buttons are not even needed, but I plan to try do both just to be sure that I am covering all of the bases. Others might wish to not hide the buttons at all in order to assure that the disclosures always show. I think that, if I went that route, I would use static images so that the image would show instead of the text, just to avoid the appearance of weird random words appearing in the feed before the first sentences.

  9. I just want to add to the chorus of thank-yous for this post. I’ve been struggling with how to approach this and this is the perfect solution – tasteful, and well-explained!

  10. Thank you! This is very helpful!

  11. This is awesome! Thank you so much! I love that we can customize them to make them fit with our theme. These new guidelines are scary for some of use new bloggers so we want to make sure we are in full compliance, but having a wordy disclosure at the beginning of each post is so aesthetically displeasing. Thanks again!

  12. I followed your instructions above NOT using the “hidden thought” configuration, and the text of the buttons still is not showing up in my RSS feed or on Bloglovin’. Did I miss a step?

    Thanks for your help!

  13. Allie, did you try testing it with a brand new post that had not yet ever been in the RSS feed after you did it? I ask because it will only show up going forward. If you did, then I am not sure why it is not showing up. It did show up for me and others when we didn’t use the special field. Where in your post are you inserting it?

  14. Carleen, I hadn’t previously tried it that way, but I just tested it and it’s still not working. Must be something to do with my settings maybe? I’m putting it at the top of the post, after the title, but before the post itself.

  15. Carleenp says:

    Interesting. I wonder if something about your theme treats the buttons as being in a hidden field? You might try just making images and inserting them manually. The feed should always pick that up. Of course you can also always disclose simply by stating it in your text too, but the buttons are kind of nice to have.

  16. thanks for this! i implemented them on my site and i am much more comfortable with the buttons notifying readers in a consistent way of the stuff inside the post!

  17. Is there a way to keep the button html out of the meta description you see on google search?

  18. Kia, are you using the hidden thought plugin to keep it out of the feed? That should help. But the best way to assure that it doesn’t show up in the meta description is to use a plugin such as Yoast WordPress SEO that allows you to write a custom meta description. Then Google should pick that custom description up instead of the button text.

Speak Your Mind

*