Table of Contents

Social Media Icons

Compared to previous versions, CE3 takes a different approach to social media. Some will love it, some will find it sufficient, and some will want more. This article is for the latter group, the social networking elite. I will demonstration how to use PHPlugins to create a custom social networking bar for your site.

background: TTG vs. Social Media

So this next section is all background discussion. If you'd prefer to get right into the meat of the tutorial, then just skip ahead to the next heading.

In the past, TTG CE2 Pages included 155 social media icons for various social networks, most of which I had never heard of. But I was attempting to cast a wide net, to fill all needs and scenarios. That was my mistake. Because along came 500px and I had to add icons, then someone wanted icons for Model Mayhem, and then Instagram stopped being a phone-only thing and became a real website, and Pinterest, and when does it stop?!

“Never, Matt. It never stops.”

I can't keep up. There is no net wide enough to catch every fish in the sea, but that's exactly what I have been trying to do by striving to accommodate all possible social networking scenarios. There simply is no “one size fits all” solution.

Add to that the technical dilemma, that 155+ icons added to a plugin – most of which no one will use – just slows the plugin down, causing it to load and refresh more slowly.

For CE3, I took a hard look at the existing plugins with a focus on streamlining the overall experience, making them easier to use and faster to respond. And I identified social media as an area in dire need of rethinking.

Meanwhile, the world of social media continues to expand. Pinterest has gone huge, Flickr is enjoying a resurgence, Google+ has become a haven for photographers, MySpace is trying to make a comeback, and now we have See.me, 1x, … and I don't know what else. Seriously, that's the problem: I don't know, because there's just too much of it and I have neither the time nor the interest to follow it all.

So when you inevitably want to signup for MyFace, Spacebook, ThumbsUp, SquareCrop, ModelPile, Lenz, Piccolo, PixelJazz, PhotoMash or whatever tomorrow's favorite new social thing … we're leaving it up to you.

For CE3, the focus is:

Keeping it simple.

Making it solid.

Giving you room to grow.

So make it your own. After all, it's your social network. Meanwhile, I'll reduce the clutter and prioritize tools and technique, not extraneous icons and a sprawling UI.

Why use icons?

The intent of social media icons is simply to provide recognizable links back to your social media profiles on various networks. We are not talking about Share, Like, +1 or Pin It buttons – that's a different conversation.

Lay the groundwork

In getting started creating our social media bar, let's first lay our foundation:

If you don't like those icons, there are loads of options online. You can usually turn up alternatives by a quick Googling, and most social networks make official icons in standard sizes that you can download. Look for an About or Developers section on their site.

After downloading icons, upload them to your server. I believe the most like place to store them would be /phplugins/images/.