Social media - Add social media buttons

[quiqcorp]

I solved this by:

1. grabbing the social icon png that you want like https://www.iconfinder.com/search/?q=facebook
2. upload it to your files and copy the link, use that as the image source

     {%- endif -%}

            <li class="social-icons__item">
              <a class="social-icons__link" href="https://www.facebook.com/Rossendalewines"><img src="https://cdn.shopify.com/s/files/1/0276/4849/1609/files/iconfinder_icon-02_2515845.png?v=1605847788"/></a>
            </li>
                       <li class="social-icons__item">
              <a class="social-icons__link" href="https://www.instagram.com/rossendalewines/"><img src="https://cdn.shopify.com/s/files/1/0276/4849/1609/files/iconfinder_social_media_social_media_logo_instagram_1916008.png?v=1605847728"/></a>
            </li>
            <li class="social-icons__item">
              <a class="social-icons__link" href="https://www.linkedin.com/company/rossendale-wines/"><img src="https://cdn.shopify.com/s/files/1/0276/4849/1609/files/iconfinder_LinkedIn_3380448.svg?v=1605846702"/></a>
            </li>​

• in footer.liquid add the following for each that you want to add, and remove any unwanted code such as 

    <li class="social-icons__item">
                  <a class="social-icons__link" href="{{ settings[social_link] | escape }}" aria-describedby="a11y-external-message">
                    {%- include icon_link -%}
                    <span class="icon__fallback-text">{{ social }}</span>
                  </a>
                </li>​

[VivekB]

Hi TyW,

Thanks a million for this quick guide to add social media buttons. I've tried to add this code, and it does work. However, like for other people commenting here, I get a huge Instagram/FB icon, and when trying to adjust the size in CSS, the icon gest displaced to the lowest corner on the left side of the page, and it stops working. Would you be able to please guide me on what's going wrong here. How could I place the icon properly in the footer, with the right seize and so it continues working?

Thanks again!

[Chrisc1623]

I've done these steps and created the new "icon-linkedin.liquid" file with the SVG data from my image. However, it's not showing up as of yet. How do i link the image file to the snippet as I can't see how it would know where to find the image etc.. 

Best

Chris

[eiizumidesign]

Hi Savage21,

Kindly follow colonel the colored highlights of my previous comment.

I had use the example convert the existing Facebook icon to LinkedIn one.

[eiizumidesign]

After follow TyW’s, go my comment and follow mine. I based mine working on FB to LinkedIn one.

[Chrisc1623]

I have followed the steps and no image is showing up. Here is my "icon-linkedin.liquid" code. Am I missing something? 

<svg aria-hidden="true" focusable="false" role="presentation" class="icon icon-linkedin" viewBox="0 0 20 20"><path fill="#444" d="M449.446,0c34.525,0 62.554,28.03 62.554,62.554l0,386.892c0,34.524 -28.03,62.554 -62.554,62.554l-386.892,0c-34.524,0 -62.554,-28.03 -62.554,-62.554l0,-386.892c0,-34.524 28.029,-62.554 62.554,-62.554l386.892,0Zm-288.985,423.278l0,-225.717l-75.04,0l0,225.717l75.04,0Zm270.539,0l0,-129.439c0,-69.333 -37.018,-101.586 -86.381,-101.586c-39.804,0 -57.634,21.891 -67.617,37.266l0,-31.958l-75.021,0c0.995,21.181 0,225.717 0,225.717l75.02,0l0,-126.056c0,-6.748 0.486,-13.492 2.474,-18.315c5.414,-13.475 17.767,-27.434 38.494,-27.434c27.135,0 38.007,20.707 38.007,51.037l0,120.768l75.024,0Zm-307.552,-334.556c-25.674,0 -42.448,16.879 -42.448,39.002c0,21.658 16.264,39.002 41.455,39.002l0.484,0c26.165,0 42.452,-17.344 42.452,-39.002c-0.485,-22.092 -16.241,-38.954 -41.943,-39.002Z"/>"/></svg>

Chris

[eiizumidesign]

Hi Chris,

1) Your code looks correct; you should have edit and saved the SVG file via text application (not sure whats the impact if you do it directly on Shopify Edit Code)

2) Check you have file/upload this SVG file onto Assets as mentioned by TyW's original comment thread "5. Choose the icons file on your computer and click Upload asset." (This should be the location to upload your SVG file.


If all else fails, try again (remove all the steps you had done):

A) Follow TyW's original comment thread.

AND WHEN YOU SEE A HUGE ICON...

B) Go to my comment dated and timed 07-06-2020 09:15 AM.

Sorry, I am not exactly a coder/programmer.

[henriettaprice]

Hi there ty,

thank you for this tutorial. im just wondering where you paste this code in? I was a bit confused by the description, as I cant find any similar code that is already used for the social icons already showing. 

thanks a lot 

Henrietta 

[henriettaprice]

hey there, thank you for explaining how to get rid of the bit logo, I tried your instructions about the svg text editor code into the snippet. when I pasted it into the 'd=' bit, it just froze my code page. I tried it on 2 different windows and it didn't like it at all, it won't even let men cross out of the window. any suggestions? `I was thinking maybe because from svg text from the text editor is so big? 

Henrietta 

[eiizumidesign]

Hi henriettaprice,


Basically, what I had done is duplicate an existing icon, replace the icon in .svg format.

Changing the SVG format image icon may be a bit complicated.

You have to go through step-by-step and read carefully (restart all over again if necessary).

A) Follow TyW's original comment thread thoroughly.

AND WHEN YOU SEE A HUGE ICON...

B) Go to my comment dated and timed 07-06-2020 09:15 AM. and read slow, and implement carefully.

_________________


Else, you may want to try quipcorp's answer on 11-20-2020 12:01 AM which uses PNG format.

https://community.shopify.com/c/Shopify-Design/Social-media-Add-social-media-buttons/m-p/959853/high...