FREEBIE: Sharing is Caring :)

That’s determined by the OG (Open Graph) property which I think the team is working on making that and other og, meta fields bind-able from collections. You could at least set a main OG image for your site within site settings for now :smile:

Hello,

I try to do your facebook sharing button, everything is working well excepting that when I click on the button, it don’t share the current page but the homepage (studiomegalo.fr) instead of for example : studiomegalo.fr/projets/projet1

Do you know if I made a mistake somewhere?
Thank you in advance :wink:

Hello @evamelba can you please send over your read-only link so I can further assist you? :smile:

Things like your read-only link, screenshots, and your environment info really speed things up.

Posting guidelines can be found here: Posting Guidelines for the Design Help Category - General - Forum | Webflow

How to share read-only link:

Thank you,

Waldo

Hello @waldo ! Sorry I forgot to give you preview and more informations ;).

Here is the read-only link so you can have a look :
https://preview.webflow.com/preview/studiomegalo?preview=3d7bce40eab557e3888a0143238c82f4

http://studiomegalo.fr/projets/petit-theatre-francais
Here you can see with the facebook link (the white square with the facebook icon). When I click on it, it don’t share this project page but my home page. Thus there is no description or picture of the project in this facebook sharing window.

Thank you in advance,
Eva

Hey @evamelba I did a test and sent the link to myself as a private message via facebook and opened it and it went to the correct page, so you did everything right! :slight_smile:

In the social preview, it will typically just take the root domain and display it, along with the OG (open graph) description & image uploaded to the website (but in actuality it will link to the page the button is on as that is how the js works).

Here is a link about adding OG (Open Graph) images: http://forum.webflow.com/t/open-graph-image-not-displaying-correctly/17923?u=waldo

At this time you cannot bind OG description/images per a post, though I’m sure the team is working on this feature so that we’ll be able to set an image/description per a post. So I’d recommend adding an additional field to your Collection for an OG image & description which you can later on bind. :smiley:

Lovely site! Please let me know if you have any questions.

Bonne journée! :smiley:

Waldo :smiley:

Thank you Waldo for your help.
Hum… so I think I won’t let the share button for the moment, I hope Webflow will soon create OG image for the CMS ;).

Thank you !

I would recommend incorporating the share button with a main OG image from your website for now. :slight_smile: Doesn’t hurt to have at least that out there. :wink:

My pleasure to help!

Thanks for sharing Waldo. Any chance that you will give Linkedin and Google+ a shot too?

I’ve been trying to search around for an option that wouldn’t need to be manually updated on a per post/article basis. I’ve found some “simple share button” code for all the major social media networks, generally speaking the first 4 or 5 links that come up on google when you search for those terms - but none of which seem to auto populate the url of the current page like the 2 (Facebook & Twitter) you’ve put together here.

There’s some information here on creating the Google Plus share buttons/links: https://developers.google.com/+/web/share/?hl=en#example-async-defer

You could incorporate the script I’ve used in the other share links to pull in the current domain & maybe even a pre-populated post (may act more like the Facebook one that just shares the appropriate page with OG image).

As far as LinkedIn, I’d have to dig deeper. I’m not real familiar with sharing posts on LinkedIn. I’ll let you know :wink:

Thanks,

Waldo

Waldo!

Great Idea but I can’t seem to get it to work. I’ve followed the steps closely but all that happens is my Background IMG appears but no link works. Very strange! Any ideas?

Hey @Sprackhaus be sure to set your class to display: Block. Feel free to PM me with a read-only link if you have any questions please. :slight_smile:

Thanks @Waldo this is great! Exactly what i was looking for on mobile, brilliant!

Would an Instagram share work as well?

1 Like

It looks like you cannot share media on Instagram using the API. See the docs:

At this time, uploading via the API is not possible. We made a conscious choice not to add this for the following reasons:

Instagram is about your life on the go – we hope to encourage photos from within the app.
We want to fight spam & low quality photos. Once we allow uploading from other sources, it’s harder to control what comes into the Instagram ecosystem. All this being said, we’re working on ways to ensure users have a consistent and high-quality experience on our platform.

Oh i suppose that makes sense hehe…cause i’ve never seen 3rd party content on Instragram…doh!

Thanks

1 Like

@Waldo Just wanted to say thanks for this solution, really appreciate the time you put into this!
I will post my use of it soon, site isn’t quite ready yet.

2 Likes

It really is remarkable. @Waldo’s solution for social sharing buttons is beautiful and effective. :sunglasses:

2 Likes

Hey again,

Just published my inspiration site, http://marketingdesigninspiration.com/
Used the share links on the single post pages (example: http://marketingdesigninspiration.com/design-inspiration/cygnet-landing-page-theme)

Thanks again @Waldo for the help!

Next request would be to integrate bit.ly into the share buttons to auto generate a shortened link… @Waldo … any thoughts?

1 Like

Can this work on CMS-driven websites, where the URL, title and thumbnail are dynamic?

Yep, looks like you already found the post @Zlate :smiley:

1 Like

Sorry for not understanding the first time. I’m still new around here.

And I still can’t get it work entirely, because the share modal windows do not pull the right data, but I’m sure it’s some mistake on my end and I’ll try to find it.

I thought the whole thing is gonna be much easier, so before even reading this post I tried implementing codes from this website. Then I was hoping that the share text within the code for each social media could be replaced with CMS-friendly tags.

For instance.

http://twitter.com/intent/tweet?status=[TITLE]+[URL]

Could be replaces by

http://twitter.com/intent/tweet?status={{name}}+{{url}}

Assuming that the CMS tags behind the scenes are encompassed in curly brackets. I found out this by copying dynamic data and pasting it in plain text file.