Tech and code are funny old beasts, and it can be hard to make head or tail of how code will react when you copy and paste from one site to another. Something that’s been coming up recently, and I’ve had a few questions about is why is my linky badge not showing when I copy and paste the code from another site?
Linky badge not showing - here's what to check
If you’ve been lucky enough to spot it, our brand new linky has been seeing some amazing linked posts since it went live a couple of weeks ago. But with it being a co-hosted linky, has come tech issues across different platforms, sites using different themes, and a whole bunch of other variables.
One thing that came up for us, and for lots of you too, is that when we copied the grab code for our linky badge into a new post, the badge wasn’t displaying. Like I said, code can be a tricky beast, but when a linky badge isn’t displaying it’s usually the code that’s the problem.
So here’s how we checked ours and what our final solution was (you might be surprised!)
Check the image URL
We used the handy blog button creator within inLinkz to create our linky badge. All this requires is that you upload your image to an online server somewhere (usually your WordPress media bank) which gives the image a unique URL. You put the image URL into the button creator and hey presto! Linky badge.
If your image doesn’t display, the first check would be to make sure the image URL is correct and isn’t broken. If the image isn’t working at all, try deleting the image from WordPress, re-uploading it, and paste the new URL into the button creator.
Clear your browser and WP Cache
As always, there’s a handy plugin for that! Clearing your browser cache can be done easily through your browsers settings. To clear your WP Cache, a simple plugin like W3 Total Cache or WP Super Cache should give you the ability to clear the cache.
Cached data is information stored in a browser or site (or other places) about files, images etc. We do this to reduce loading speeds when a user next views whatever it is we’ve cached. Clearing your cache won’t remove the file or image, it will simply remove the stored data about it, forcing a full re-load the next time we view that image or file. This should, then, allow WordPress and your browser to load the latest version of your linky badge.
Double check the badge script
When you create a linky badge using inLinkz, you create a set of code, or a script, that you paste into the text editor of your blog post.
If it’s not displaying the way it’s supposed to, it’s a good idea to compare the script you can see in your text editor with the script generated by inLinkz. There’s no magic formula here; just open inLinkz and your post and enable split screen viewing so you can read both sets of script simultaneously and make sure they match exactly.
Try an adaptive images plugin
While you need to be careful with how many plugins you have loaded onto your site, to optimise images for various devices like PC, tablet, and mobile, sometimes you need to use a plugin. EWWW Image Optimizer helps to adapt your images so that they display properly on lots of different devices and screen sizes.
For example, while my website’s theme is totally device responsive, I have a really huge PC screen which can affect how my images display on my PC. I use the plugin to make sure my images show on my (unnecessarily) large screen!
Switch to Visual editor then back to text
When you edit a post in the text editor, then switch to the visual editor, WordPress helps you out by automatically ‘fixing’ any code that isn’t quite right. Most of the time, it works perfectly, and any broken or incorrect code has the right change applied to it.
But, as an automatic feature, it’s not infallible. One common error that I’ve found is WordPress adding in extra quotation marks (“) where they’re not needed. It doesn’t do this for no reason, though, so if this is happening you need to find the underlying cause.
You could tell your people to remove the extra quotation marks before they add your badge to their post, but this isn’t exactly the most user friendly fix. Most people won’t bother and simply won’t add your badge to their post, or link up with you at all.
So the first step is to go back into your post text editor and remove any extra quotation marks you can see. Save the post and make sure the changes don’t revert back, and WordPress doesn’t add the extra quotations back in. If it does add them back in, your root problem is more than likely a theme setting, which I can resolve!
Check for 'curly' quotes
CSS and HTML coding doesn’t work well with ‘curly’ quotes except in certain instances. These are the quotation marks that visually are… well, curly! The quotation marks you want to be seeing within your text editor are the straight ones.
If you remove curly quotes from your badge code, but then when you save the post and go back into it WordPress has added them in again, then yep, you guessed it! Another plugin!
You can code a fix for this into your theme’s functions.php file, but to be entirely honest, unless you’re super confident with coding I wouldn’t recommend messing with it. I’ve wasted many an hour in my time having to delete and reinstall my theme entirely because I’ve broken the php file!
What's the big issue with curly quotes?
The problem with curly quotes probably won’t affect your site at your end. But if you want to display raw code (like the code for a linky badge for your people to ‘grab’ and display on their post or site) then you need to make sure this doesn’t display using curly quotes.
This is because when a user copies the grab code and pastes it into their site, they’ll be pasting curly quotes which their text editor won’t recognise. Their text editor will then add straight quotes to try and fix the code, ultimately breaking it altogether and resulting in your linky badge not showing.
The fix we found for this was to install the plugin WPUntexturize. This plugin forces your theme and site to display straight quotes rather than those pesky curly ones. Granted they might not be quite as pretty, but they definitely work a lot better!