Streaming live at 10am (PST)

FREEBIE: Sharing is Caring :)


#1

I've seen a lot of folks asking how to make custom social sharing buttons on the Webflow Help Pages lately, so I put together this fun little how-to with code snippets for you all to pull from. :smile:
This is clone-able in case you'd like to use the fun widget I created using a dropdown widget and some interactions. :smile: Have fun!

Link to the FREEBIE Cloneable site in Webflow:
https://webflow.com/website/FREEBIE-Social-Sharing-Concept?s=wb-social-sharing-concept

Link to the Live site with code snippets to put on your dynamic pages when you're making custom share buttons which pull the current page url and share it to Facebook/Twitter. Great for when you're making dynamic pages with news stories, blogs & space cats. :wink:

http://wb-social-sharing-concept.webflow.io/

Remember, sharing is caring :smile: have fun, build awesome things in Webflow and share your projects here with the community. :smile:

Please let me know if you have any questions, or suggestions/recommendations to make this page better/steps easier to follow.

Made with love, joy & smiley faces.

:purple_heart: Waldo :smile:

Oh, and here's a fun gif to use when you're explaining something and need help from Chuck.


Dynamic Share Buttons for CMS?
Social sharing buttons + CMS?
Dynamic share buttons for different social media
Embed HTML in collection
Is There A Way to Add an IFRAME code to an Image Link?
Social Media Content Bank
Social Media Content Bank, Greatest Hits Vol. 2
#2

Great job @Waldo also love the gif of chuck :smile:

Best
Ahmad


#3

Haha thanks @Ahmadz839 :smile: Chuck is awesome, and needs more recognition hehe :joy:


#6

This is awesome @Waldo thanks so much for taking the time to do this and share it with us!! :thumbsup: :smile:


Social Share Buttons only work on the right half
#7

My pleasure @Godweeno :smile: please let me know if you have any questions or recommendations or other tutorials you'd like to see. :smile:

Thanks,

Waldo


#8

Hi @Waldo - thanks for this!

However, is it possible to automatically and dynamically populate the text within the share popup windows with text incorporated within the CMS, such as the title of a Blog?

Thanks

Dan


#9

My pleasure! :smile:
I can work on a script to do this @DanUK1 :smile: I'll let you know once I get it working. That would be pulling a field dynamically from the page so the dynamic item would have to be named appropriately such as "Post Title" or something to that effect. I'll keep you posted :wink:

Thanks,

Waldo


#10

Great @Waldo ! I shall watch this space 😁


#11

Hi @Waldo!

Thanks for sharing! I have been trying to implement this on a site and just can't seem to get it to work. Whenever I follow your steps, nothing happens when I click. It does not seem to call up the script like it does in your example. As far as I can tell the only difference in yours is you have it embedded in a menu / dropdown list and I am trying to do it in a regular div block.

Would appreciate if you have any thoughts on this!

Thanks!

LJB


#12

Hey @LJB once you have a Link Block styled with the background image.

Then delete that and add an HTML Embed block (copy and paste the code I provided) and change the class name of the embedded piece with the class name you gave your link block. :smile:

Please let me know if you have any trouble or send over a Read Only link and I can help you get it setup. :smile:

Thanks,

Waldo


#13

Hi @Waldo - I've got the same issue as LJB

Here's my read only - could you have a look?

https://preview.webflow.com/preview/wedesignlondon?preview=18c7f902641491e6ae190af9ef887a28

The detail is within the "Blog Post Templat" page within the CMS pages.

Thank you!


#14

@Waldo ... any thoughts? :smile:


#15

Hey @DanUK1 did you create a div with the class "social-icon facebook" and apply your styles to it (that's the class you have in your HTML Embed)? Whatever class name you give your div/link block that you're styling to be your button/social link is the class you have to have in the actual HTML Embed block.

Does that make sense? :smile:

<a class="YOURCLASSNAMEGOESHERE"  href="javascript:fbshareCurrentPage()" target="_blank" alt="Share on Facebook"></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>

#16

Hi @Waldo
Yes, I didn't do it for the Facebook link (although I did for the Twitter link) duh!.
I have changed it, but it still isn't working.

I'm not great at code, but I don't understand:
a) That the html embed turns into a link when it is just part of a normal div block.
b) Your HTML Embed is called "embed" as opposed to "social-icon facebook" (as well as the parent div "Square out"), which is what the styled link block was originally called in your example. So how can the embed or div be styled as the "social-icon facebook" was.

Regardless, it's still not working...very frustrating as it is the final piece on my page!

Does this make sense?!


#17

The class name is inside the HTML, you'll see a class="social-link facebook" <-- that is the class I'm referring to changing to whatever you called yours when styling it.
The HTML embed is a link with a script which it binds to.

Make sense?

Waldo


#18

Hi @Waldo!

Yes, I did change that class within the HTML embed, but as I say the link isn't working.
On the actual site, when scrolling over the div (link), nothing happens as per:

http://wedesignlondon.webflow.io/blog/6-steps-to-selling-more-with-ecommerce-copywriting

PS. sorry to be a pain :confounded:


#19

You have to give it the correct class name :wink: currently your class name in the embed is "Facebook Link" it should be "facebook-link". You should have a different class for the actual HTML embed element without all the padding, just a height of 40px and width of 100px. I also recommend using much smaller images as the background for those buttons as they're currently 544x179.

I made the changes above on my end and it worked :smile:


#20

Hallelujah!

Thank you :smile:

Just now need to figure out how to change the text dynamically within each twitter share for each blog post :sunglasses:


#21

Working on something for that :wink: think I figured it out, just need to test it. :smiley:


#22

This is great! Any idea on how to pull a specific image from dynamic page, such as "thumbnail image" or "main image"?