Blog

Real Simple Social Media Follow Code

Recently, one of my clients had one of her WordPress posts vanish. It’s a big deal to find your recently published content gone – especially when it’s being shared widely in social forums. Worst of all, she could not see that all of the content was still secure in her database. She thought it was lost, and was already grieving when she contacted me.

Of course, I saved the day and brought the content back, just as refined and ready for press as before. I proposed that the issue was a fluke. I suspected the issue might have been related to a social sharing plugin that had been glitchy, but made no changes.

The next day, four posts were gone. While I could and did bring the content back, I decided it was time for a simple social media follow widget – no plugins, no scripts, just icons and actions. To see the method in action, look at the Follow Widget on Spirit of Ilithyia’s page.

What I came up with is inline CSS and HTML that can be pasted right into a standard Text Widget.

First, pull down the social media icons that you want to use and load them into your media library.

The Code

CSS

.socialfollow img {
margin: 5px;
opacity: 0.8;
-webkit-transition: all 0.2s ease;
-moz-transition: all 0.2s ease;
-o-transtion: all 0.2s ease;
}
.socialfollow img:hover {
opacity: 1;
-webkit-box-shadow: 0px 0px 20px rgba(255, 255, 255, 0.8);
-moz-box-shadow: 0px 0px 20px rgba(255,255,255,0.8);
box-shadow: 0px 0px 20px rgba(255, 255, 255, 0.8);
}

HTML

<div class="socialfollow">
<a href="YOUR SOCIAL MEDIA URL">
<img alt="" src="ICON URL" width="100height=100/" />
</a>
</div>

It’s best to put the CSS in your theme’s style sheet, but you can put it above the HTMl in the widget within <style> </style> tags.

Probably obviously, you repeat three lines between the <div> for each social media service that you would like to include in your widget. You specify the image source based on the location to which that your icons uploaded in your media library. And, if necessary, you can scale the image sizes a little by changing the height and width values.

What’s Next

Our Work

Check out some recent work we’re proud of.

Our Blog

Read our latest ideas about tech, features, messaging, and more.

Get in Touch

Want to discuss a project? Hit us up, we’d love to chat!