Advertisement
Widgets

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

by

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:

	<div class="sidefb">
	<script type="text/javascript" src="http://connect.facebook.net/en_US/all.js#xfbml=1"></script>
	<script type="text/javascript">FB.init("1690883eb733618b294e98cb1dfba95a");</script>
	<fb:fan profile_id="117354884961413" stream="0" connections="8" logobar="0" width="250" height="200" css="<?php bloginfo('stylesheet_url'); ?>?1" rel="stylesheet" type="text/css"></fb:fan> 
	</div>

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

<?php bloginfo('stylesheet_url'); ?>?1

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 :

https://www.facebook.com/pages/edit/?id=107493166410111

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:

<div class="sidesub">
<form action="http://feedburner.google.com/fb/a/mailverify" method="post" target="popupwindow" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=YOUR-ID-HERE', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true"><input type="submit" value="Subscribe" /><span><input type="text" style="width: 115px;
padding: 0px 0px 0px 0px;
vertical-align: middle;
font-size: 0.85em;
margin-top: -1px;
margin-left: 15px;" name="email" value="Email" onfocus="if(this.value==this.defaultValue)this.value='';" onblur="if(this.value=='')this.value=this.defaultValue;"/><input type="hidden" value="ariff" name="uri"/><input type="hidden" name="loc" value="en_US"/>
</span></form></div>

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.


<div id="sidesocial">
<div class="sidefb">
<script type="text/javascript" src="http://connect.facebook.net/en_US/all.js#xfbml=1"></script>
<script type="text/javascript">FB.init("1690883eb733618b294e98cb1dfba95a");</script>
<fb:fan profile_id="YOUR-PAGE-ID" stream="0" connections="8" logobar="0" width="250" height="200" css="<?php bloginfo('stylesheet_url'); ?>?1" rel="stylesheet" type="text/css"></fb:fan> 
</div>

<div class="sideg">
<div class="g-plusone" data-size="medium" data-href="http://YOUR-URL.com"></div><span>Recommend on Google</span>
<script type="text/javascript" src="https://apis.google.com/js/plusone.js"></script>
</div>

<div class="sidetw">
<a href="https://twitter.com/YOUR-TWITTER" class="twitter-follow-button">Follow @YOU</a>
<script src="//platform.twitter.com/widgets.js" type="text/javascript"></script>
</div>

<div class="sidesub"><form action="http://feedburner.google.com/fb/a/mailverify" method="post" target="popupwindow" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=YOUR-ID-HERE', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true"><input type="submit" value="Subscribe" /><span><input type="text" style="width: 115px;
padding: 0px 0px 0px 0px;
vertical-align: middle;
font-size: 0.85em;
margin-top: -1px;
margin-left: 15px;" name="email" value="Email" onfocus="if(this.value==this.defaultValue)this.value='';" onblur="if(this.value=='')this.value=this.defaultValue;"/><input type="hidden" value="ariff" name="uri"/><input type="hidden" name="loc" value="en_US"/></span></form>
</div>
</div>

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.

/*-----Facebook fanpage styling start-----*/
.fan_box a:hover{
  text-decoration: none;
}
.fan_box .full_widget{
  height: 200px;  
  border: 0 !important;
  background: none !important;
  position: relative;
}/** Change height here **/
.fan_box .connect_top{
  background: none !important;
  padding: 0 !important;
}
.fan_box .profileimage, .fan_box .name_block{
  display: none;
}
.fan_box .connect_action{
  padding: 0 !important;
}
.fan_box .connections{
  padding: 0 !important;
  border: 0 !important;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 11px;  
  font-weight: bold;
  color: #666;
}/** Change font-size here **/
span.total{
  color: #4a6cc1; 
  font-weight: bold;
}/** Change color here **/
.fan_box .connections .connections_grid {
  padding-top: 10px !important;
}
.fan_box .connections_grid .grid_item{
  padding: 0 10px 10px 0 !important;
}
.fan_box .connections_grid .grid_item .name{
  font-family: "lucida grande",tahoma,verdana,arial,sans-serif;
  font-weight: normal;
  color: #666 !important;
  padding-top: 1px !important;
}
.fan_box .connect_widget{
position: absolute;
bottom: 0;
left: 0px;
margin: 0 !important;
}
.fan_box .connect_widget .connect_widget_interactive_area {
margin: 0 !important;
}
.fan_box .connect_widget td.connect_widget_vertical_center {
padding: 0 !important;
}
/*-----Facebook fanpage styling end-----*/

#sidesocial{border: 1px solid #EBEBEB;}
.sideg{background-color: #EBF9E8;
font-size: .85em;color: black;padding: 9px 11px;line-height: 1px;border-top: 1px solid white;border-bottom: 1px solid #EBEBEB;}
.sidetw {background-color: #EEF9FD;padding: 9px 11px;line-height: 1px;border-top: 1px solid white;border-bottom: 1px solid #EBEBEB;}
.sidefb {font-size: .85em;color: black;padding: 9px 11px;line-height: 1px;border-top: 1px solid white;border-bottom: 1px solid #EBEBEB;}
.sideg span {margin-left: 2px;display: inline-block;vertical-align: text-top;color: #333}
.sidesub {padding: 9px 10px;line-height: 1px;background-color: #FFB86D;border-top: 1px solid white;}
.sidesub span {width: 115px;}

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.

Related Posts
  • Web Design
    Complete Websites
    Building the Responsive Timeline Portfolio PagePortfolio thumb
    During this tutorial we will be building the fantastic Timeline Portfolio as seen in an earlier tutorial by Tomas Laurinavicius. We will be using some responsive techniques as well as CSS3 animations, Sass and a little bit of jQuery.Read More…
  • Code
    HTML5
    HTML5: Battery Status APIPdl54 preview image@2x
    The number of people browsing the web using mobile devices grows every day. It's therefore important to optimize websites and web applications to accommodate mobile visitors. The W3C (World Wide Web Consortium) is well aware of this trend and has introduced a number of APIs that help with this challenge. In this article, I will introduce you to one of these APIs, the Battery Status API.Read More…
  • Web Design
    HTML/CSS
    Creating Friendlier, “Conversational” Web FormsForm retina
    Web forms are constantly a hot topic when it comes to web design and user interaction. The reasons for this are vast, but one of the more obvious reasons is that forms are the most basic way for a user to input information into your application. In this article, we'll discuss a few techniques that allow your forms to respond to the user's input, while helping to obscure unnecessarily confusing or overwhelming elements.Read More…
  • Web Design
    HTML/CSS
    Finishing Off the Merry Christmas Web App InterfaceXmas build 1 retina
    In this tutorial we will finish off our web app front-end so it all looks perfect and functions nicely on all screen sizes. Last time, we rounded off by styling the message boxes, leaving just the content left to do. Shall we dive right in? Ok!Read More…
  • Web Design
    HTML/CSS
    Building the Merry Christmas Web App InterfaceXmas build 2 retina
    Today we're going to build the Merry Christmas Web App Interface; a Photoshop layout from an earlier tutorial by Tomas Laurinavicius.Read More…
  • Web Design
    Email
    Creating a Simple Responsive HTML EmailEmail new rwd thumb
    In this tutorial I will show you how to create a simple responsive HTML email which will work in every email client, including all the new smartphone mail clients and apps. It uses minimal media queries and a fluid width approach to ensure maximum compatibility.Read More…