​PageObject: Share buttons

​The links for sharing on social media platforms work without JavaScript. This setting is recommended for privacy and speed reasons. Buttons are available for:

  • Facebook
  • Twitter
  • Tumblr
  • LinkedIn
  • XING

If you want to use script based plugins of your favorite social media platform feel free to include this code directly to your template section's code or let your editors include it via the HTML PageObject.

The generated links feature rel="external nofollow" attributes. They do not contain text or any inner HTML, but are intended for styling with background images.

HTML example (system generated)

<div class="fx_po_social">
    <a href="https://www.facebook.com/sharer.php?u=PAGE-URL&t=PAGE-TITLE" title="Facebook" class="fx_social_button fx_social_facebook" rel="external nofollow"></a>
</div>

​CSS example (boilerplate)

​​Feel free to refer to the sprite file (background-image) of the CSS example. Future updates of our file will be stored with an incremented file number, so your CSS will never fail.

a.fx_social_button {
    display: inline-block;
    width: 40px;
    height: 40px;
    border-radius: 100%; /* remove this line for square icons */
    background-image: url('https://pixolino.com/images/po_sprites_2.png');
    background-size: 286px 163px;
    border: none !important; /* as we render the buttons as links, be sure to exclude any text styling like bottom borders etc. */
}
a.fx_social_twitter {
    background-position: 0 0;
}
a.fx_social_facebook {
    background-position: -82px 0;
}
a.fx_social_tumblr {
    background-position: -123px 0;
}
a.fx_social_linkedin {
    background-position: -164px 0;
}
a.fx_social_xing {
    background-position: -205px 0;
}
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
        a.fx_social_button {
            background-image: url('https://pixolino.com/images/po_sprites_2@2x.png');
        }
}
@media (-webkit-min-device-pixel-ratio: 3), (min-resolution: 288dpi) {
        a.fx_social_button {
            background-image: url('https://pixolino.com/images/po_sprites_2@3x.png');
        }
}
​This PageObject renders as block element.

​Demo content

Available parameter:

  • platforms: [array] List of displayed share buttons. Available options are “facebook”, “twitter”, “tumblr”, “linkedin” and “xing”. Optional, default is “facebook” and “twitter”.

Configuration example

{{ fx_page.slot("SLOT_NAME", _context, {"content": [
   {"type": "sociallinks", "config": {"platforms": ["facebook", "linkedin", "xing"]}}
] }) }}
​For more details how to implement demo content please refer to the Demo Content Documentation.