Add tiktok logo to website

On 2/9/2021 at 7:37 PM, tuanphan said:

Can you share site url? Above code I haven't tested on SS 7.0

@tuanphan Sure—it's https://www.gayleforman.com/

On 2/12/2021 at 12:03 AM, LaurenWalters said:

@tuanphan Sure—it's https://www.gayleforman.com/

Add to Design > Custom CSS

/* footer tiktok */
footer.Footer [href*="tiktok.com"] {
    position: relative;
    top: 7px;
}

Hey @tuanphan,

I used your CSS example to get the TikTok logo in the footer and in most Social Blocks on my client's website. Thanks so much for that. Could you please help me with the social blocks in the header?

Two things specifically:

1. The script you wrote works on most pages. But I'm having trouble with the sizing of the icon. (example here)
2. How can I modify the script to account for pages without a background image? (example here)

Website: audreycarlan.com. 

Best,

Anthony

On 2/19/2021 at 7:57 PM, anthony said:

Hey @tuanphan,

I used your CSS example to get the TikTok logo in the footer and in most Social Blocks on my client's website. Thanks so much for that. Could you please help me with the social blocks in the header?

Two things specifically:

1. The script you wrote works on most pages. But I'm having trouble with the sizing of the icon. (example here)
2. How can I modify the script to account for pages without a background image? (example here)

Website: audreycarlan.com. 

Best,

Anthony

Hi,

Recently I used FontAwesome Icons. It will be better.

Step 1. Add this code to Code Injection Header (If you use Personal Plan > Edit Footer > Add a Code Block > Paste the code)

<link rel="stylesheet" href="https://pro.fontawesome.com/releases/v5.10.0/css/all.css" integrity="sha384-AYmEC3Yw5cVb3ZcuHtOA93w35dYTsvhLPVnYs9eStHfGJvOvKxVfELGroGkvsg+p" crossorigin="anonymous"/>

Step 2. Let me know. I will check & give the code to replace link with FA Tiktok icon

https://fontawesome.com/icons/tiktok?style=brands

On 2/22/2021 at 2:10 AM, tuanphan said:

Hi,

Recently I used FontAwesome Icons. It will be better.

Step 1. Add this code to Code Injection Header (If you use Personal Plan > Edit Footer > Add a Code Block > Paste the code)

<link rel="stylesheet" href="https://pro.fontawesome.com/releases/v5.10.0/css/all.css" integrity="sha384-AYmEC3Yw5cVb3ZcuHtOA93w35dYTsvhLPVnYs9eStHfGJvOvKxVfELGroGkvsg+p" crossorigin="anonymous"/>

Step 2. Let me know. I will check & give the code to replace link with FA Tiktok icon

https://fontawesome.com/icons/tiktok?style=brands

Thank you! I completed step 1. And this is me doing step 2. Let me know if you need anything else.

On 2/26/2021 at 9:42 PM, anthony said:

Thank you! I completed step 1. And this is me doing step 2. Let me know if you need anything else.

Hi. Sorry. I sent missing icon link. It is pro version link.

Use this new link

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.15.2/css/all.css" integrity="sha384-vSIIfh2YWi9wW0r9iZe7RJPrKwp6bG+s9QZMoITbCckVJqGCCRhc+ccxNcdpHuYu" crossorigin="anonymous">

Hi @tuanphan! I've sent you an email in the site link you provided regarding help for the TikTok icon. Please let me know if you've received it well 🙂

On 3/2/2021 at 12:25 AM, tuanphan said:

Hi. Sorry. I sent missing icon link. It is pro version link.

Use this new link

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.15.2/css/all.css" integrity="sha384-vSIIfh2YWi9wW0r9iZe7RJPrKwp6bG+s9QZMoITbCckVJqGCCRhc+ccxNcdpHuYu" crossorigin="anonymous">

 

Thank you, @tuanphan, for helping everyone get their TikTok icons.  I followed the guide and now have the icon in the footer, but it is lower than the rest.  Is it also possible to also get the circle version of the icon?  My site is www.tourswithmike.com.  I appreciate your assistance!

On 3/12/2021 at 3:55 AM, ToursWithMike said:

Thank you, @tuanphan, for helping everyone get their TikTok icons.  I followed the guide and now have the icon in the footer, but it is lower than the rest.  Is it also possible to also get the circle version of the icon?  My site is www.tourswithmike.com.  I appreciate your assistance!

Change to 48px & add this code

a.sqs-svg-icon--wrapper.url[href*="tiktok"], a.sqs-svg-icon--wrapper.url[href*="whatsapp"] {
    width: 48px !important;
    height: 48px !important;
    overflow: visible;
}
a.sqs-svg-icon--wrapper.url[href*="tiktok"]:before {
    content: "\e07b";
    visibility: visible;
    font-family: "Font Awesome 5 Brands";
    height: 40px;
    line-height: 40px;
    display: block;
    border: 2px solid white;
    position: relative;
    top: -15px;
    border-radius: 50%;
}

On 4/25/2020 at 2:14 PM, tuanphan said:

You can add this code to Home > Design > Custom CSS. Replace image in code with tik tok image url

a.icon.icon--fill[aria-label="URL"] svg {
    display: none;
}
a.icon.icon--fill[aria-label="URL"] {
    background-image: url(https://beaverhero.com/wp-content/uploads/2019/11/List-71.png);
    background-size: cover;
    background-repeat: no-repeat;
}

 

Hi, Do you have a link that has a white version of the tiktok logo, instead of the black version?

2 hours ago, C10ROU said:

Hi, Do you have a link that has a white version of the tiktok logo, instead of the black version?

You can add color white

a.sqs-svg-icon--wrapper.url[href*="tiktok"]:before {
    content: "\e07b";
    visibility: visible;
    font-family: "Font Awesome 5 Brands";
    height: 40px;
    line-height: 40px;
    display: block;
    border: 2px solid white;
    position: relative;
    top: -15px;
    border-radius: 50%;
	color: white;
}

On 4/14/2021 at 4:10 PM, tuanphan said:

You can add color white

a.sqs-svg-icon--wrapper.url[href*="tiktok"]:before {
    content: "\e07b";
    visibility: visible;
    font-family: "Font Awesome 5 Brands";
    height: 40px;
    line-height: 40px;
    display: block;
    border: 2px solid white;
    position: relative;
    top: -15px;
    border-radius: 50%;
	color: white;
}

 

Thanks for this, but it does not seem to work for me. This is for the header. Footer is fine. I am not the most techy, just designing a site for my client, so it's probably me doing something wrong. Is there anything else i can provide you to help you with the issue? The site it not live yet so not sure what I can provide you with so you can see what I am talking about.

On 4/19/2021 at 6:30 PM, C10ROU said:

Thanks for this, but it does not seem to work for me. This is for the header. Footer is fine. I am not the most techy, just designing a site for my client, so it's probably me doing something wrong. Is there anything else i can provide you to help you with the issue? The site it not live yet so not sure what I can provide you with so you can see what I am talking about.

If your site is private/trial, you can setup password & share url. We can check easier

On 4/21/2021 at 10:27 AM, tuanphan said:

If your site is private/trial, you can setup password & share url. We can check easier

Thanks. If you can take a look then that would be greatly appreciated.

Url: https://bobcat-capybera-d9c9.squarespace.com/
Password: Lexgibb@n2021

On 4/28/2021 at 4:24 PM, C10ROU said:

Thanks. If you can take a look then that would be greatly appreciated.

Url: https://bobcat-capybera-d9c9.squarespace.com/
Password: Lexgibb@n2021

Add to Design > Custom CSS

/* Tiktok white color header */
header#header [href*="tiktok"] {
    filter: invert(1);
    -webkit-filter: invert(1);
}

On 4/28/2021 at 4:24 PM, C10ROU said:

Thanks. If you can take a look then that would be greatly appreciated.

Url: https://bobcat-capybera-d9c9.squarespace.com/
Password: Lexgibb@n2021

Also, do you want to fix these? (You can post new question & tag me, I will check & give the code)

Site URL – https://bobcat-capybera-d9c9.squarespace.com/

1. (Mobile-Home) Change to 2 columns/row?

2. (Tablet/Mobile-Overlay Menu) Change tiktok white color?

3. (Tablet-Blog) Change to 2 or 3 posts/row?

Can anyone help support adding the TikTok icon in social links in the header and footer for this site? https://maryalycevonstein.com/

On 6/19/2021 at 10:00 PM, ktrusnik said:

Can anyone help support adding the TikTok icon in social links in the header and footer for this site? https://maryalycevonstein.com/

Add tiktok next to Email icon?? >> You can add a link icon, then we will give the code to turn link to tiktok

With Footer, add a Code Block under Contact Text >> paste this code

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.15.1/css/all.css" integrity="sha384-vp86vTRFVJgpjF9jiIGPEEqYqlDwgyBgEF109VFjmqGmIY/Y4HV4d3Gp2irVfcrp" crossorigin="anonymous">
<ul class="t-social">
<li>
  <a href="mailto:mavs@maryalycevonstein.com">
  <i class="far fa-envelope"></i>
  </a>
</li>
<li>
  <a href="https://www.instagram.com/maryalycevonstein/">
  <i class="fab fa-instagram"></i>
  </a>
</li>
<li>
  <a href="https://tiktok.com">
  <i class="fab fa-tiktok"></i>
  </a>
</li>
</ul>
<style>
  /* code block padding top bottom */
  .code-block {
    padding-top: 0;
    padding-bottom: 0;
}
  /* social icons code */
.t-social {
    display: block;
    margin: 0 auto;
    padding-top: 5px;
    text-align: center;
  	padding-left: 0;
}
  .t-social li {
  display: inline-block;
    margin: 0;
    line-height: 100%!important;
  }
  .t-social li i {
    font-size: 30px;
    margin: 0 20px;
}
</style>

Hi , I added tuanphans code from the first page: 

a.icon.icon--fill[aria-label="URL"] svg {
    display: none;
}
a.icon.icon--fill[aria-label="URL"] {
    background-image: url(https://beaverhero.com/wp-content/uploads/2019/11/List-71.png);
    background-size: cover;
    background-repeat: no-repeat;
}

But now all the other social media icons disappeared. Seems they are still there, but white or invisible - i can't see them, but the link is still clickable. 

Furthermore, I can't change the colour of the Tiktok logo to #1370AF. 

Could you help please? 

https://www.klimawahl2021.net/

THX Bettina 

On 7/12/2021 at 5:09 PM, bettinagruen said:

Hi , I added tuanphans code from the first page: 

a.icon.icon--fill[aria-label="URL"] svg {
    display: none;
}
a.icon.icon--fill[aria-label="URL"] {
    background-image: url(https://beaverhero.com/wp-content/uploads/2019/11/List-71.png);
    background-size: cover;
    background-repeat: no-repeat;
}

But now all the other social media icons disappeared. Seems they are still there, but white or invisible - i can't see them, but the link is still clickable. 

Furthermore, I can't change the colour of the Tiktok logo to #1370AF. 

Could you help please? 

https://www.klimawahl2021.net/

 

THX Bettina 

 

Hi. It looks like you changed code & solve this?

@tuanphan, can you please help me too? I'm trying to add the TikTok logo next to Instagram in the header, but I'm not having luck with any of the code. I haven't tried the footer yet since I can't get the header to work, but I'd eventually like it there as well. 

For some reason, the TikTok URL is automatically generating a podcast icon instead of a link icon, which is what most people's seems to be defaulting to. I'm not sure if that's what's causing the coding issue.

Site: https://cube-dog-azzj.squarespace.com/ (early stages)
PW: jBwKzV6#Y?

49 minutes ago, bceecb said:

For some reason, the TikTok URL is automatically generating a podcast icon instead of a link icon, which is what most people's seems to be defaulting to.

It appears that SS understands that your link is related to a podcast and so is putting the podcast icon on.

I don't have an answer for your other issues at this time.

21 hours ago, creedon said:

It appears that SS understands that your link is related to a podcast and so is putting the podcast icon on.

I don't have an answer for your other issues at this time.

Yeah. I'm assuming that's because it's a TikTok account for a podcast and "podcast" is in the name of the account. Hopefully someone can help me figure out a way around this!

22 hours ago, bceecb said:

Yeah. I'm assuming that's because it's a TikTok account for a podcast and "podcast" is in the name of the account. Hopefully someone can help me figure out a way around this!

I got it to work! I removed the TikTok account for the podcast and replaced it with the link to another TikTok account. The link icon appeared when I put that other account in, instead of the podcast icon, and it was still there even after I changed the link back to the original link for the podcast's TikTok account. From there, I was able to successfully enter the code to replace the link icon with the TikTok icon!

On 7/13/2021 at 9:54 PM, tuanphan said:

Hi. It looks like you changed code & solve this?

@tuanphan Hi! I'd like to add TikTok and CashApp logos to my social links in my head and footer. Can you help me? I'm semi familiar with css and coding and would love to know how to do this so I can tweak the code on my own in the future if need be. Also wondering if there is a way to stack the icons instead of having them inline?