Tra.pt Tools Logo Tra.pt Tool Blog

Share Links in Weblog

So I wanted to get some share links into this weblog but as I'm using omg.lol's weblog tool, there's some quirks that I wasn't sure about. But I have them working! See ⏬ below!!

Twitter

The key issue is there's no documented "base-url" that shows the base url of the site. You have to hard code that in...so below lookout for example.com.

<a 
  href="https://twitter.com/intent/tweet?source=https://example.com/&text={post-title}&url=https://example.com/{slug}&via=example" 
  title="Share on Twitter" 
  target="_blank" 
  rel="noopener"
>
  <i class="fab fa-twitter"></i>
</a>

Facebook

Same thing, update the portions that make sense for your post:

<a 
  href="https://www.facebook.com/sharer/sharer.php?u=https://example.com/{slug}" 
  title="Share on Facebook" 
  target="_blank" 
  rel="noopener"
>
  <i class="fab fa-facebook-f"></i>
</a>

Reddit

Again, check the portion to address your needs:

<a 
  href="https://www.reddit.com/submit?title={post-title}&url=https://example.com/{slug}" 
  title="Share on Reddit" 
  target="_blank" 
  rel="noopener"
>
  <i class="fab fa-reddit"></i>
</a>

Mastodon

Saved Mastodon for the end because it's a bit more difficult. Since there are 100s of Mastodon instances, you need to know the sharer's instance before you can post. So, this uses some small JavaScript to get the instance and puts the share there.

<a 
  data-src="{weblog-title}: {description} https://example.com/{slug} via @example@example.com" 
  onclick="mastShare(this)" 
  style="cursor: pointer;" 
  title="Share to Mastodon"
>
    <i class="fab fa-mastodon"></i>
</a>

Then at the end of you page add the following javascript between some <script> tags.

const mastShare = (target) => {
  console.log(target)
  let src = target.getAttribute("data-src")
  let domain = prompt("Enter your Mastodon location", "social.lol")
  if (domain.trim() == "" || domain == null) {
    return;
  }
  url = "https://" + domain.trim() + "/share?text=" + src
  window.open(url, '_blank')
}

Easy peasy...let me know if any of these are an issue.


Recent posts