Buttons has floating effect while user scrolling down the browser, see this page “left floating buttons” for demonstration.
1. Status
User have to check the “Enable Floating Display” option, click on the “Save Changes” button to enable this functionality.
If checked, “Enabled” in color blue is displayed; otherwise, “Disabled” in red color is displayed.
In “Disabled” mode, all settings in this page will be ignored, and no button will be displayed.
2. Display Configuration
This control how and where to display your selected buttons.
2.1. Buttons are display in vertical order.
In floating mode, buttons are only display in vertical order. Should it need a horizontal order?
2.2 Buttons are allow to display in…
Multiple selections are allowed. It means selected buttons are allow to display in your WordpPress “Home”, “Post”, “Page”, “Category”, “Tag” or “Archive”. For example, if you checked “Home” and “Post”, your buttons will be display in “Home” and “Post” page only.
2.3 Display in “Post” under categories…
This option is available if section 2.2 “Post” is checked. Control selected buttons to display or exclude in certain post categories.
-
Include example
If user select “Include”, and put “hosting”, “shared” and “vps”, then selected buttons will displayed posts which under categories “hosting”, “shared” and “vps” only. -
Exclude example
If user select “Exclude”, and put “misc” and “others”, then selected buttons will displayed posts which IS NOT under categories “misc” and “others”.
2.4 Hide buttons if browser’s width < configurable value
If user’s browser width is less than the user defined “configurable value” (in px), the selected floating buttons will be hidden. By default, it will hide the floating buttons if the browser width is less than 790px, in mobile device, the browser width is usually less than the default value, so, the floating buttons will be hidden.
3. Buttons Selection
Select which buttons you want to display.
Website
Official Buttons provider website. Click on the link to see how the button look like.
Weight
Control which buttons has more priority to display. In simple, if few buttons are selected, higher weight button is display first, orderly.
Ajax Floating
Identify which button is going to display.
Lazy Loading
Load all your content first, then only load the selected buttons, best for optimize website performance. However, not all buttons are allow to do this.
For example,
You did below configuration, see figure above.
Goolge +1
- Weight = “100″
- Ajax Floating = “checked”
- Lazy Loading = “checked”
- Weight = “99″
- Ajax Floating = “checked”
- Lazy Loading = “checked”
Facebook Like (IFrame)
- Weight = “98″
- Ajax Floating = “checked”
- Lazy Loading = “checked”
Other buttons, “Ajax Floating” all unchecked, means do not display it.
Result
Goolge +1, Twitter and Facebook Like (IFrame) buttons are display at left of the page, with floating effect while user scroll down the browser. Google +1 (weight=100) displayed first follow by Twitter (weight=98) button, Facebook Like (IFrame) (weight=94) button, with lazy loading enabled. See figure below :
4. Extra Integration
Append extra functionality at the end of the floating buttons, so far it support “send” email and “print” article service.
4.1. Email Button
Digg Digg is integrated ShareThis.com email service, to use this service, you need to register at ShareThis.com (it’s free!) to obtain your ShareThis Publisher ID.
4.2 Print Button
Button to print the current page.
5. Ajax Floating Configuration
Too many WordPress Themes, with different kind of layout design, causing the default buttons implementation may not suitable. Often times, you may need to change the “Initial Position” and “Scrolling Position” below.
The floating buttons position is control by the “Initial Position”, via CSS, and the auto scrolling effect is control by the “Scrolling Position”, jQuery (JavaScript framework) to change the CSS position automatically. For experienced web developer, you can use firebug to check the value and change it accordingly.
The default configurations is well tested in standard WordPress’s “Twenty Ten” theme.
5.1 Initial Position
This is the position where buttons first display, often times, you may just need to change default “margin-left:-120″ value to suit your theme layout.
This is the default value. The floating buttons will appear left of your post, defined. by “margin-left:-120px” and “margin-top:10px”.
#dd_ajax_float{
background:none repeat scroll 0 0 #FFFFFF;
border:1px solid #DDDDDD;
float:left;
margin-left:-120px;
margin-right:10px;
margin-top:10px;
position:absolute;
z-index:9999;
}
See figure for “margin-left: -120px”
Now, change the margin-left to -200px, “margin-left: -200px”
#dd_ajax_float{
background:none repeat scroll 0 0 #FFFFFF;
border:1px solid #DDDDDD;
float:left;
margin-left:-200px;
margin-right:10px;
margin-top:10px;
position:absolute;
z-index:9999;
}
See figure for “margin-left: -200px”
The bigger negative value, move buttons more toward left; bigger positive value, move buttons more toward right.
5.2 Scrolling Position
This is the position where buttons display while you scrolling the page, try change the default “top:16″ value to suit your theme layout.
This is the default value.
jQuery(document).ready(function($){
var $postShare = $('#dd_ajax_float');
if($('.dd_content_wrap').length > 0){
var descripY = parseInt($('.dd_content_wrap').offset().top) - 20;
var pullX = $postShare.css('margin-left');
$(window).scroll(function () {
var scrollY = $(window).scrollTop();
var fixedShare = $postShare.css('position') == 'fixed';
if($('#dd_ajax_float').length > 0){
if ( scrollY > descripY && !fixedShare ) {
$postShare.stop().css({
position: 'fixed',
top: 16 // CHANGE THIS VALUE
});
} else if ( scrollY < descripY && fixedShare ) {
$postShare.css({
position: 'absolute',
top: descripY,
marginLeft: pullX
});
}
}
});
}
});
See figure for “top: 16″.
Now, change the top value to 100, “top: 100″. See below figure for “top: 100″.
6. Credit Link
By default, it will display a digg digg credit link at the end of the buttons. Consider before remove this credit link, much appreciated 
.
7. Reset Floating Display Settings
Reset all values in this “Floating Display” page to the default value.
Pingback: Digg Digg – FAQs | DiggDigg Official Site
Pingback: 워드프레스 움직이는 소셜 버튼 달기 Digg Digg | HwangC
How do I reduce the size of the buttons themselves?
Good Grief! DiggDigg certainly doesn’t describe or do justice to the wonderful plugin. The on page view is a bit quirky, but the floating view is the best.
So I have been trying to tweak the margin left, but no matter what I change, the floating display does not budge. Has anyone else had this problem? I am pretty new at this so I may be doing something wrong. Thanks for your help.
use Firebug from firefox to tune your optimal value.
Like above, I can’t seem to move the floating vertical display no matter what numbers I plug in! I’m using Chrome. Any help would be appreciated.
Seriously, that’s kind of a non-answer. People are asking for help and you’re telling them to do something that they probably have no idea what it is. Like me, I’ll open firbug and then what? It would be very much appreciated if you would tell people what settings to look for within firebug to help solve the problem we are having. Thanks
Please post question in support forum.
I have just installed the plugin. Floating display works fine when page loads. but when I scroll down and then scroll up, The widget still remain at the bottom of the page. Something am I missing?
Have a look at this post for demo.
http://www.xpertdeveloper.com/2011/07/rename-htaccess-file/
use Firebug plugin from firefox to tune your optimal value.
So I have been trying to tweak the margin left, but no matter what I change, the floating display does not budge. Has anyone else had this problem? I am pretty new at this so I may be doing something wrong. Thanks for your help…
…the same from here
Why does the float position differ on single.php and index.php?
Hi, great plugin, its just that i have one issue. The size of the floating bar is huge, is there anyway i can use the compact versions?
Thanks in advance!
Thanks for a great plugin! Just installed is and everything works just perfectly…
Works great! I think its a great plugin. Just one problem. It works for me but I’ve heard other people saying they cant see this on their computers. I can see it on mine but it does not seem to show on theirs. Can anyone help me out with this?
Hello, I seem to be having a small problem with the plugin. Other than all the love I have for it and how amazing it is, my problem is quite simple. I’ve checked the option for the plugin to show on my home page, but it doesn’t. Any clues?
hmmmm…
I have installed the widget and reset the offsets. Works fine except for when I scroll, the widget scrolls also… instead of remaining stationary….? Any ideas please
Thanks
How do I change it so I can have it scrolling on the right hand side?
Is there an option to exclude the floating buttons from single “pages” or just to include them in specific pages?
It might be an idea to add some exclude option for pages too.
Thanks for the best social voting plugins
Hey,
Hope all is well.
I Installed the plugin and the regular buttons work fine. I can not get the floating buttons to work. Can you please assist me with this. I have looked at 4 youtube videos and did the step by step in your guide. Nothing works. Can you help?
Thanks.
My site is http://www.EugeneHennie.com you can see the regular buttons in any of the posts working fine. But no Floating ones