Close

May 27, 2017

How to Hide Shareable Images within Your Posts

Hide Shareable Images - Featured Image - ProductiveMotherhood.life
ProductiveMotherhood.life - Feature Image Template

Shareable images are essential to making your posts go viral. If you don’t have eye-catching, easy-to-share images on your blog, your site isn’t very likely to become successful. It can be hard to know which of your images people will want to share the most though. This is where creating multiple shareable images comes into play.

It is good practice to create at least 3 shareable images per post. In doing so, you’re increasing the odds that at least one of the images gets shared. The question remains though, how do you get all those images into your post without them looking tacky and out of place? Today, I’m going to show you how to easily embed these images discreetly so they’re still accessible for sharing but not taking up visual space in your post.

Hide Shareable Images

You don’t have to install any plugins to hide your images within your posts; all you really need is to type some simple HTML code in the WordPress editor! Even if you have no idea idea what HTML is, it’s still so, so easy! I’ll show you!

  1. First, you need to either create a new post or edit an existing post in WordPress.
  2. Once the post editor is open, switch from the “visual” editor to the “text” editor.
    Hide Shareable Images - Example 1 - ProductiveMotherhood.life
  3. Since the images will be hidden within the post, it doesn’t really matter where you place the code. I, myself, prefer to place it all at the end so it’s easy to find when I’m editing the document. Now, input the following code:
    <div style="display: none;">YOUR IMAGES HERE</div>

    Note: In case you aren’t familiar with HTML, this code has created an invisible container which will house your image(s). Think of it like putting apples into an invisible basket.

  4. The next step is to add your shareable images. To do so, highlight the words “YOUR IMAGES HERE” and then click on the “Add Media” button above the post editor.
    Hide Shareable Images - Example 2 - ProductiveMotherhood.life
  5. Select whichever image you’d like to attach to your post and click the “Insert into post” button. Since you’re still in the “text” editor, instead of seeing the image, you’ll see the HTML for the image like this:

    <div style="display: none;"><a href="http://productivemotherhood.life/wp-content/uploads/2017/04/featuredImageTemplate.png"><img class="alignnone size-large wp-image-77" src="http://productivemotherhood.life/wp-content/uploads/2017/04/featuredImageTemplate-1024x797.png" alt="ProductiveMotherhood.life - Feature Image Template" width="1024" height="797" /></a></div>

    Your image is now in the invisible container and ready to be shared with the world! 
    Note: You may place as many shareable images within this container as you would like.

Verify the Images Appear

  1. To test how your images are displayed for viewers, I recommend clicking the Pinterest Pin It button or the Tailwind button that you (hopefully) have either as extensions for your browser or directly within yours posts.
    Hide Shareable Images - Example 3 - ProductiveMotherhood.life
  2. If you don’t have the browser extensions, you could always visit Pinterest.com (it is highly recommend you have an account to market your blog) and attempt to create a pin from the post on your website following the steps below:
    1. Login to Pinterest
    2. In the upper right corner you’ll see a red circle with a white + in the center. Click or hover over the symbol for a menu to appear.
      Hide Shareable Images - Example 4 - ProductiveMotherhood.life
    3. In the “Upload” menu, click “Save from site”.
    4. A pop-up will appear, prompting you to type the URL of the page from which you’d like to share an image.
      Hide Shareable Images - Example 5 - ProductiveMotherhood.life

      Note: you need to type the entire URL for the post you’re trying to access. For example:
      http://ProductiveMotherhood.life/hide-shareable-images
    5. After clicking “Next”, the window will prompt you to “Choose an image to create a pin”, displaying all the images associated with the URL – including the hidden images!
      Hide Shareable Images - Example 6 - ProductiveMotherhood.life

That’s it! You’re done! You now have shareable images attached to your post so people can choose which one they would prefer to share!

If you’d like to read more helpful tutorials, head on over to my Blog How-To’s page!

Do you have any questions or comments? Let me know, I’d be happy to help!

Hide Shareable Images - Pinnable Image 1 - ProductiveMotherhood.life

Leave a Reply

Enjoying my blog? Please spread the word :)

error: Content is protected!!