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.
Tell your users about it
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.