This article may contain affiliate / compensated links. For full information, please see the disclaimer here.
This post is SO delayed, but I finally got my notes together to share this hack that I haven’t seen anywhere else!
I’m going to show you how I am able to add a liketowknow.it icon at the top of my social media icons. And while I have a coding background (not much, Java and HTML circa 2004), no coding experience is necessary to get this on your blog!
Before We Start
You will need a few things before we get into it/disclaimer:
- This hack is only for blogs currently using WordPress.org. I am also using the Genesis Framework (I literally have no idea if that makes a difference – if it does, let me know in the comments).
- You should already have your other Social Navigations icons installed. Mine are located in Appearance–>Widgets–>Custom HTML. Mine are pulling from Font Awesome icons. For a tutorial on this, check out this post for a beginner’s guide.
The trouble in getting a Liketoknow.it icon is that it is unsupported by all icon libraries. My HTML for all of my other Social Icons look like the below. It works by referencing the icon name and adding a link to it:
<div align=”center”><a href=”https://www.facebook.com/Katy-Foraker-107810183266723/” title=”Facebook” target=”_blank”><span class=”social”><i class=”icon-facebook”></i></span></a><a href=”https://www.instagram.com/katyforaker/” title=”Instagram” target=”_blank”><span class=”social”><i class=”icon-instagram”></i></span></a><a href=”mailto:hello@katydeeandco.com” title=”Email Me” target=”_blank”><span class=”social”><i class=”icon-email”></i></span></a>
What we need to do is basically create a vector icon and upload and format it ourselves. Ready? Fire up your fingertips and let’s go!
Step 1: Install the SVG Support Plugin
WordPress.org does not support .SVG files because they are notoriously unsecured. But that’s OK, because I’m using a vector I created myself (and you will be downloading). The reason the other icons work is that the images are actually being pulled from that icon server library. The icons are not being hosted on your page. So to upload our own vector icon for Liketoknow.it, download the SVG Support Plugin. Once you’ve downloaded the plugin, go ahead and activate it.
Step 2: Download the Liketoknow.it Vector Files
I’ve already made these (you’re welcome). You can download it in black or beige, or both if you want a rollover effect similar to mine. To download the file, right click and choose ‘Save linked file as’.
Step 3: Upload Vector Files to the Media Library
This should be easy – now that you’ve activated the SVG Plugin, you should be able to upload the .SVG files with no problem!
Step 4: Add Custom HTML (skip if you want the rollover effect and head to Step 5)
Ok, here’s the tricky part. Now we need to add some custom code to where our other Social Navigation icons are to make the Liketoknow.it icon show up. I suggest adding the Liketoknow.it icon at the END of your Social Icons because if it’s a little off in height or width, it will show less if it’s on the end.
If you follow my Insta Stories, finding the RIGHT code to make it all work literally took me 4 hours. Lucky for you, you can copy and paste the final code! Here is the Liketoknow.it specific code:
<a href=”https://www.liketoknow.it/YOUR USERNAME” title=”LiketoKnowIt” target=”_blank”><span class=”social”>
<img src=”URL FOR LTK IMAGE”
alt= “something went wrong”
height=”15px” width=”15px”
align=”absbottom”
style=”margin:0 0 2px 0″
/></span>
Notes:
- You will have to insert the URL of your specific image. You can grab this from your Media Library.
- The align=absbottom tag is super important. WordPress treats the vector like any other image and adds a space underneath that misaligns it with your other social icons. This piece of code removes it.
- If you are unhappy with the alignment, play around with the style=”margin:0 0 2px 0″ tag.
Step 5: Add a div tag to Center Everything
I’m really not sure if this makes a difference, but I added the following div tag at the top of my code (the first line). Make sure to close the tag at the very end of your code with a “</div>”.
<div align=”center”>
(Optional) Step 6: Code + Rollover Effect
Use this step if you want a rollover effect similar to mine. When you rollover the image, it will turn beige. If you want a different color than beige, you can use Photoshop to make a new vector the color you want. Here is the FULL code for everything (including Step 4) if you want the icon and the rollover effect.
<!–JavaScript code goes here.–>
<script language=”javascript”>
function MouseRollover(MyImage) {
MyImage.src = “URL FOR IMAGE ON ROLLOVER(BEIGE)“;
}
function MouseOut(MyImage) {
MyImage.src = “URL FOR NORMAL IMAGE (BLACK)”;
}
</script> <a href=”https://www.liketoknow.it/YOUR USERNAME” title=”LiketoKnowIt” target=”_blank”><span class=”social”>
<img src=”URL FOR NORMAL IMAGE (BLACK)”
alt= “something went wrong”
onmouseover=”MouseRollover(this)”
onmouseout=”MouseOut(this)”
height=”15px” width=”15px”
align=”absbottom”
style=”margin:0 0 2px 0″
/></span>
</a>
Replace the text in bold to your specific images loaded on your server and boom! You’re done! You should now have your own Liketoknow.it social icon! Look at you, busting all this code out!
If you found this tutorial helpful, please let me know in the comments!
