​PageObject: Social Media Profiles (BETA feature)

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

  • Facebook
  • Twitter
  • Instagram
  • LinkedIn
  • XING

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_profile">
    <a href="https://facebook.com/yourname" title="Facebook" class="fx_profile_button fx_profile_facebook" rel="external nofollow"></a>
    <a href="https://www.twitter.com/yourname" title="Instagram" class="fx_profile_button fx_profile_googleplus" 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_profile_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_profile_twitter {
    background-position: 0 0;
}
a.fx_profile_facebook {
    background-position: -82px 0;
}
a.fx_profile_linkedin {
    background-position: -164px 0;
}
a.fx_profile_xing {
    background-position: -205px 0;
}
a.fx_profile_instagram {
    background-position: -246px 0;
}

@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
        a.fx_profile_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_profile_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 profile links. Available options are “facebook”, “twitter”, “instagram”, “linkedin” and “xing”. Optional, default is “facebook” and “instagram”.
    Example configuration:
    "platforms": ["facebook", "linkedin", "xing"]

Configuration example

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