Sharing a CMS item on social media

Design help Custom code
1

Hey guys! I know that this was asked already quite a few times and I even followed one of the tutorials to create your own customized sharing links. The facebook interface pops up and the link as well, but then i can’t click share. And even if it worked i wonder if the image thumbnail would share or simply just a link.

Can you help me out on this? Here is the example of one of the events
at the bottom of the page a link for facebook and twitter. I created an embed box component and this is the code i inserted:

< a class=“w-inline-block facebook”
href=“Redirecting...”
title=“{{wf {"path":"name","type":"PlainText"} }}” target=“_blank”
onclick=“window.open(‘Redirecting...’ + encodeURIComponent({{wf {"path":"slug","type":"PlainText"} }}) + ‘&t=’ + encodeURIComponent({{wf {"path":"slug","type":"PlainText"} }})); return false;”>
< /a>

If I could get some help that would be great!

2

You can format your code in this forum by selecting your code and clicking on the CODE icon, or you can insert 4 spaces before each line of code.

3

Your link to the example doesn’t work.

But to answer your question, you left all the parameters blank.

here is the Facebook share URL with parameters filled

http://www.facebook.com/sharer/sharer.php?u=youtube.com&title=Youtube

Notice how in your version you left the “u=” and the “t=” sections blank. “U” means “URL” and “T” means title. So by leaving those sections blank you were opening Facebook without telling it what you are sharing.

But basically if you to make a button with the link I showed above, it would do this: CLICK ME

So with that in mind you basically just need to set up an A tag in your custom HTML embed that fills the appropriate information dynamically.

Here is an example:

Capture
Capture1031×405 25.5 KB

I put /post/ in the url because I assumed you would be sharing a specific blog post, but basically you would put the slug of whatever collection you are in - whether it be product, work, author, ect.

PS You can ignore the “onclick” bits you put in. That looks like Javascript code which should be put in the footer not in an A tag. But if you do it the way I indicated above it isn’t necessary.

4

Actually I think this will be an easier solution:

1) Make whatever kind of link/icon you want in Webflow.

Capture
Capture802×343 11.8 KB


2) Click on the icon/link and add the id “facebook”
capture%202

3) Copy this code and put it before the end of the body tag

<script>
document.getElementById("facebook").addEventListener("click", facebookShare);
function facebookShare() { window.open('http://www.facebook.com/sharer/sharer.php?u=' + window.location.href + '&title=' + document.title); }
</script>

capture%203
capture%203799×311 26 KB

Now whatever was tagged with the ID “facebook” will be a share button. Plz note that you can only have one instance of an ID per page.

Here is a share link so you can poke around a bit: https://preview.webflow.com/preview/sharing-on-facebook?preview=86e619725444facfa26bfa6d36208103

Hope this helps.

2 Likes
5

can i add utm tracking links?