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

Posted in Blogging | Tagged , , | 11 Comments

Using Widgets – 1

The “Display WordPress Posts” Widget

Many of us like to provide our readers information and links to other blogs on related topics. There are a number of ways of doing this. One of them is the “Display WordPress Posts” widget.

Like other “widgets” this tool is used to place an item into your sidebar. The short description of the widgets says “Displays a list of recent posts from another WordPress.com or Jetpack-enabled blog.” To get a better idea of its use let’s look at some examples. (These are not shown at the same scale.)

Widgets-01

Widgets-03

Widgets-02

Oh, wow, you say, “these are all different!” Indeed they are. That shows the versatility and usefulness of this WordPress widget.

Widgets-04A little bit about where this widget will display the information from another blog. Widgets work in sidebars. Your WordPress blog theme might have different options for the sidebar location. The classic place is on the right side. Some themes will place it on the left. There may even be multiple sidebars and “sidebars” on the bottom.

To install a “Display WordPress Posts” widget, go to you Dashboard. In the left sidebar click Appearance then Widgets. Scroll down to find it and click on the name. Select the location, then click Add Widget.

Widgets-05The widget will open on the left and show the various options with some defaults already set. This gives us a chance to visit the various options and review what they do.

The first field is “Title:” The default is shown as “Recent Posts”. If you accept this or if you replace it with some other text, the widget will show this text followed by a colon followed by the blog title. In the examples above I have removed the text from the title field.

The second field is for the URL of the blog. Note that is must be either a WordPress.com blog, like galleryludwig.wordpress.com, or a site using WordPress and having the Jetpack plugin installed. If you are not sure about the blog you wish to link to, just try it. If the blog does not meet the requirement you will see this rather confusing error message in the place of the widget in your sidebar: “We cannot load blog data at this time.”

If you see this message the URL might have been mistyped or the blog is not compliant. There are other widgets for showing a link or information from other types of blogs, but that is beyond the scope of this article.

Back to the widget. The third item is a selection option, “Number of Posts to Display”. It is set to 5. You can change to 1 to 10. This will display the title or titles of the most recent blog posts.

After this there are three check boxes. By default they are not checked.

Open links in new window/tab:” – If you check this box the user will see the link in a new tab or a new window of the browser.

Show Featured Image:” – Check this box so a small picture of the post’s “Featured Image” will be shown. This makes your blog colorful and interesting. It also makes it more likely that a visitor to your blog will see and click the link. Unfortunately many bloggers do not set a “featured image”, some themes don’t even provide for that. There is nothing you can do to get an image here, only the blogger has control. More on this farther down.

Show Excerpts:” – Check this box to show an excerpt of text from the post. If the blogger has not “managed’ what is shown here, there will be about six lines of the first part of the post text. This can take up quite a bit of space.

Note that you may have multiples of this widget installed to provide links to as many blogs as you like.

Managing your own blog’s appearance in such links

If you link to other blogs using the “Display WordPress Posts” widget chances are good that your blogger friends will do the same for you. As you saw above there are some things you can do to manage the appearance and even what text is show.

Widgets-06Featured Image

Be sure to set a “Featured Image” for every blog post. You can do so when editing the post in your Dashboard. The option will be in the lower right.

Not all themes offer this option. You can still set a featured image for your post even if your theme does not support that.

Use the online editor (wordpress.com). There in the left sidebar you will find a “Featured Image” option. Click that and click Set Featured Image. It will take you to your Media Library. You can upload an image from your device to set it for the post.

It is best if your featured image to be wider than tall, that is, a “landscape” format. It will take up less space in the widget and appear better in the WordPress reader.

Excerpted Text

If you do nothing in your post to manage the “excerpted text”, the “Display WordPress Posts” widget will grab the top part the text, about six lines or so. The text may end in the middle of a sentence and just terminate with “…”.

That’s mostly just fine, but you can do better. The easiest way is to insert a “read more tag” or “clear break” after the first paragraph or so to indicate how much of your text is to be shown. Read more about this in my post A Magic Diet Pill: The Read More Tag.

But wait! There is more!

Widgets-07Some themes have a section below the Dashboard edit window for specifying the “Excerpt” text. It doesn’t have to be the fist paragraph of your post. It can be a summary, just what you want to offer! For bloggers using WordPress.org there are plugins (usually SEO plugins) that install that option.

The online WordPress Editor also offers such an option. Click More Options in the left sidebar and enter your summary text in the Excerpt box.

So there. You can manage how your blog post information will be shown in your fellow bloggers sites! Make use of these features!

.:.

© 2016 Ludwig Keck

Posted in Blogging, Live Writer, WordPress | Tagged , , | 2 Comments

WordPress Editor

Not Exactly Everything You Expect

The online WordPress Dashboard Editor has seen many improvements lately and does many neat things. WYSIWIG, “what you see is what you get”, is not one of them. That is quite intentional of the part of WordPress since blogs need to be responsive since mobile devices have become the leading means to follow blogs. There are some things it does poorly. Continue reading

Posted in Blogging, Live Writer, WordPress | Tagged , , , | 7 Comments

AI Photo Interpreter

The computers are watching us!

Drum roll please! Now for the latest from Microsoft Cognitive Services: CaptionBot – an online AI (artificial intelligence) thingie that looks at photos and tells what it sees – sort of supplying a caption for the picture. Continue reading

Posted in Computer - general, Digital Photos, Microsoft, Photos | Tagged , , , | 8 Comments

WordPress Sharing

Sharing your blog posts to Social Media

One of the nice features of WordPress is the automatic sharing of posts to Social Media accounts. Setting up the sharing options is in the Dashboard > Settings > Sharing and there it now provides a link to Publicize Settings in the WordPress online editor. Continue reading

Posted in Blogging, WordPress | Tagged , , , , , | 9 Comments

Nik Tools now FREE

Google Nik Tools are now FREE Downloads

Google announced today that the Nik Collection of photo enhancement tools would henceforth be free downloads.

Nik Software tools, primarily designed as Photoshop plugins, have achieved a stellar reputation over the years. Most of my B&W photography friends use Nik Silver Efex Pro and consider this tool an essential part of their tool kit. Continue reading

Posted in Digital Photos, Photo Editing, Photography | Tagged , , , , | 6 Comments