Sean Vosler | Web Design & Other Stuff » Tutorials | Wordpress http://www.sean.co The Web Design, Social media guy! Wed, 08 Sep 2010 01:27:12 +0000 en hourly 1 Creating a Social Submit Sidebar for WordPress Guide http://www.sean.co/2010/01/creating-a-social-submit-sidebar-for-wordpress-guide/ http://www.sean.co/2010/01/creating-a-social-submit-sidebar-for-wordpress-guide/#comments Wed, 20 Jan 2010 21:51:40 +0000 Sean http://www.seanvosler.com/?p=85 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

You should be set! If you have any problems feel free to post a question and I’ll see if I can help!  Please share if you found this useful :)

]]> http://www.sean.co/2010/01/creating-a-social-submit-sidebar-for-wordpress-guide/feed/ 0