Finding reference div with Firebug in Firefox browser

The first and the most important thing you have to do in order for the ShareThisBar plugin to show up is to find the div page element which will serve as the reference element for positioning the ShareThisBar, the reference div.

IMPORTANT - There is no more need to look for reference div for the ShareThisBar social media plugin for Joomla to work. Reference div plugin parameter is no longer needed, since plugin version 3.0. As soon as you install the ShareThisBar social plugin and enable it - it works. A few minor adjustments could be needed to tweak the ShareThisBar position correction parameters.

For this task we will need one of the web developers tools called the Firebug, which we must install for the Firefox browser. In case you use the Google Chrome browser it has similar tool already included. Finding the reference div in the Google Chrome I'll explain in the separate article.

If you already have the Firebug you can go to the step 3.

  1. Get the Firebug for your browser(Firefox). Go to http://getfirebug.com/downloads and below latest version click on the download link.

    You'll get this screen for the Firefox browser, click on Add to Firefox button.

    Click on Allow.

    Click on Install Now.

    Restart Firefox.

  2. The Firebug is installed, now to activate Firebug you can click on a bug in upper right corner of the Firefox browser.

  3. Let's find the reference div which is important for the ShareThisBar plugin to show up. Here is how to do this.

    After click on the bug you will see Firebug window at the bottom of your screen.

    To work more easily with Firebug click on the Open Firebug in New Window button in the upper right corner of the Firebug window.

    The Firebug window.

    In the Firebug window click on the button Click an element in the page to inspect.

    After that, position the cursor on your site page and find a div page element which is the most suitable as your reference div, the element which width encompasses all the site content and which height is suitable enough for the ShareThisBar vertical movement.

    When you move the cursor across the page, the blue border rectangle will show up around the page elements denoting the various page elements. When you find the suitable element with adequate width and height, which will be the reference for your ShareThisBar position and movement, click on it.

    Click again on the Firebug window to open it and you will see the page element, which you selected a minute ago, shaded with the blue color. This is your page element which will be the reference element for the ShareThisBar. The ID attribute of this element, contentarea, you should enter into the plugin parameter field Reference div id.

    If you move your cursor over the elements shown in the Firebug window, you will see how the blue window encopasses the hovered page elements. If you move cursor in the Firebug window over the div with id=contentarea, the blue window will show up on your web page encompassing the div and denoting the size of the div element.

  4. Close the Firebug window and open the Joomla administrator window, the ShareThisBar plugin configuration page. Enter the founded reference div ID attribute into the plugin parameter field Reference div id.

    Click the Save button to preserve the plugin parameters changes.

    Open your web site in the browser and the ShareThisBar should work. Scroll down the page to see how it behaves.

    .

Now you can fine-tune the other plugin parameters if you want. For each plugin parameter, when you hover with the mouse over the name of parameter, there will be shown a tip with detailed desription what this parameter is for and how to adjust it.

The extra details how to modify the other plugin parameters are provided in the article named Tweaking sharethisbar configuration options.

The article about how to find the reference div with the Google Chrome browser is here.

Additional information