Social media buttons to open in a new tab

[nickptty]

Hi, I am using the Brooklyn theme and I want my social media buttons to open in a new tab but I can't figure out how to do that. read a couple of other posts but did not quite get it.

[Tejas_Nadpara · Accepted solution]

@nickptty 

If no target is specified, the link will open in the current context, unless the user or browser specifies otherwise.
The target attribute specifies where the linked document will open when the link is clicked. The default is the current window. If target="_blank", the linked document will open in a new tab or (on older browsers) a new window.

<a href="xyz" target="_blank">xyz</a>

If you are not able to find the code then kindly follow the steps:

1. Go into Sections > footer.liquid. Add find following code in this file:

      {% if footer_social_enable %}
        <div class="grid__item {{ footer_column_width }}">
            <ul class="no-bullets social-icons">
              {% if settings.social_facebook_link != blank %}
                <li>
                  <a href="{{ settings.social_facebook_link | escape }}" title="{{ 'layout.footer.social_platform' | t: name: shop.name, platform: 'Facebook' }}">
                    <span class="icon icon-facebook" aria-hidden="true"></span>
                    Facebook
                  </a>
                </li>
              {% endif %}
              {% if settings.social_twitter_link != blank %}
                <li>
                  <a href="{{ settings.social_twitter_link | escape }}" title="{{ 'layout.footer.social_platform' | t: name: shop.name, platform: 'Twitter' }}">
                    <span class="icon icon-twitter" aria-hidden="true"></span>
                    Twitter
                  </a>
                </li>
              {% endif %}
              {% if settings.social_pinterest_link != blank %}
                <li>
                  <a href="{{ settings.social_pinterest_link | escape }}" title="{{ 'layout.footer.social_platform' | t: name: shop.name, platform: 'Pinterest' }}">
                    <span class="icon icon-pinterest" aria-hidden="true"></span>
                    Pinterest
                  </a>
                </li>
              {% endif %}
              {% if settings.social_instagram_link != blank %}
                <li>
                  <a href="{{ settings.social_instagram_link | escape }}" title="{{ 'layout.footer.social_platform' | t: name: shop.name, platform: 'Instagram' }}">
                    <span class="icon icon-instagram" aria-hidden="true"></span>
                    Instagram
                  </a>
                </li>
              {% endif %}
              {% if settings.social_snapchat_link != blank %}
                <li>
                  <a href="{{ settings.social_snapchat_link | escape }}" title="{{ 'layout.footer.social_platform' | t: name: shop.name, platform: 'Snapchat' }}">
                    <span class="icon icon-snapchat" aria-hidden="true"></span>
                    Snapchat
                  </a>
                </li>
              {% endif %}
              {% if settings.social_google_plus_link != blank %}
                <li>
                  <a href="{{ settings.social_google_plus_link | escape }}" rel="publisher" title="{{ 'layout.footer.social_platform' | t: name: shop.name, platform: 'Google Plus' }}">
                    <span class="icon icon-google_plus" aria-hidden="true"></span>
                    Google Plus
                  </a>
                </li>
              {% endif %}
              {% if settings.social_tumblr_link != blank %}
                <li>
                  <a href="{{ settings.social_tumblr_link | escape }}" title="{{ 'layout.footer.social_platform' | t: name: shop.name, platform: 'Tumblr' }}">
                    <span class="icon icon-tumblr" aria-hidden="true"></span>
                    Tumblr
                  </a>
                </li>
              {% endif %}
              {% if settings.social_youtube_link != blank %}
                <li>
                  <a href="{{ settings.social_youtube_link | escape }}" title="{{ 'layout.footer.social_platform' | t: name: shop.name, platform: 'YouTube' }}">
                    <span class="icon icon-youtube" aria-hidden="true"></span>
                    YouTube
                  </a>
                </li>
              {% endif %}
              {% if settings.social_vimeo_link != blank %}
                <li>
                  <a href="{{ settings.social_vimeo_link | escape }}" title="{{ 'layout.footer.social_platform' | t: name: shop.name, platform: 'Vimeo' }}">
                    <span class="icon icon-vimeo" aria-hidden="true"></span>
                    Vimeo
                  </a>
                </li>
              {% endif %}
              {% if settings.social_fancy_link != blank %}
                <li>
                  <a href="{{ settings.social_fancy_link | escape }}" title="{{ 'layout.footer.social_platform' | t: name: shop.name, platform: 'Fancy' }}">
                    <span class="icon icon-fancy" aria-hidden="true"></span>
                    Fancy
                  </a>
                </li>
              {% endif %}
            </ul>
        </div>
      {% endif %}

2. Now, replace the above code with following:

      {% if footer_social_enable %}
        <div class="grid__item {{ footer_column_width }}">
            <ul class="no-bullets social-icons">
              {% if settings.social_facebook_link != blank %}
                <li>
                  <a href="{{ settings.social_facebook_link | escape }}" target="_blank" title="{{ 'layout.footer.social_platform' | t: name: shop.name, platform: 'Facebook' }}">
                    <span class="icon icon-facebook" aria-hidden="true"></span>
                    Facebook
                  </a>
                </li>
              {% endif %}
              {% if settings.social_twitter_link != blank %}
                <li>
                  <a href="{{ settings.social_twitter_link | escape }}" target="_blank" title="{{ 'layout.footer.social_platform' | t: name: shop.name, platform: 'Twitter' }}">
                    <span class="icon icon-twitter" aria-hidden="true"></span>
                    Twitter
                  </a>
                </li>
              {% endif %}
              {% if settings.social_pinterest_link != blank %}
                <li>
                  <a href="{{ settings.social_pinterest_link | escape }}" target="_blank" title="{{ 'layout.footer.social_platform' | t: name: shop.name, platform: 'Pinterest' }}">
                    <span class="icon icon-pinterest" aria-hidden="true"></span>
                    Pinterest
                  </a>
                </li>
              {% endif %}
              {% if settings.social_instagram_link != blank %}
                <li>
                  <a href="{{ settings.social_instagram_link | escape }}" target="_blank" title="{{ 'layout.footer.social_platform' | t: name: shop.name, platform: 'Instagram' }}">
                    <span class="icon icon-instagram" aria-hidden="true"></span>
                    Instagram
                  </a>
                </li>
              {% endif %}
              {% if settings.social_snapchat_link != blank %}
                <li>
                  <a href="{{ settings.social_snapchat_link | escape }}" target="_blank" title="{{ 'layout.footer.social_platform' | t: name: shop.name, platform: 'Snapchat' }}">
                    <span class="icon icon-snapchat" aria-hidden="true"></span>
                    Snapchat
                  </a>
                </li>
              {% endif %}
              {% if settings.social_google_plus_link != blank %}
                <li>
                  <a href="{{ settings.social_google_plus_link | escape }}" target="_blank" rel="publisher" title="{{ 'layout.footer.social_platform' | t: name: shop.name, platform: 'Google Plus' }}">
                    <span class="icon icon-google_plus" aria-hidden="true"></span>
                    Google Plus
                  </a>
                </li>
              {% endif %}
              {% if settings.social_tumblr_link != blank %}
                <li>
                  <a href="{{ settings.social_tumblr_link | escape }}" target="_blank" title="{{ 'layout.footer.social_platform' | t: name: shop.name, platform: 'Tumblr' }}">
                    <span class="icon icon-tumblr" aria-hidden="true"></span>
                    Tumblr
                  </a>
                </li>
              {% endif %}
              {% if settings.social_youtube_link != blank %}
                <li>
                  <a href="{{ settings.social_youtube_link | escape }}" target="_blank" title="{{ 'layout.footer.social_platform' | t: name: shop.name, platform: 'YouTube' }}">
                    <span class="icon icon-youtube" aria-hidden="true"></span>
                    YouTube
                  </a>
                </li>
              {% endif %}
              {% if settings.social_vimeo_link != blank %}
                <li>
                  <a href="{{ settings.social_vimeo_link | escape }}" target="_blank" title="{{ 'layout.footer.social_platform' | t: name: shop.name, platform: 'Vimeo' }}">
                    <span class="icon icon-vimeo" aria-hidden="true"></span>
                    Vimeo
                  </a>
                </li>
              {% endif %}
              {% if settings.social_fancy_link != blank %}
                <li>
                  <a href="{{ settings.social_fancy_link | escape }}" target="_blank" title="{{ 'layout.footer.social_platform' | t: name: shop.name, platform: 'Fancy' }}">
                    <span class="icon icon-fancy" aria-hidden="true"></span>
                    Fancy
                  </a>
                </li>
              {% endif %}
            </ul>
        </div>
      {% endif %}

3. Save changes and refresh your site.

As always, when making code changes to your theme, please remember to create a backup, in case you need to revert back to previous versions of the theme.

Cheers,

Tejas

[nickptty]

Great thank you Tejas_Nadpara it worked 🙂

[lin-B]

does this apply to any theme or just Brooklyn?  I have the same problem with Studio theme, social media icons open on same page, and cannot fix it with local css on the footer.