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 ;).
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:
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.
Comments