How to add and manage share buttons on the referral page and emails

Besides the easy-to-copy referral link your users can paste in to share anywhere, Prefinery also provides you the option to further personalize the referral page and email messages, and include easy-share buttons for specific sharing networks like Facebook and Twitter. 

How to add share buttons

To add share buttons on your referral page, from your project dashboard, navigate to Referral Page > Edit > Content tab and make sure to include the {{page.networks}} variable (it will automatically be displayed like a button) where you want the share buttons to appear and Save your changes. 

To add share buttons on your email message. from your project dashboard, navigate to Email > Messages > (find and edit email) > Content tab and make sure to include the {{msg.referral_buttons}} variable where you want the share buttons to appear and Save your changes. 

You can then navigate to Referral Page > Settings to enable/disable which share button you'd like to be displayed. 

Currently supported share networks are as shown in the screenshot above. 

Scrolling further down you'll find the option to set a pre-composed sharing message for the ones you've enabled. Due to varying platform policies and technical limitations, not all networks support pre-composed messages for sharing namely Facebook, Messenger, LinkedIn, and Reddit. 

For email share buttons: Unfortunately, Gmail, Outlook, Yahoo, and possibly other lesser known email clients do not support the SMS protocol sms:// used to create SMS links. Gmail and Yahoo completely strip the HREF attribute when you use it - this happens not only in the mobile applications but also in the web clients. On Outlook.com, the markup is automatically modified, deleting the entire link tag where share buttons may disappear from your email, remaining as only text strings without a link. 

Make sure to Save your changes when done. 

How to add your own custom share button

If you're looking to add your own share button, or perhaps add one that isn't supported in Prefinery yet, you can take advantage of our code injection support to add custom HTML, CSS and scripts to your campaign pages. Unsupported share options can be added by utilizing universally supported href URL formats. 

As an example, here's what a normal "Line Message" link could look like: 

<a href="https://line.me/R/share?text={text}{url}">Send Line Message</a>

...where  {text} is the pre-composed share message (e.g. Hello there! Check this out:) and {url} can be set to Prefinery's own referral link variable {{user.referral_link}}. That results into as follows: 

<a href="https://line.me/R/share?text=Hello there! Check this out: {{user.referral_link}}">Send Line Message</a>

When this kind of link is clicked, the user's device/system will automatically recognize that the user wants to open the relevant/supporting app to compose the message, and in the composer the share message and referral link are automatically added. 

Using the above link format and by utilizing the default HTML structure and styles used by Prefinery with some script, here's how you would add the custom button on your referral page:

1

From your project dasboard, navigate to Referral Page > Edit

2

Edit your referral page in HTML mode and at the end of it (after everything else) paste in the following HTML code: 

<li id="line"><a class="btn btn-lg btn-social btn-line" href="https://line.me/R/share?text=Hello there! Check this out: {{user.referral_link}}" target="_blank"><i class="fab fa-line fa-lg fa-fw" aria-hidden="true"></i><span class="pfy-share-network-label">Send Line Message</span></a></li><br>
	

Make sure to  Save your changes.

This <li> element is the same HTML structure used by supported share buttons, except for changes to the list item id (e.g. line), link class (e.g. btn-line), link href value (e.g. the share message and referral link), and <i> class (e.g. fab fa-line). For comparison, here's how the supported Facebook share button's code is like: 

<li id="facebook"><a class="btn btn-lg btn-social btn-facebook " href="https://www.facebook.com/sharer.php?u={{user.referral_link}}" target="_blank"><i class="fab fa-facebook fa-lg fa-fw" aria-hidden="true"></i><span class="pfy-share-network-label">Share</span></a></li>
	

3

Still in your project dashboard, navigate to Integrations > Code Injection and paste in the following script and CSS into the Head Code. Make sure all instances of the id (e.g. line) and link class (e.g. btn-line) are updated in the script and style tags. You may need to duplicate some lines in the code if you're adding multiple custom buttons and edit them accordingly. 

<script type="text/javascript">
    $(document).ready(function() {
        if ((window.location.href.indexOf("/referral") > -1) || (window.location.href.indexOf("/check_position") > -1) || (window.location.href.indexOf("/thank-you-page") > -1) || (window.location.href.indexOf("/new") > -1)) {
            const shareRow = document.getElementsByClassName('pfy-share-networks')[0];
            
            const lineButton = document.getElementById("line");
            
            /* use "append" instead of "prepend" if you want
               to add the custom share button at the end */
            if (lineButton) {
            shareRow.prepend(lineButton);
            }
        }
    });
</script>
<style>
    /* set button background-color */
    .btn-line { background-color: #06C755; }
</style>
	

Don't forget to  Save your changes. 

The script checks if the currently viewed page is the referral page and if so checks the page for the custom share button element then prepends it to the existing supported share buttons so it displays with them. The CSS is what gives the button its custom background color. 

That's it! You should now see the new custom share button added alongside other share buttons on your referral page: 

Please note that this method will not work with emails due to email clients not supporting scripts. Instead, you will need to write, style and hardcode your own custom share button into your own custom HTML email.