How to Implement Ajax Floating Feature on Digg Digg WordPress Plugin

Digg digg WordPress Plugin is a social bookmarking tool for WordPress. This plugin has many features to make your blog easy to submit to various social network sites, including:

1. Digg
2. Reddit
3. Dzone
4. Yahoo Buzz
5. TweetMeme (twitter)
6. Facebook Share / Like
7. Polladium
8. StumbleUpon
9. Delicious
10. Sphinn
11. Post Comments
12. Google Buzz buttons
13. Designbump
14. Designfloat
15. The web blend
16. BogEngage

One that I love from this plugin is the Ajax Floating feature. Ajax Floating makes the buttons show at the left side of the post or page, scroll down as the people read the post. If you see the social network share buttons at the left side of each post on this blog, so that is the Ajax Floating. To use ajax floating, please refer to the official page of Digg Digg WordPress plugin, and see the faq section.

But, to implement ajax floating on your WordPress theme you need to configure the CSS margin-left and Javascript marginLeft scrolling position value. Due to the different theme layout design, high chance the pre-defined settings are not suitable.

After you have enabled ajax floating and selected which services / buttons you want to display, then you have to configure the initial position and scrolling position. Here’s example of mine:

Digg Digg WordPress Plugin with Ajax Floating Feature

Initial Position – This is the position where the buttons initial display, try change the default “margin-left” value to suit your theme.

.dd_ajax_float{
…
margin-left:-80px;
margin-right:0;
…
}

Scrolling Position – This is position where the buttons display while you scrolling the page, try change the default “marginLeft” value to suit your theme.

if ( scrollY > descripY && !fixedShare ) {
$postShare.stop().css({
position: ‘fixed’,
left: ’50%’,
top: 10,
marginLeft: -544
});
}

I’ve tried thrice until I found these values that are suitable with my WordPress theme.

Download Digg Digg WordPress Plugin