Sharing Badges

Sharing a Badge

Every so often we get a bright idea of a challenge and want others to join in. This may also result in us wanting to share a “badge” so other participants can link back to the originator. There are many other occasions for sharing a bit of code to display some image with a link in either posts or in sidebars.

As simple as HTML code is, it is still quite easy to make an error that goes unnoticed but will cause the “badge” to not work properly. This post shows a couple of approaches that make the chore much easier and success more assured.

Here is a “badge”, the “Monday Window Blogger” badge, that fellow bloggers who hunt down photos of windows and share them every Monday might with to use.

Monday Window Home

And here is the code for sharing this badge:

<a href="http://mondaywindow.wordpress.com"><img class="aligncenter wp-image-106 size-full" src="https://mondaywindow.files.wordpress.com/2016/02/mondaywindow-n-300.jpg" alt="Monday Window Home" width="300" height="60" /></a>

 How to do it

Now let’s look at what it takes to make a badge and how to create the sharable code.

First there needs to be an image. This image has to reside somewhere on the web so it can be found and shown on sites of various bloggers. Making up your image I leave up to you. I usually prepare mine using Paint, the program that comes in all Windows PCs. There are many simple image editors that can be used. I recommend that the final image be the size that it should be shown in. Although scaling of images is quick, it takes a little bit of time. The right size image will load just a tad faster. It also takes up less space in your online image library.

Where to store the image?

There are plenty of photo sharing sites. Think Flickr, Google Photos, Shutterfly, OneDrive, and sites like that. They are great for sharing photos, but cumbersome at best and impossible at worst for “sourcing” images that are to be incorporated in some other site. The easiest place to use is one designed for the specific purpose of embedding images in posts, pages or sidebars. The WordPress Media Library is the easiest to use, so use it.

Upload your badge image to your Media Library.

The procedure

ShareBadge-01Let your WordPress Dashboard Editor prepare the code.

First, use the Add Media button to insert the image into a post.

Either during this procedure or afterwards by editing the image, set the Alignment to Center.  Set the Link To to Custom URL and type in the URL, web address, of web page or post that you want the badge to link to (see red arrow). Set the Size to Full Size. Alright, if you didn’t take my advise and have an oversized image, set the Size to what it should be scaled to.

Now you have the working badge in your own page or post.

Click on Text to see the HTML code of your post.

ShareBadge-06

On a line before the code for the image type the word “code” in square brackets. See the illustration.

On a line after the code type “/code”, again in square brackets. Be sure to include the slash.

Back in Visual you will see it now like this:

ShareBadge-07

In your post the code will be as shown near the top. Readers can copy this code and use it on their own site.

How to use the code

The badge can be inserted in posts, on a page, or in the sidebar. Here are the steps for getting that done.

Showing the badge in the sidebar

  • Copy the badge code by highlighting it and pressing Ctrl-C.
  • Insert a Text widget in the sidebar.
  • Paste the code, use Ctrl-V, into the text widget.

Showing the badge on a page or in a post

  • Copy the badge code by highlighting it and pressing Ctrl-C.
  • Edit the post or page with the Dashboard Editor.
  • Click Text to go to the HTML editor.
  • Position the cursor to the desired place.
  • Paste the copied code, use Ctrl-V.
  • Go back to Visual. The badge will show.

Monday Window Home

.:.

© 2016 Ludwig Keck

Advertisements

About Ludwig

Lending a helping hand where I can. . . My motto: If it is worth doing, it is worth doing well.
This entry was posted in Blogging and tagged , , . Bookmark the permalink.

11 Responses to Sharing Badges

  1. Very cool, Ludwig. Thank you for this tutorial.

  2. Laura Cereta says:

    Honestly, I’m not tech savvy enough to understand this post. I tried to put your badge on my page and failed utterly. I couldn’t find the widget where I was supposed to put the URL. Plus, I want a badge at the top of my page and I can’t even get anything on the side anymore. Everything goes all the way down to the bottom no matter what I do. When you have time could you go to my page and walk me through it with comments back and forth from this post…or a post on my page so you don’t have all that crap here? It’s https://45ragestreet.org I would ❤ u forever;) Either way, I'm going to tweet this post. I'll put it in my buffer to go out later tonight.~LC

  3. Laura Cereta says:

    I’m looking for my comment but it’s gone. Did you get it?

  4. Ludwig says:

    Thank you Laura,

    We will get you where you want to be, but in a round-about way. Let me start at the end, sort-of.

    You said Everything goes all the way down to the bottom no matter what I do. That is because your theme doesn’t have a sidebar but has footer areas for gadgets. Themes define where things go. When you switch to a different theme, things will look different and will go where that theme says they should.

    I want a badge at the top of my page You have two pages, actually three. Your “About” page with information about yourself, Your “Home” page, which you are not using correctly, there is nothing there, and your page for the blog posts, the one everybody sees when they go to your blog. Your posts go on this last page. Whatever you posted last goes to the top. Other posts are pushed down. You can specify how many of your posts show on this page. Your footer with your widgets is way at the bottom. It is also at the bottom of your other pages.

    This post we are commenting on describes how you can make a “badge”, and how to share the code so others can put your badge on their site or into their posts. Since that is not what you want to do, we will continue our conversation elsewhere. Hang on, you will hear from me.

  5. slfinnell says:

    Good tutorial. Will be trying my hand at it after work 😊

Comments are closed.