- Thursday, August 16, 2018

How to Add Social Media Buttons in HTML + Free Social Media Icons Font

Follow me. Stalk me. Let's be friends. Linking to your social media on your blog helps you gain repeat business, solidify your brand, and increase social media numbers that you might later use to impress people. 



Here's some freebies if you need them... This is kind of a republished post, but shit my last post was in 2016, and I want to also give a tutorial on how to use them.

These are free for any use (personal and commercial), but in accordance with the trademarked use of the images. For instance, you can use Facebook wherever Facebook will let you use their F.

Basic Black Social Media Font

I've put the basic black images as a font together. Half of it is the black images on a clear background, and the other half are black circles with a clear social media image in the middle.

Free Social Media Icons and Social Media Font for Your Blog ♥ Blogging As I Learn It ♥ Free Fonts Download ♥ Free Social Media Icons

Pink Watercolor Social Media Icons

These are pink watercolor spots with social media icons on them. I did the spots by hand in Photoshop. Provided are the images as jpg's already optimized (but with a white background); however, the file complete with a Photoshop file with layers of all the social media icons is also provided.

There are two sets of pink because some blogs are more red pink, and others are more purple pink, and I made both because I didn't like the first pink I did on my blog. 

Free for personal or commercial use; wherever the icons will let you have them. 

Free Social Media Icons and Social Media Font for Your Blog ♥ Blogging As I Learn It ♥ Free Fonts Download ♥ Free Social Media Icons

Free Social Media Icons and Social Media Font for Your Blog ♥ Blogging As I Learn It ♥ Free Fonts Download ♥ Free Social Media Icons

Retro Red Social Media Icons

Social media icons that look like a red pillow with social icons on top for a different looking texture perfect for retro sites and those with a red color theme. 


Free Social Media Icons and Social Media Font for Your Blog ♥ Blogging As I Learn It ♥ Free Fonts Download ♥ Free Social Media Icons

Get the Font and Source Files for the Social Media Icons



But how do you add social media buttons to your blog?

Good thing you asked that. Sorry it just seemed the perfect moment to sound like a door-to-door salesperson from 1957. 

Some wordpress plugins allow you to upload your own image files, but the easiest way to do it is to code it. It's easy code. 

Step 1: Open up Notepad


Open up Notepad or some kind of place to write your code that doesn't format. The problem with formatting is that it changes the " and the ' marks and ruins the code's ability to code. 

Step 2: Upload your Images and List the URLs


Then upload the images you want to use to your blog. Copy and paste the Image URL to Notepad. Just list them for now. To find the image URL, in Wordpress, it shows that on the right of the image in the media library. It will be something like http://www.yourblog.com/nameofyourimage.jpg or it might end in a .png.  In blogger, upload the image, insert into a post, set the size to the original size, right click, and Copy Image Address. Then paste into Notepad. 

Step 3: List Social Media URLs


Go to each social media account's page you want linked to, and copy and paste the address into Notepad. 

Step 4: Go into Notepad and Code


You can copy and paste this into Notepad. Then adjust the web addresses.

 <a href= "http://www.facebook.com" target="_blank">  
 <Img Src="http://www.image.jpg" width= "25 px"></a>  

The code is really broken down into two parts:
  1. The link. 
  2. The Image. 
I would copy and then paste as many times as you have links. So if you got 5 social media links, paste that 5 times into notepad. 

Copy the Facebook link, highlight from quotation to quotation in the top line's address without highlighting the quotation marks, and paste. Then copy the Facebook image, highlight from quotation to quotation in the second line's address without highlighting the quotation marks, and paste.

Repeat for each social media account.

You may end up playing with the width's pixel size to get the perfect size for your purposes. 

But in the end, it should look like it does up there, but with the right web addresses in between the quote marks. 

Step 5: Put the Code on your Site


Blogs


Go to your blog's layout or appearance where you would insert a widget or gadget. Create a new HTML or Text Widget. Copy and paste your code into it. Save and Save. 

Websites


If you don't have a blog, wherever you enter your html code is where you would paste this. 

Step 6: Save Your Code


If you already have it in Notepad now, save it so you can go back to it later. It's a thousand times easier if you can go back to it later for when you create new pages, create a new blog or site, or just want to update with new images. 


Troubleshooting


You can test what you're doing on W3's Try It Editor

W3 Schools: You are in essence listing out images as a link. This is a great tutorial on html for images. 

Make sure in your code for every  a  , there's an End A  /a  . And for every  <  , there's a closing .

Make sure you have quotation marks before and after every link.

Make sure you have a wordCommand= "crapInQuotes.com" in between all the < >s 

Check out these other methods



How to Create a Sticky Social Bar (like I have on this site on the left)


Don't Forget to Get the Font and Source Files for the Social Media Icons




Very Pinteresting Indeed: Happy Pinning

Free Social Media Icons and Social Media Font for Your Blog ♥ Blogging As I Learn It ♥ Free Fonts Download ♥ Free Social Media Icons

Free Social Media Icons and Social Media Font for Your Blog ♥ Blogging As I Learn It ♥ Free Fonts Download ♥ Free Social Media Icons

Free Social Media Icons and Social Media Font for Your Blog ♥ Blogging As I Learn It ♥ Free Fonts Download ♥ Free Social Media Icons


No comments:

Post a Comment