Custom Social Icons for FooBar

FooBar is an awesome and easy way to add a notification bar across the top of your website. You can either do it personally by buying it online or ask UK website designers to do it for you, as it is one of the additional features they offer in their various packages without charging you… Read more Custom Social Icons for FooBar

cat-thumb-foobar-wpFooBar is an awesome and easy way to add a notification bar across the top of your website. You can either do it personally by buying it online or ask UK website designers to do it for you, as it is one of the additional features they offer in their various packages without charging you an extra dime. ¬†You can scroll several messages across the top and have social media icons to the left or right of the bar. You can even have your twitter feed scrolling in the message area, if you’re a Tweeter kinda website. It’s highly configurable. You can see it in action at FooPlugins.com, or on one of my alltime favorite webcartoon sites: ZenPencils.

Oh! And you can see it scrolling my Twitter feed across the top on THIS page. Wow!

The only drawback to FooBar is that it was created a few years back when 3D-like buttons were all the rage. So if you add social sharing to your FooBar, be ready to get some Web 2.0 flashbacks. But, what’s cool is that it’s relatively easy to swap out the default icons for your own awesome, modern icons.

CAUTION: This means editing the plugin directly. So, the next time there’s a FooBar update, backup your icons, then reupload them after you’ve updated the plugin.

How to Add Custom Social Icons for FooBar

First, go get yourself some awesome new social icons. There’s tons of places to find them, but you’ll want to make sure whatever set you find has some that are 16x16px. Here’s two really great places to start:

Next, open up your “/wp-content/plugins/foobar/images/” folder. In there, you’ll see a folder called “social”. That’s where all the social icons that are available to FooBar are located. FooBar is pretty smart. It basically loads any and all png images you can find right from that folder regardless of their file name. So all you need to do is just add your own social icons in there.

BUT WAIT! That’s WordPress plugin HERESY!

I know… I’m suggesting you change plugin files, yet again! Well, here’s how you can do that without having to freak out.

  1. First, change the title of that “social” folder to “social-original”.
  2. Next, add a new folder called “social-new” or “social-flat” whatever you like
  3. Add your new icons into that folder.
  4. Then, add another folder called “social”. Then add your new icons into THAT folder also.

You see, FooBar is a premium plugin and is NOT hosted on the WordPress Repository, and does not (YET!) have an auto-update feature. So when a new FooBar update takes place, you have to update it by copying the files over to your plugins folder via FTP. So when that happens, just copy the whole thing over like you always do, and your “social-flat” folder will still be there and you can delete the “social-original”, rename the new “social” to “social-original”, then copy “social-flat” and rename the copy “social” and you’re done.

Have fun!