I’m always on the lookout for cool tricks that are (a) easy to implement and (b) simplify social media management. When I was reading the Buffer blog’s monthly social media report, I discovered a nifty tip for embedding “invisible” pinnable images in blog posts.
Of course, I immediately tried it, and it works!
Before we dive in, I’ll answer the question you’re likely wondering about:
WHY would I want to hide a large vertical image in my blog post?
Well, we know that “visual content” is THE trend in blogging and social media marketing. Glance at your Facebook News Feed. Or Instagram. Or Pinterest. Add visuals to your blog post and your article instantly becomes more engaging. More shareable. More memorable.
Bloggers who care about engaging with readers and creating shareable content (and what blogger doesn’t?) are madly scrambling to master Canva and PicMonkey so we can feature compelling custom graphics with each blog post.
Therein lies the problem.
What size should that darned image be?
If you’re creating an image to be shared on Facebook (along with some “teaser” text and an embedded link to your blog post), the image (width x height) should be 1200 x 627px.
For Twitter, the image should be 506 x 253px
For Pinterest, the image should be 735 x 1102 px
See the challenge? We could spend all day creating shareable images for the major social networks!
For the past 9 months, I’ve been creating custom graphics for each blog post, appropriately sized for Facebook. Recently, I added a Pinterest-sized image, as well. But Pinterest images are ginormous, and take up a lot of real estate in a blog post.
Making your image “invisible” hides the large Pinterest image you’ve so painstakingly created and loaded to your post until the user clicks the “Pinterest” social sharing icon for the post. The image then miraculously expands to the perfect pinnable size.
Here’s the process, in a nutshell:
Design your pinnable image (735 pixels wide x 1102 pixels tall). Overlay the title of your post onto the graphic, like I did here:
Upload the pinnable image to your blog. Customize the “Alt Text,” which is the exact text that will display when a user pins your image.
Insert the full-size image at the end of your blog post.
Now, the secret part!
Click the image and then click the pencil icon (in WordPress) to open the image editor.
From the “Size” setting, select “Custom Size” from the dropdown menu and change the width to “1.” As in 1 pixel wide.
Update the image and then save or update your blog post.
This process reduces the size of the Pinterest image so it isn’t visible on the post, except as a tiny dot that you can’t see unless you squint very, very hard. (There’s one on this post, at the end, before the Click to Tweet.)
When the user clicks the Pinterest sharing button for the post, the perfectly-sized Pinterest image will display. (Give it a test drive on this post.)
Isn’t that slick?!