Social media tabs should be used.
Today’s tutorial will be on how to open social media pages in a new window. The goal of all retailers and merchants is to keep a user, and potential customer, on their site for as long as possible. Therefore social media buttons that are there to allow users to interact with their brand but open a new page in the same or a new tab can be highly damaging to conversion rates as they take the user away from the website.
At InventCommerce we use a simple trick that, instead of opening a new tab or opening the Social Media pages in the same tab, we open the Social Media page in a new window in front of the current window. It’s a very simple trick, but definitely useful in today’s internet age.
To implement this simple trick use the following code:
<p><strong>Follow Us</strong></p><ul><li> <a class="facebook" href="#" onclick="window.open('[INSERT SOCIAL MEDIA LINK HERE]', '_blank', 'left=100,top=50,scrollbars=1,height=500,width=970');return false;">facebook</a></li><li><a class="twitter" href="#" onclick="window.open('[INSERT SOCIAL MEDIA LINK HERE]', '_blank', 'left=100,top=50,scrollbars=1,height=500,width=970');return false;">twitter</a></li></ul>
The <p> tag is for the header. This is followed by a <strong> tag to make the header bold. It says “Follow Us” but you can change this to anything you want.
We have Twitter and Facebook here so we use a <ul> tag (unordered list). This is followed by our <li> tag (our two list items).
Inside each of the list items we have our <a> tag which we have given class names of the corresponding social media outlets. The <a> tag is used to define a link and they are given classnames so we can use CSS to apply a “background-image” to the class.
The “background-image” would be the icon of the social media outlet. The “href” attribute is usually used to define the web address of where the <a> tag should go, but we are just going to add a “#” because we are going to use the “onclick” event to tell our browser where to go.
The “onclick” event uses the window.open() function with a few parameters to tell the browser where to go and what to do. Let’s go through them one by one:
The first parameter (‘[INSERT SOCIAL MEDIA LINK HERE]’) is where the URL of your social media outlet should go.
The second (‘_blank’) just tells the browser that it should open a new window.
This method has been tested with popup blocking extensions and still functions as expected. I hope this helped you; it is really easy to implement change that can bring some great benefits to your eCommerce store. See you soon for another instalment of Tim’s Tutorials.