How to open social icon in a new tab in the footer

[Huyen_kire]

Hello!
I'm using Pipeline and I'm not sure how to edit the social icons to be opened in a new window.. 

I did those changes accordingly to these guidelines, but it's not working (see screenshot).

Please help 😞

Our current code is:

{% if section.settings.footer_social_enable %}
<ul class="footer-social social-icons grid__item inline-list">
{%- assign social_accounts = 'Facebook, Twitter, Tiktok, Pinterest, Instagram, Snapchat, Tumblr, Linkedin, YouTube, Vimeo, Medium, ' | split: ', ' -%}
{%- for social in social_accounts -%}
{%- assign social_handle = social | handleize -%}
{% capture social_link %}social_{{ social_handle }}_link{% endcapture %}

{%- if settings[social_link] != blank -%}
<li>
<a href="{{ settings[social_link] }}" title="{{ social }}">
{% render 'social-icon' handle: social_handle %}
<span class="visually-hidden">{{ social }}</span>
</a>
</li>
{%- endif -%}
{%- endfor -%}

[BSS-Commerce · Accepted solution]

Hi @Huyen_kire ,

"target" is an attribute of element <a>, that specifies where to open the linked document, in this tab, in new tab, etc, detailed here

If you want to open a new tab when click the link, you just need to set "target=_blank" into <a> like the following example

before:

<a href="https://www.google.com/"></a>

after adding target

<a href="https://www.google.com/" target="_blank"></a>

So, find all <a> elements in your footer and add this property (note that you need to add in the open tag of a HTML element - <a>, not the close tag </a>)

[Huyen_kire]

Amazing, it's working now. Thank you!!!