Technical Help

TechNote: How to Post a Badge on WordPress

Are you trying to add a badge that I am hosting to your blog? Having trouble? Then this post is for you. I’ll show examples on how to post a badge.

Concrete Example

Let’s take the 2013 Thanksgiving Day Blog Hop I’m hosting.  The code is

<iframe src="http://www.gkarlkumfert.com/wp-content/uploads/2013/11/BlogHopThanksgiving2013.html" height="200" width="200"></iframe>

and the goal is to put it into your site so it looks like this:

The first thing to do is some planning. Do you want the badge to appear in the post or the sidebar? Do you have a self-hosted site, or is it hosted by WordPress.com?

Self-Hosted WordPress with Badge in Sidebar

Example_iframe_in_text_widget This is pretty straightforward. Just go to “widgets”, pick a sidebar, drop a text widget in there, and add the text.  In this screenshot, I wrapped it in <center>…</center> tags to make it horizontally center in the available space.

Unfortunately, this only works with self-hosted blogs. If your blog is hosted by wordpress.com, then the text widget will not allow this code to save.

Self-Hosted WordPress With Badge in Body of Post

The whole trick here is to add the code while the WordPress Editor in “Text” mode instead of visual mode. Look at the screenshot below, in particular the tab that I highlighted in a red circle.

Example_iframe_in_text_mode

Writers are much more accustomed to editing in “Visual” mode.  If you dropped the code in correctly in text mode, the badge will appear as a boring yellow box in visual mode, that’s just fine.  See the screenshot below.  If you are in visual mode and try to cut-and-paste the HTML code above, the editor will make changes so that the text appears on the page instead of being processed by the browser.

Example_iframe_in_visual_mode

Hosted WordPress

If your wordpress blog is hosted by wordpress.com, then they won’t let you add the iframe in the text widget or the post editor.  You’ll have to go one step lower and put the contents of the HTML page referenced in the iframe directly in your text box or post editor.  For the Thanksgiving Blog Hop, the underlying HTML is

<a href="http://www.gkarlkumfert.com/2013/thanksgiving-blog-hop/"
  target="_blank">
<img
  alt="2013 Thanksgiving Blog Hop" width="200" height="200"
  src="http://www.gkarlkumfert.com/wp-content/uploads/2013/11/BlogHopThanksgiving2013.png"
/>
</a>

Hope this helps.  If there are any more questions, let me know in the comments below.

Share Share on FacebookTweet about this on TwitterShare on Google+Share on TumblrShare on StumbleUponShare on LinkedInPin on PinterestDigg thisShare on RedditEmail this to someone