Create a "Mashable-Inspired" Sidebar Social Widget for WordPress

I've had a lot of requests lately to share a tutorial on how I created the sidebar widget on my personal blog. It looks nice and most important, it works! With some simple PHP and CSS, I'm sure everybody can implement this on their blogs easily. Today I'm going to show you how to create mine... in hopes that you'll be able to create your own custom version for your own projects!


Step 1 Get Social!

First, this requires that you have a Facebook Page, not just a regular profile... so if you don't have one, you'll need to make one first. We'll proceed assuming that you already have one though!

Ok, let's get your Facebook page and email subscription codes ready. Do not copy the codes in Step 1! Read everything here first. Copy only the completed code in Step 2... we're just going to be going through the basics first:

What You'll Need From Your Facebook Page

Let's dive directly into some code that we'll be using for the sidebar widget so I can point out a few piece of information that you'll need. This snippet will be used for the Facebook Social portion of our widget:

Here's the tricky part: Every time you edit your CSS, make sure to change the number '?1' (on line 4 of the above example) to a different one that corresponds with the cache version of your CSS. If you don't change it, it might not work. (this is admittedly a strange situation - I had successes and errors getting this to work).

For your Page ID (it's a long number that represents your facebook page ID): Log in to your Facebook page > Edit page and you'll see your own page id in the browser address bar. Use this for the profile ID on line 4 unless you want to advertise my Facebook page on your site ;).

sample

In your browser bar on the Edit Page, you'll see something like this :

You can also change the connections, width and height so that it fits nicely in your sidebar. Minimum width must be 250 (px), less than that and you won't be able to fit the button and text inside the boxes.

Email Subscription Details

Now we need to grab your subscription details from Feedburner. Again, I'm assuming you already have this set up, so you should just need to log in and grab the following details.

Burn your feed using Feedburner and replace the Feedburner id in the code below with your own. The Feedburner id is the one on your feed burner URL. For example feeds.feedburner.com/ariff. Yeah, I had some confusion looking for that before this.

Here's the actual code we'll be using for the subscription portion of the widget:


Step 2 Putting It Together: The Full Code

You can turn this into a full blown plugin (or shortcode) if you'd like, but today we're going to take a shortcut to get to the good stuff and work directly on a text-widget. No, this isn't recommended for actual production... but it'll get us moving right away.

Copy this code into a text widget on your sidebar. Remember to change all the attributes as mentioned above and include your own Twitter & Google+ credentials. If you already have Google+ button on your site, you can remove the Google+ javascript code from below as a single instance of the script is already enough for multiple buttons.


Step 3 CSS Code

Copy the CSS codes into your theme stylesheet. Note that if the Facebook box does not work, the codes for the box must be put inside your main stylesheet (style.css) and not at some other place for custom codes.


Conclusion

The end result should look like this:

Mashable Inspired Sidebar Social Widget

And we're done! You can check the CSS code where I put some mark ups of what can be changed. All the best with this. Now you have something Mashable-ish on your site, with some customization as well.

Facebook page code source: Daddy Design

Keep in mind, this is just a starting point! Some of your advanced plugin devs out there might even have better ways of doing some of the stuff shown in this tutorial, so feel free to share your own comments and ideas in the comments section below! We'll be sure to update the tutorial if anyone has any great insights.

Tags:

Comments

Related Articles