Custom social share buttons not showing on published site

Design help Custom code
1

Hi! I am using @Waldo’s tutorial (which is incredible, thank you!!!) on creating custom share buttons and I’ve run into a snag (I know it’s me, but I don’t know where the problem is/how to fix it).

I’ve created the Div and added in the code, but when I publish the site there’s nothing there. My guess is that I messed up the class somehow, but I don’t know how.

Screen Shot 2021-01-02 at 11.26.58 PM
Screen Shot 2021-01-02 at 11.26.58 PM1275×684 49.2 KB
Screen Shot 2021-01-02 at 11.27.13 PM
Screen Shot 2021-01-02 at 11.27.13 PM1275×681 102 KB

any help would be greatly appreciated!

Here is my site Read-Only

Here’s the published site page: https://www.sophiaoneal.com/post/5-new-business-ideas-for-2021

2

I don’t think your anchor link is displaying as there’s nothing set between the <a></a>. You can see here that it has dimensions of 0x0:

image
image1067×428 40.4 KB


Try inserting <img src="https://uploads-ssl.webflow.com/5f987876b842137433c247de/5ff143d28f7605009344848a_Social%20share%20icons.png"> between the anchor tags.

So the code in the embed would be this (please note that I have removed target="_blank" as well):

<a class="Social-Share-FB"  href="javascript:fbshareCurrentPage()" alt="Share on Facebook"><img src="https://uploads-ssl.webflow.com/5f987876b842137433c247de/5ff143d28f7605009344848a_Social%20share%20icons.png"></a>

<script language="javascript">
    function fbshareCurrentPage()
    {window.open("https://www.facebook.com/sharer/sharer.php?u="+escape(window.location.href)+"&t="+document.title, '', 'menubar=no,toolbar=no,resizable=yes,scrollbars=yes,height=300,width=600');return false; }
</script>

Here’s a project that I created to test this, you can see that it works: https://social-sharer-test.webflow.io/

Share link: https://preview.webflow.com/preview/social-sharer-test?utm_medium=preview_link&utm_source=designer&utm_content=social-sharer-test&preview=8cebff8864a99c814faae2437a1aa9df&mode=preview


I think we’ve spoken before - just had a glance at the rest of your site and recognised OutWhere. Hello! :grin:

3

It works!!! Thank you so much!
And yes, we have spoken before! hello! :grinning: :wave:t4:
I hope you’re doing well. :slight_smile:

1 Like
4

Haha awesome, you’re welcome! Hope you’re well too! :slight_smile:

1 Like
5

So, I tried to add Twitter (and eventually several other icons) but when I tried to adjust the code I think I messed it up.

here’s my read only link

I used the code from Social sharing buttons + CMS? - #2 by sabanna for Twitter

then my modified code
<a class="w-inline-block Social-Share-Twitter tw" href="https://twitter.com/intent/tweet?" title="Tweet" onclick="window.open('https://twitter.com/intent/tweet?text=%20Here goes text of your tweet ' + encodeURIComponent(document.title) + ':%20 ' + encodeURIComponent(document.URL)); return false;"><img src=https://uploads-ssl.webflow.com/5f987876b842137433c247de/5ff50320caf38f079d621264_Twitter%20-%20trans.png"></a>

can you please see where I went wrong?

haha, I wish I’d learned how to code! would definitely come in handy right about now…

1 Like
6

And how do i make the icon smaller? I tried adjusting the link size with VH and VW, but it didn’t do anything.

thank you so much!

1 Like
7

Great question, Sophia! I typically add a div block to the page, then give it a class name of Social-Share-Twitter (that’s the class name in this Twitter link above).

Once I have that element on the page with that class, I give it a size in pixels of the display size or add padding if it’s on text. It should render on the published page thereafter.

Please let me know if that’s helpful!