Skip to content

Share links not mobile friendly and uses inline JS #59

@madsolar8582

Description

@madsolar8582

In the post-footer.html partial template, the Twitter, Facebook, Google+, and LinkedIn options all attempt to open a window with a specific size:

<div class="share">
{{ if or (not (isset .Site.Params "sharetwitter")) .Site.Params.shareTwitter }}
<a class="icon-twitter" href="https://twitter.com/share?text={{ .Title }}&url={{ .Permalink }}"
onclick="window.open(this.href, 'twitter-share', 'width=550,height=235');return false;">
<i class="fa fa-twitter"></i>
<span class="hidden">Twitter</span>
</a>
{{ end }}
{{ if or (not (isset .Site.Params "sharefacebook")) .Site.Params.shareFacebook }}
<a class="icon-facebook" href="https://www.facebook.com/sharer/sharer.php?u={{ .Permalink }}"
onclick="window.open(this.href, 'facebook-share','width=580,height=296');return false;">
<i class="fa fa-facebook"></i>
<span class="hidden">Facebook</span>
</a>
{{ end }}
{{ if or (not (isset .Site.Params "sharegoogleplus")) .Site.Params.shareGooglePlus }}
<a class="icon-google-plus" href="https://plus.google.com/share?url={{ .Permalink }}"
onclick="window.open(this.href, 'google-plus-share', 'width=490,height=530');return false;">
<i class="fa fa-google-plus"></i>
<span class="hidden">Google+</span>
</a>
{{ end }}
{{ if .Site.Params.shareLinkedIn }}
<a class="icon-linkedin" href="https://www.linkedin.com/shareArticle?mini=true&title={{ .Title }}&url={{ .Permalink }}&summary={{ .Description }}"
onclick="window.open(this.href, 'linkedin-share', 'width=554,height=481');return false;">
<i class="fa fa-linkedin"></i>
<span class="hidden">LinkedIn</span>
</a>
{{ end }}
</div>

This does not work on mobile and might need to specifically call out about:blank as the target so that a new tab can be used.

Additionally, since the JS for the onclick event is inlined, a CSP that disables inline JS cannot be used. To make sites that use this theme more secure, the JS needs to be pulled into its own file(s) and then referenced in the page.

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions