JavaScript API Methods \ Share Dialog

The Share Dialog gives your users the ability to publish an individual story to their social network account. The service leverages our Social Login service to authenticate the user and then either displays a fully customizable share dialog or redirects the user to the social network to share the content.

Example

        <a href="#" id="share-dialog-facebook">Share On Facebook</a>
        <a href="#" id="share-dialog-twitter">Share On Twitter</a>
        <a href="#" id="share-dialog-linkedin">Share On LinkedIn</a>
         
        <script type="text/javascript">
            var _oneall = _oneall || [];                              
            _oneall.push(
                ['share_dialog', 'set_link', 'https://www.oneall.com/services/user-engagement-solutions/share-dialog/'],
                ['share_dialog', 'set_message', 'The OneAll Share Dialog gives your users the ability to publish an individual story to their social network account. The service leverages Social Login to authenticate the user and then either displays a fully customizable share dialog or redirects the user to the social network to share the content.'],
                ['share_dialog', 'set_image', 'https://secure.oneallcdn.com/img/services/share-dialog/screenshot.png'],
                ['share_dialog', 'attach_onclick_display', 'share-dialog-linkedin', 'linkedin'],
                ['share_dialog', 'attach_onclick_display', 'share-dialog-twitter', 'twitter'],
                ['share_dialog', 'attach_onclick_display', 'share-dialog-facebook', 'facebook']
            );
        </script>
    

JavaScript API

Sets the url of the page to be shared and enables or disables the URL shortener.

    /* Usage 
     *  <page_url> : string (defaults to the url of the current page)       
     *  <enable_url_shortener> : boolean (defaults to true) 
     */ 
    _oneall.push(['share_dialog', 'set_link', <page_url>, <enable_url_shortener>]);

    /* Example */
    _oneall.push(['share_dialog', 'set_link', 'https://www.oneall.com/']);
    

set_message

Sets the message to be shared on the social network and enables or disables the possibility to change the message before sharing it.

    /* Usage 
     *  <message> : string
     *  <allow_modification> : boolean (defaults to true) 
     */ 
    _oneall.push(['share_dialog', 'set_message', <message>, <allow_modification>]);

    /* Example */
    _oneall.push(['share_dialog', 'set_message', 'Hello World']);
    

set_image

Sets the image to be attached to the shared content. If left empty, the Share Dialog will try to parse the og:image property of the shared page and then use that image if available.

    /* Usage 
     *  <image> : string (a complete URL pointing to an image file, defaults to autodetection) 
     */ 
    _oneall.push(['share_dialog', 'set_image', <image>]);

    /* Example */
    _oneall.push(['share_dialog', 'set_image', 'https://secure.oneallcdn.com/img/services/share-dialog/screenshot.png']);
    

set_custom_css_uri

Specifies the URL of a CSS stylesheet to be used in the Share Dialog and allows you to customize the look and feel of the widget. This method also accepts protocol-relative URLs.

    /* Usage 
     *  <custom_css_uri> : string (a complete URL pointing to a CSS file on your server)
     */ 
    _oneall.push(['share_dialog', 'set_custom_css_uri', <custom_css_uri>]);

    /* Example */
    _oneall.push(['share_dialog', 'set_custom_css_uri', '//www.your-example-website.com/oneall/share-dialog.css']);
    

set_callback_uri

Sets the URL of the page to redirect the user to after having shared the post on his social network profile. If left empty, the Share Dialog simply closes and the user stays on the same page.

    /* Usage 
     *  <callback_uri> : string (a complete URL)
     */ 
    _oneall.push(['share_dialog', 'set_callback_uri', <callback_uri>]);

    /* Example */
    _oneall.push(['share_dialog', 'set_callback_uri', 'https://www.oneall.com/thank-you-for-sharing/']);
    

attach_onclick_display

Adds and onclick event to the specified HTML element. When a user clicks on that element, the Share Dialog will be displayed and prompt the user to share content to the specified social network.

    /* Usage 
     * <element-id> : string (identifier of an HTML element)
     * <provider> : string (identifier of the social network to share the content to)
     */
    _oneall.push(['share_dialog', 'attach_onclick_display', <element-id>, <provider>]);

    /* Example */
    _oneall.push(['share_dialog', 'attach_onclick_display', 'share-dialog-twitter', 'twitter']);
    /* Example container: <div id="share-dialog-twitter">Share to Twitter</div> */

display_dialog

Displays the Share Dialog and prompts the user to share content to the specified social network.

    /* Usage 
     * <provider> : string (identifier of the social network to share the content to)
     */
    _oneall.push(['share_dialog', 'display_dialog', <provider>]);

    /* Example */
    _oneall.push(['share_dialog', 'display_dialog', 'twitter']);

User Contributed Notes