This is great! Any idea on how to pull a specific image from dynamic page, such as "thumbnail image" or "main image"?
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
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
Hello @evamelba can you please send over your read-only link so I can further assist you?
Things like your read-only link, screenshots, and your environment info really speed things up.
Posting guidelines can be found here: http://forum.webflow.com/t/posting-guidelines-for-the-need-help-category/8094
How to share read-only link:
Hello @waldo ! Sorry I forgot to give you preview and more informations .
Here is the read-only link so you can have a look :
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,
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!
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.
Lovely site! Please let me know if you have any questions.
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. Doesn't hurt to have at least that out there.
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
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.
Thanks @Waldo this is great! Exactly what i was looking for on mobile, brilliant!
Would an Instagram share work as well?
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!
@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.
It really is remarkable. @Waldo's solution for social sharing buttons is beautiful and effective.
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?
Can this work on CMS-driven websites, where the URL, title and thumbnail are dynamic?