Skip to content

Fix broken "Share on LinkedIn" and "Copy Link" buttons on blog posts and blog list #305

Description

@h30s

Problem

When reading blog posts or browsing the blog list, the social share panel has buttons for X/Twitter, Facebook, LinkedIn, and a "Copy Link" button. However, the LinkedIn and Copy Link buttons do not work:

  1. Share on LinkedIn: The button is hardcoded with href="#linkedinshare" instead of a LinkedIn sharing URL endpoint. There is no JavaScript handler for this ID, so clicking it just appends #linkedinshare to the browser URL hash without opening a LinkedIn share dialog.
  2. Copy Link: The button has class="link link_yank" and links to the page URL, but there is no click handler attached to copy the URL to the clipboard. Clicking it just re-navigates/reloads the page instead of copying the link.

User Impact

  • Readers cannot share OSL blog posts directly to LinkedIn.
  • Users who click "Copy Link" expecting to copy the URL to their clipboard to share with others get an unnecessary page jump/reload, and nothing is copied.

Expected Behavior

  • Clicking the LinkedIn share button should open the LinkedIn sharing dialog (e.g. https://www.linkedin.com/sharing/share-offsite/?url=<canonical_url>) in a new tab.
  • Clicking the "Copy Link" button should copy the post's URL to the clipboard and provide visual feedback (e.g., changing the tooltip/text to "Copied!").

Relevant Code References

  • theme/blog-post.html (lines 61–66):
    <a href="#linkedinshare" id="linkedinshare" class="linkedin" title="Share on LinkedIn" rel="nofollow">
      <svg class="icon" aria-hidden="true"><use xlink:href="#linkedin"/></svg>
    </a>
    <a href="{{ page.canonical_url or url }}" title="Copy link" class="link link_yank">
      <svg class="icon" aria-hidden="true"><use xlink:href="#copy"/></svg>
    </a>
  • theme/blog-list.html (lines 66–71):
    <a href="#linkedinshare" class="linkedin" title="Share on LinkedIn" rel="nofollow">
      <svg class="icon"><use xlink:href="#linkedin"/></svg>
    </a>
    <a href="{{ url }}" title="Copy Link" class="link link_yank">
      <svg class="icon"><use xlink:href="#copy"/></svg>
    </a>

Activity

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

      Milestone

      No milestone

      Relationships

      None yet

      Development

      No branches or pull requests

      Issue actions