Saturday, April 30, 2022

Tutorial: Create Your Own Tabbed Social Widget

Tabbed Social Widget

See the Pen Social Tabbed Panel Widget by Nate Balcom (@nbalcom) on CodePen.

Creating your own tabbed social widget can save you valuable web real estate by combining your widgets into 1. The following code lives on CodePen and takes precious little tweaking to make it your own.

The following widget is set to a percentage. This will be one of the things you will want to tweak to fit your own website’s sidebar dimensions. It can be set to pixels if you don’t want or need it to stretch.

Combine All Your Favorite Social Networks Into 1 Tabbed Social Widget

In this tutorial I will explain how you can add your favorite social networks into a tabbed widget. In this example I have embedded Twitter, Facebook and Google+ into one tabbed unit.

These social networks all live inside list items. You can take the CSS and add it to an already existing style-sheet. First you’ll need to get the code for these widgets to make this widget your own.

Twitter Widget Code | Facebook Widget Code | Google+ Widget Code

Copy and Paste Tabbed Social Widget Code

Once you’ve collected your various widget codes you can apply them to your own personalized social widget. These will work for any other widgets you want to embed, but I started with the big three for an example.

Copy and paste the following HTML code into your template to start building your own tabbed widget. All styles can be changed below to to coincide with your site’s look and feel. You’ll need to add your own social widget code in the HTML to pull your information.

CSSHere’s where you can tweak sizes and colors to match your theme. Again this CSS can be added to an already existing style-sheet to keep things neat and tidy. If you’re using WordPress this code can be added to style.css.

JSAdjust the JS below to speed up or slow down how the drop down animation plays out. Adjust “125” below accordingly to speed up or slow down the slide up and down animation. This is set in nano-seconds. Increasing this number will slow down the animation. Decreasing will obviously speed it up.

Tabbed Social Widget Code on Codepen

If you want to try the code before you apply it to your site it lives at the link below. If you don’t already have a Codepen login you can sign up for one for free on the Codepen website.

Codepen provides you with a sandbox for trying out new pieces of code. It’s a great tool that any deveopler would benefit from. It’s a good way to share ideas with other developers.

See the Pen Social Tabbed Panel Widget by Nate Balcom (@nbalcom) on CodePen

Please Share Tabbed Social Widget

If this tutorial helped please share it on your favorite social networks below. You’ll be doing me a solid and earn yourself some good, much needed Internet karma. Happy coding.