The shiny new XING share button – How to implement it in your blog or website

By Victoria Schiffer, Software Engineer and Annika Tanudjaja, Junior Software Engineer.

Have you come across XING’s new share button with its enhanced statistics regarding shares, comments, clicks and more on a website you visited recently? Maybe you were wondering if you could implement it on your own website, too? Well we’ve got good news for you because you can! Here’s how to do it:

Share Button Builder

Go to the share button page that’s also available via the footer on www.xing.com to find the best button style for your site and to configure it to meet your needs.

Step 1 – Pick your favourite layout

Maybe you want to add a counter and our newly available statistics’ hovercard to your share button, or just stick with a simpler version for smaller spaces on your website. Either way, you can choose the layout that works best for you.

Share button with counter and statistics’ hovercard

The share button with a counter (available both in vertical and horizontal styles) shows the total number of shares for this link on XING. Our new hovercard offers additional statistics such as the total number of clicks, likes and comments for the link on XING. If you’re an Internet Explorer user, you’ll need to have IE 8 or higher to be able to access the hovercard. Anyone with a lower IE version will still be able to see the share button and counter, but without the hovercard.

Simple share button

The simpler version of our share button provides you with three layouts, each with a different size, to meet your needs.

Step 2 – Enter an optional URL

Usually you can leave the “Other URL” field empty and should only add a custom URL if you want to share a page other than the one showing the button. This may be of use to you, e.g. if you want to add separate buttons for various content on a single page. If you don’t add an “Other URL” here, all of the share buttons would share the same overview page along with the same statistics.

If the field is empty, the current website’s link is what will be shared on XING. So if you only want to share the website that displays the button, skip this part and go to the next step where you can select the button’s language.

Things to consider when adding a custom URL

If you enter a URL in the “Other URL” field, this is the link that will be shared on XING. Do not encode the URL as we encode it again before redirecting to the XING share form. If you encode it, it would be encoded twice, hence leading to an invalid link that cannot be shared on XING.

Step 3 – Select the button language

The share button is available in German and English, and this applies both to the button’s tooltips and the hovercard’s tooltips as well as the link on the hovercard.

Step 4 – Share button preview

In the preview section you can see how the share button will appear on a website – with all its functionality – in exactly the same way you customized it. So if you choose a share button with a counter and enter an optional “Other URL”, the preview will show the exact shares and statistics on XING for your given URL.

Step 5 – Copy the code to your website or blog

The code displayed needn’t be changed once you have customized your share button with the options stated above. So now all you need to do is copy and paste the code and then add it to your website’s HTML source code.

Things to consider when adding the code to your website

Please be aware of any erroneous escaping of the code by webdesign software or so called WYSIWYG editors and content management systems. If the code is escaped in any way, the share button might not be displayed or work properly. If you run into any problems you should check your HTML source code. The <script> tags should look exactly like the ones you copied from our site and shouldn’t be wrapped with quotes.

Step 6 – Adding data protection information to your privacy policy

We do not save any of your personal data when you access a website with the XING share button. We do not store IP addresses, nor do we use cookies to monitor your behavior with regard to the XING share button. For the latest privacy policy regarding the XING share button, just visit https://www.xing.com/app/share?op=data_protection.

Tell your users about it

You might want to inform your users about the safe and data protection friendly share button placed on your website. If so, just add the text recommendation to your privacy policy which is displayed after clicking on the share button page‘s “XING Privacy Policy text” link.

Step 7 – Enjoy the XING share button on your website

If you chose one of the counter options for your share button you will be able to offer the statistics hovercard to your users which provides a link to the detailed statistics page on XING.

Link statistics

Here you can check out the latest statistics for links shared and posted on XING. When entering the site by clicking on the hovercard’s link you will see detailed statistics for the page you came from. In addition, you can get statistics for any webpage by copying its address, pasting it into the URL field and clicking on “Search”.

Statistics for links you shared on XING

Your share statistics page lets you check out the latest statistics (e.g. the total number of shares, comments, likes and views) for all the links you posted on XING. You can access this page from the link statistics site.

Additional information

We cache the share counters and detailed statistics for every page. At the moment these values are updated every 5 minutes. If you share a link the caches for this website are purged and the numbers are updated. However, new likes, comments and clicks will still be updated in 5-minute intervals.

Feedback

How do you feel about the new share button? What do you think about the additional link statistics? What is your experience having implemented the button on your website? We would love to hear from you so we can make this feature even better.

Have fun with our new share button!

Troubleshooting

If you added the share button by following the above steps and are still experiencing layout problems, we recommend you have a look at the following points:

Q: Why is my share button hovercard not displayed in full (i.e. cropped either on the right-hand side or the bottom)?

A: The HTML element containing the share button might contain some CSS styles that limit the share button’s hovercard layout. Please give the following two solutions a try:

1. Check the element wrapping the XING share button for styles that might interfere with the button (e.g. remove the style attribute “overflow:hidden”).
2. Provide a dedicated
   element that wraps the share button on your web page. Once this element exists, you can change its styles to meet your website’s layout (e.g. “display:inline-block”, “float:right”).

Q: After adding the XING share button I get an error when validating my page (e.g. with the “W3C validator”). It was valid before, so what went wrong?

A: The XING share button code is written in HTML5. Your code might specify a doctype that uses an older HTML version, so please check the DOCTYPE tag in your HTML source code for a specific HTML version. In HTML5 no further doctype attributes are needed. Your DOCTYPE tag should therefore look like this: <!DOCTYPE html>

WordPress Integration

To add the XING share nutton functionality to your WordPress blog, go to the admin section of your blog and click on “Settings” -> “Sharing”. There you’ll find a section called “Available Services” with a link called “Add a new service”. Click this link and fill in the form using the data given below:

1. Service name: XING
2. Sharing URL: https://www.xing-share.com/app/user?op=share;sc_p=xing-share;url=%post_full_url%
3. Icon URL: https://www.xing.com/img/sections/share/share_button_16x16_v1.png

Click on “Create Share Button” when you’re finished.

Afterwards, drag and drop the WordPress button for sharing on XING from “Available Services” to “Enabled Services”. This will then show you the final share button in the “Live Preview”.

Now all you need to do is confirm your settings with the “Save Changes” button.