Social Share Bar

❗️

Feature Deprecation Notice

As of March 31, 2025, Viafoura will no longer be supporting this version of the Social Share Bar as we will soon be introducing an updated version that will be fully WCAG AA 2.2 compliant and provide your community with more flexible options.

Introduction

The Article Share Bar allows users to share a specific article to the most popular social media platforms such as Reddit, Facebook or Twitter and even through email. This lightweight tool can be placed above or below your article and pairs with the total share counter.

Step 1: Add the share bar code to your page

This is an example of your starting code snippet. The parameters are customizable.

<div class="viafoura">
    <div class="vf-widget vf-share-bar-default"
    data-widget="sharebar"
    data-button-view="false"
    data-show-labels="false"
    data-show-counters="true"
    data-show-total="true"
    data-path="/">
    </div>
</div>

Rendered Example

If you want the share bar or share button to sit inline with other elements on your page, you can add another class to the viafouraparent element that will change its display property to display: inline-block.

.viafoura.inline-block {
    display: inline-block;
}

Step 2: Define custom parameters

📘

Note

The services displayed in the share bar and the order in which they appear can be configured in your admin settings at https://admin.viafoura.co/.

Step 3: Customize the look and feel

You can apply predetermined styles to the share bar by adding these classes to the vf-widget element. These styles will show when hovering over a chosen icon.

Icon Shape
These classes will affect the shape of the icons in the share bar. You can apply only ONE of these classes to the vf-widget element.

📘

Note

By default, the color of each icon is set to the brand color of the sharing service it represents. You can also apply a predetermined color scheme using any of the classes listed below, or apply your own CSS styles to the share bar icons.

If data-button-view is set to true, which renders the single share button, these classes will apply to the share icons in the dropdown menu (on desktop) or the fullscreen modal (on mobile) that is displayed when users interact with the share button.

Orientation

If data-button-view is set to true, which renders the single share button, this class will apply to the share icons in the dropdown menu that is displayed when users hover over the share button on desktop.

Borders

Share Button View
You can display a single share button instead of a full share bar on your page by setting data-button-view = true on the vf-widgetelement. The share bar will appear as a dropdown menu when the user hovers over the share button.

<div class="viafoura">
    <div class="vf-widget vf-share-button-default vf-share-bar-default"
    data-widget="sharebar"
    data-button-view="true"
    data-show-labels="false"
    data-show-counters="true"
    data-show-total="true">
    </div>
 </div>

Rendered Example

Icon Styles: Share Button View

The color of the share button icon is set to black by default, but you can override this property using your own CSS styles. Find out more here.

Styling the Icons in the Share Dropdown Menu
You can add any of these classes to the vf-widget element to style the dropdown menu:

If none of these classes are added to the vf-widget element, and data-button-view = true, the icons in the dropdown menu will inherit the shape of the share button.

Show/Hide Share Counts: Share Button View

Desktop and Mobile Behaviors: Share bar
The sharebar detects mobile users based on user-agent and displays a slightly different interface for them. The rational for this approach to mobile detection is that we can never know what responsive breakpoints a client might. Therefore we make no attempt to try to force clients into a specific page width that should be considered "mobile".

Horizontal Share bar

Shortened Share Bar

Fullscreen Modal

Share Button

Desktop Rendered Image

Mobile Rendered Image

Link Sharing Service

Desktop Image Rendered (if Flash is enabled)

Desktop Image Rendered (if Flash is unavailable)

Smartphone and Tablet

Switch to Button View on Window Size
Because on desktop there are only full views and button views, it may sometimes be useful to render the button view on small window sizes. To allow clients the most flexibility, we have not made any decisions for you on this integration. Instead we suggest adding a function to dynamically determine which display to use such as the following (assumes jQuery):

<script>
        window.vfAsyncInit = function(){
            // Do the resize
            function doResize(e) {
                var limit = 500; // Width in pixels at which to switch to button view
                var windowSize = $(window).width();
                var myShareWidget = $('#myShareWidget');
                var isButton = myShareWidget.attr('data-button-view');
                isButton = !!(isButton && isButton.trim() === "true");

                // This is the important logic that triggers the change to button
                // view and re-render
                if (windowSize <= limit && !isButton) {
                    myShareWidget.attr('data-button-view', "true");
                    viafoura.reset();
                }
                else if (windowSize > limit && isButton) {
                    myShareWidget.attr('data-button-view', "false");
                    viafoura.reset();
                }
            }

            // Call once on first page load
            doResize();

            var timeoutId;
            $(window).on('resize', function(e) {
                // Debounce the function
                clearTimeout(timeoutId);
                timeoutId = setTimeout(function() {
                    doResize(e);
                    timeoutId = undefined;
                }, 250);
            });
        };
    </script>