Social media is a great way to stay in touch with your readers. Not everything you do has a place on your blog or website. Some things just work better on social media. In order to make it easy for your readers to find you on the social media of your choice you could place clickable icons on your site. Using some easy HTML and free icons, this tutorial will show you how to do just that.
In this tutorial we are creating a Pinterest link for FantasyWritersWorkshop.com’s Pinterest board. Let’s do this!
First you will need to create some HTML code that will control the link. The code will take the icon from its location and add a link to it. It will have a hyperlink reference, an image source reference, and an alternate text. Don’t worry if you’re not familiar with HTML. This tutorial will show you what you need to do. It will look like this:
<a href=”” target=”_blank”><img src=”” alt=”” </a>
Side note: You can add other features, such as specifying the size of the image if you want it to be different than the source image you are using, but since we’re working with 32×32 icons I don’t want to change the size and I don’t want a border, so I’ve deleted those features. That’s the topic of another tutorial.
Paste or type this code into a text editor such as notepad.
Next find and upload the social media icon you wish to use. I am using the free icons provided by Elegant Themes.
Once you have the icons on your computer it’s time to go into WordPress. In WordPress, go to Media and select Add New:
Next go the folder on your computer containing the icons and highlight the icons you want to upload.
Next, drag the icons and drop them in the WordPress box that says Drop files here. In this example I am uploading multiple icons at once.
After the icons have uploaded, select Edit on the right side of the screen for the icon you wish to use.
It will take you to this screen where you’ll see some information about the icon.
Highlight and copy the URL located on the right side of the screen near the top. This is the file location for the icon you wish to use.
Paste the URL into the img src portion of the HTML code. Paste it between the quotes. It will look like this:
<a href=”” target=”_blank”><img src=”http://fantasywritersworkshop.com/wp-content/uploads/2014/09/pinterest.png” alt=”” </a>
Since I’m using Pinterest, I will make the alternate text say something like “Fantasy Writers Workshop on Pinterest”. It now looks like this:
<a href=”” target=”_blank”><img src=”http://fantasywritersworkshop.com/wp-content/uploads/2014/09/pinterest.png” alt=”Fantasy Writers’ Workshop on Pinterest” </a>
Now I need to get the link. That’s the URL I want my readers to go to when they click on my icon. Simply go to the site you want to send them to and copy the URL. This is not the main page on Pinterest. This is Fantasy Writers’ Workshop’s board on Pinterest.
Now paste the link within the quotes after href. It now look something like this:
<a href=”http://www.pinterest.com/brown1095/fantasy-writers-workshop/” target=”_blank”><img src=”http://fantasywritersworkshop.com/wp-content/uploads/2014/09/pinterest.png” alt=”Fantasy Writers’ Workshop on Pinterest” </a>
Next go to your widgets in WordPress and grab a text box (or use a current text box) and drop it where you want the icon to appear.
Open the text box, paste in the code, and save it. Feel free to give the text box a title if you want. The title helps readers understand what that section of the site is telling them.
Next, go to your website and test your icon.
It works!
Continue this same process for each social media network you wish to add. Paste the next set of code a few lines under the previous code. This is so the code is easy for you to see if you want to go back to it later.
The icons will line up side-by-side on your website.
Now continue to add as many icons and links as you wish. Of course this isn’t the only method to add icons to your site. This method is easy and allows you to use any icon you wish. You can even include pictures or draw the icons yourself. Enjoy!
I love writing. If you have a project then I want to help. Email me at randy@randyabrown.com or call me at (423) 536-9606. We can set up some time to talk… no pressure or obligations of any kind.
0 Comments
Trackbacks/Pingbacks