Custom social share buttons not showing on published site

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.

any help would be greatly appreciated!

Here is my site Read-Only

Here’s the published site page: 5 New Business Ideas for 2021

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:

Try inserting <img src=""> 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=""></a>

<script language="javascript">
    function fbshareCurrentPage()
    {""+escape(window.location.href)+"&t="+document.title, '', 'menubar=no,toolbar=no,resizable=yes,scrollbars=yes,height=300,width=600');return false; }

Here’s a project that I created to test this, you can see that it works:

Share link: Webflow - Social Sharer Test

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

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

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

1 Like

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="" title="Tweet" onclick="' goes text of your tweet ' + encodeURIComponent(document.title) + ':%20 ' + encodeURIComponent(document.URL)); return false;"><img src="></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

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

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!