GET A HEART SHAPED ‘LIKE BUTTON

It’s actually fairly simple to add a heart shape ‘Like’ button to your blog, it just has a lot of steps if you want to customize it further.
I’ve been ripping my hair out trying to find out how all these other blogs had a cute little heart icon at the bottom of their posts, rather than the generic WordPress ‘Like” button.  Not only was it frustrating to look at, but in order to ‘Like’ one of my posts, the individual had to have a WordPress account!  I’m embarrassed to say that I’ve been trying to figure this out for at least 4 months now (off and on mind you, if I had all hours of the day to research I think I would have found it faster).  I just had to laugh when I realized I was going about it all the wrong way.  I though that there was some secret plugin, or code that I simply had to copy and paste and VOILA!  As I said before, it’s not super difficult, it’s just a tiny bit tedious to customize.  But if you only want a red heart icon, then you only need to follow the few steps.
First, you need to use a third party plugin. Like ThemeZilla (this is what I’ll be using for this tutorial—ps it’s FREE).  Follow the installation instructions they provide.  I pasted it below

1. Download the zip file using the “Download for Free” button above.
2. Upload the /zilla-likes/ folder to the /wp-content/plugins/ directory.
3. Activate the ZillaLikes plugin through the “Plugins” menu in WordPress.
4. Configure your settings in the new “ZillaLikes” menu which appears.

To do #2 simply go to dashboard/plugins/add new/upload  then you just locate the ZillaLikes folder and voila!

Next you can configure your ‘Like’ button in the Themezilla menu

EDIT THEME ZILLA HEART ICON

I didn’t want the default heart color or size that came with Zilla.  Here is how I changed that.
First, ThemeZilla will not let you edit their CSS, so you have to override it with some code.

Go to your Dashboard/Appearance/EditCSS and paste this code

/*
Welcome to Custom CSS!

To learn how this works, see http://wp.me/PEmnE-Bt
*/
.zilla-likes {
background: url(http://thejoifullife.com/wp-content/uploads/2016/04/HEARTtracing.png) no-repeat 0 49%;
border: 0 !important;
display: inline-block;
margin-bottom: 10px;
min-height: 25px;
padding-left: 25px;
text-decoration: none;
}

.zilla-likes:hover,
.zilla-likes.active {
background: url(http://thejoifullife.com/wp-content/uploads/2016/04/TANHEART.png) no-repeat 0 49%;
border: 0 !important;
margin: 0 0 25px !important;
padding-left: 25px !important;
text-decoration: none;
}

.zilla-blog-widget .zilla-likes,
.tz_recentwork_widget .zilla-likes,
.tz_blog_widget .zilla-likes,
.home div#the_body #slider .excerpt .zilla-likes,
.archive div#the_body #slider .excerpt .zilla-likes {
display: none;
}

/* Hide Zilla Share in custom post widget and sliders in themes */

Now you can edit the size, and the icon.
Change icon.
1. Search ‘Heart Icon png’ in Google images.

2. Go to ‘Search Tools’ then size and ‘Exactly’

Pick the size of the icon you wish, matching the size you put into the CSS code.  (These MUST match)
3.  Select the icon you want, then save to your computer.

4. Upload the heart icon to your WordPress media Library.
5. Copy the image URL code 

6. Paste the image URL into the CSS code replacing this line with of code with your own URL.  (There are two places for an image URL in this code. The one on line 7 is for what the heart will look like BEFORE you like the post, the second on line 18 is for what the heart will look like after liking it.  Ex. In my blog, if you scroll down, the heart is at first hollowed out and grey.  When you hover and click the heart it changes to a tan color.  You can keep both images the same in which case you will use the same URL for both lines, otherwise repeat the same steps above to find a different heart icon and place the URL where appropriate).