Tim's Tutorials: Social Media Tabs That Work For You

Star InactiveStar InactiveStar InactiveStar InactiveStar Inactive
 

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.

The third is a grouped set that defines the position and size of the window. It is very self explanatory;“left” is how far from the left, “top” is how far from the top, “scrollbars” can either be 1 or 0 (1 being true, 0 being false) and “height” and “width” define the size of the new window. “return false;” is a javascript function which prevents an event from firing, in this case, our href.

This method has been tested with popup blocking extensions  and still functions as expected. I hope this helped you; it is a 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.


© 2019 SQLI LTD. All Rights Reserved.