User Tools

Site Tools


social_networking_icons

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.

You will probably also want to check out our tutorial on adding Share buttons.

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:

First, if you have not already done so, you will probably want to setup Custom CSS via PHPlugins.

Then you should assemble whatever icons you'd like to use. In CE2, we used icons from Komodo Media, supplemented with some extra icons for social media not in their pack. Click here to download that icon pack.

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/.

Before we start, you can take a look at the demo gallery to see the end result we're going for.

The PHPlugins Function

To start, let's setup an empty function in phplugins.php.

function ttg_socialnetwork( $style, $path ) {
	echo '

	<!-- your stuff here -->

	';
	return false; // Replaces default social media bar
} // END

Hurrah for basics. But I'd like a custom container so that I can take precise control over what I am about to create, so let's add a paragraph element with a custom class:

function ttg_socialnetwork( $style, $path ) {
	echo '
	<p class="custom-social-media">

	<!-- your stuff here -->

	</p>
	';
	return false; // Replaces default social media bar
} // END

And because that <p> element inherits some styling from our framework, I'm going to put use some code to “reset” the element in our custom CSS file:

p.custom-social-media {
	font-size: 0;
	line-height: 0;
	margin: 0 auto;
	}

p.custom-social-media a {
	margin: 0 4px;
	}

I now have what is essentially a blank canvas on which to work. This takes our default social media bar:

And replaces it with nothingnes:

From here, the task is easy. We replace <!-- your stuff here --> with hyperlinked image references to our icons. Here's a linked icon to Facebook:

<a href="http://facebook.com/" onclick="window.open(this.href); return false;" ><img src="/phplugins/images/social_networking/facebook_16.png" /></a>

For each icon, you're going to copy-and-paste that code and make to changes:

  1. Change the href value to target your profile.
  2. Change the image src value to use the appropriate icon for each social network.

So a full function might look like this:

function ttg_socialnetwork( $style, $path ) {
	echo '
	<p class="custom-social-media">

<a href="http://facebook.com/" onclick="window.open(this.href); return false;" ><img src="/phplugins/images/social_networking/facebook_32.png" /></a>
<a href="http://twitter.com/" onclick="window.open(this.href); return false;" ><img src="/phplugins/images/social_networking/twitter_32.png" /></a>
<a href="http://plus.google.com/" onclick="window.open(this.href); return false;" ><img src="/phplugins/images/social_networking/google_plus_32.png" /></a>
<a href="http://500px.com/" onclick="window.open(this.href); return false;" ><img src="/phplugins/images/social_networking/500px_32.png" /></a>
<a href="http://modelmayhem.com/" onclick="window.open(this.href); return false;" ><img src="/phplugins/images/social_networking/mm-glossy_32.png" /></a>
<a href="http://vimeo.com/" onclick="window.open(this.href); return false;" ><img src="/phplugins/images/social_networking/vimeo_32.png" /></a>
<a href="http://youtube.com/" onclick="window.open(this.href); return false;" ><img src="/phplugins/images/social_networking/youtube_32.png" /></a>

	</p>
	';
	return false; // Replaces default social media bar
} // END

And that results in a social media bar that looks like this:

social_networking_icons.txt · Last modified: 2013/02/25 07:41 by admin