Current Page URL Placeholder

Helpdesk Integrations and Third Party Tools
, ,
1

Hi,

I’m wanting to implement share buttons on a blog. I’ve referenced “Social media sharing buttons on blog post” and the corresponding Features Request. , where I saw a user replied that they used custom HTML to generate share buttons. I’d like to do this as well, and I have code that works, but I can’t figure out how to share the current page URL. I know the code I have works, because I inserted my home page into the share button and that worked fine. I’ve seen that the Sitejet placeholder values should be in documentation somewhere. Does anyone know what the current page URL placeholder value is, or where I can find it?

Here is the code I’m using, for reference (actual code has appropriate <>).

a href=“https://www.facebook.com/sharer/sharer.php?u={{currentPageURL}}” target=“_blank”
Share on Facebook
/a

I’ve also tried {{currentpage}}, {{current}}, and {{pageURL}}, none of which have worked.

Thanks!

1 Like
2

Hey @Lucian_Dinu @Richard_Honey @Imre_Fekete - any ideas or experience with that? :slight_smile:

3

Sorry. I haven’t fiddled with this yet, so I have zero experience with that.

1 Like
4

Hi @Olivia_Riggs!
I tried Jeff’s code from this thread for Facebook and it works :man_cartwheeling:

In the Sitejet Builder, I used an html element and inserted the following code:

<a href="#" class="fa fa-facebook" onclick="shareOnFacebook()"></a>
<script>
function shareOnFacebook() {
  // URL of the current page
  const currentPageUrl = window.location.href;

  // Open the Facebook Share Dialog
  window.open('https://www.facebook.com/sharer/sharer.php?u=' + encodeURIComponent(currentPageUrl), 'facebook-share-dialog', 'width=626,height=436');
}
</script>

:bulb: Note: This only shares the current page, and not a specific anchor on that page. Also: this code only renders a small Facebook (f) icon with no styling. I’m sure you can insert a different icon to your liking and style it anyway you want.
Please let us know if you manage to get it working with the others too (Twitter, Pinterest etc)

3 Likes
5

I see! I was hoping to solve the problem with my original code, but this solution did work really well.

I found that to change the icon you just have to change the * in "class=“fa fa-*”. This came in handy for my “Share via SMS” button, though I’m not sure what icon library the icons are chosen from. I’m still working on finding an icon other than a traditional style phone :telephone_receiver: to better demonstrate sending over text.

And adding styling was pretty easy too.

Thanks again to the original creator Jeff and thanks Richard for helping!

2 Likes
6

They are standard Font Awesome icons. More info on w3schools.

This will render a mobile icon:
<i class="fa fa-mobile-phone"></i>

1 Like
7

Great thinking, thank you!

1 Like