Creating a Social Submit Sidebar for WordPress Guide
Do you ever see those ‘social sidebars’ on sites and ever think, man I really want one like that! We’ll your in luck! This tutorial will give you a step by step in both video and written form. Feel free to post any questions or problems you run into and we’ll see if we cant figure it out!
[View in high def. for best quality! Mmmm.. 720p]
Tutorial Requirements: WordPress & Copy / Paste skills (CSS + HTML Helpful)
Time Required: Under 5 Minutes
Step 1: Install “Digg Digg” Social Submitting Plugin
This plugin is very well done, I haven’t had any problems – it contains the main social media and aggregating sites that we all know and love. Its Facebook and Twitter submitting buttons are my favorite, they will automatically post based on the URL that the viewer is on.
Note: You can configure Digg Digg to load at the bottom of pages and posts, and use code to put them where you like, which is what we’re doing!
Step 2: Go to your CSS file under Appearance > Editor > [your theme's file].css
Here on the right you will see a list of your files, it may look intemidating, but don’t worry! Its not that painful, just a little Copy & Pasting!
Near the bottom (usually) you’ll see a styles.css or some file that ends with CSS, open this file and past the following code under the themes authors comments… Make sure its not inside a /* comment *\ line of code.
#floatrightbar{
float: right;margin: 0 0 10px 10px;border: 0px solid #666;padding:2px;padding-left:72px; width:125px; height:500px;position:absolute;z-index:99;top:0px;right:0px;
background-image:url(‘http://vezign.com/wp-content/uploads/2010/01/bg-marker2.png’);background-repeat:no-repeat;background-position:top center;
}
Update your file at the bottom.
NOTE: You may want to host the bg-marker2.png on your own server just in case I move it around, the file is at the bottom under resources.
Step 3: Go to your themes Header.php File
Same area as before, but this time you want to be in the ‘header.php’ file, find the <body> or a ‘wrapper’ type DIV and paste the following code AFTER it:
<div id=”floatrightbar”>
<script type=”text/javascript”>function deleteline(buttonObj)
{
var node = buttonObj;
do
{
node = node.parentNode;
}
while
(node.nodeType != 1 && node.nodeName != ‘div’);
node.parentNode.removeChild(node);
}
</script><a href=”http://vezign.com/”>Web Design</a><br><br>
<?php if(function_exists(‘digg_digg_twitter_generate’)) { digg_digg_twitter_generate(‘Normal’,'source’); } ?><br><br>
<?php if(function_exists(‘digg_digg_fbshare_generate’)) { digg_digg_fbshare_generate(‘Normal’); } ?><br>
<?php if(function_exists(‘digg_digg_generate’)) { digg_digg_generate(‘Normal’); } ?><br>
<?php if(function_exists(‘digg_digg_reddit_generate’)) { digg_digg_reddit_generate(‘Normal’); } ?><br>
<?php if(function_exists(‘digg_digg_stumbleupon_generate’)) { digg_digg_stumbleupon_generate(‘Normal’); } ?><br>
<?php if(function_exists(‘digg_digg_delicious_generate’)) { digg_digg_delicious_generate(‘Normal’); } ?><br>
<input type=”button” onclick=”deleteline(this)” value=”Hide” />
</div>
The Javascript basically just removes the DIV when the button “Hide” is hit, you can change things around, but This is the basic code! Customize it all you like 
Update your file at the bottom.
Step 4. Test – Hope it works!
Resources:
Javascript Code from: Here
Digg Digg Plugin from: Here
Image for Background of Bar: Here
Web Development / Design
Custom Photography
Site Re-Design
