franck-paul / socialshare

Dotclear 2 plugin

socialShare plugin for Dotclear 2

=================================

Summary

This plugin adds social share buttons to posts and/or pages, for:

Twitter, Facebook, Google+, LinkedIn, Mastodon social networks and by mail.

Markup

<div class="share">
 <p class="share-intro"><PREFIX></p>
 <ul class="share-links">
  <li>
   <a  class="share-twitter"
    target="_blank"
    title="Share this post on Twitter (new window)"
    href="https://twitter.com/share?url=<URL>&amp;text=<TITRE>&amp;via="<TWITTER-ACCOUNT>"
    rel="nofollow">
     Twitter
   </a>
  </li>
  <li>
   <a
    class="share-fb"
    target="_blank"
    title="Share this post on Facebook (new window)"
    href="https://www.facebook.com/sharer.php?u=<URL>&amp;t=<TITRE>"
    rel="nofollow">
     Facebook
   </a>
  </li>
  <li>
   <a
    class="share-in"
    target="_blank"
    title="Share this post on LinkedIn (new window)"
    href="https://www.linkedin.com/shareArticle?mini=true&url=<URL>&amp;title=<TITRE>"
    rel="nofollow">
     LinkedIn
   </a>
  </li>
  <li>
   <a
    class="share-mastodon"
    target="_blank"
    title="Share this post on Mastodon (new window)"
    href="web+mastodon://share?text=<TITRE>+<URL>"
    rel="nofollow">
     Mastodon
   </a>
  </li>
  <li>
   <a
    class="share-mail"
    target="_blank"
    title="Share this post by email (new window)"
    href="mailto:?subject=<TITRE>&amp;body=<URL>"
    rel="nofollow">
     email
    </a>
  </li>
 </ul>
</div>

Default style for social share links

.share {
 font-size: 0.875em;
 margin-top: 1.5em;
 margin-bottom: 1.5em;
 padding: 0.5em 0px;
 text-align: right;
 clear: both;
}

.share p, .share ul, .share li {
 display: inline-block;
 margin: 0px;
 padding: 0px;
}

.share p {
 padding-right: 1.5em;
}

.share a {
 padding: 0.25em 0.5em 0.25em 2em;
 margin-right: 0.5em;
 background-position: 0.25em center;
 background-repeat: no-repeat;
 background-size: 1.5em auto;
 text-decoration: none;
}

.share ul li:last-child a {
 margin-right: 0;
}

.share a:hover {
 color: #fff;
}

.share .share-twitter {
 background-image: url("index.php?pf=socialShare/img/icon-twitter.png");
 background-image: url("index.php?pf=socialShare/img/icon-twitter.svg"), none;
}
.share .share-twitter:hover {
 background-color: #78cbef;
}

.share .share-fb {
 background-image: url("index.php?pf=socialShare/img/icon-facebook.png");
 background-image: url("index.php?pf=socialShare/img/icon-facebook.svg"), none;
}
.share .share-fb:hover {
 background-color: #547bbc;
}

.share .share-in {
 background-image: url("index.php?pf=socialShare/img/icon-linkedin.png");
 background-image: url("index.php?pf=socialShare/img/icon-linkedin.svg"), none;
}
.share .share-in:hover {
 background-color: #1686b0;
}

.share .share-mastodon {
 background-image: url("index.php?pf=socialShare/img/icon-mastodon.png");
 background-image: url("index.php?pf=socialShare/img/icon-mastodon.svg"), none;
}
.share .share-mastodon:hover {
 background-color: #3088d4;
}

.share .share-mail {
 background-image: url("index.php?pf=socialShare/img/icon-email.png");
 background-image: url("index.php?pf=socialShare/img/icon-email.svg"), none;
}
.share .share-mail:hover {
 background-color: #99c122;
}

Notes

• the SVG icons will not be functionnal before Dotclear 2.8 (rev 3014)
• the image URLs (png or svg) may vary depending on your configuration
• list protocol handlers in Chrome : chrome://settings/handlers

socialshare's Issues

Ajouter les indications d'ouverture dans une nouvelle fenêtre

<li>
  <a class="share-mail" target="_blank" rel="nofollow noopener noreferrer" title="$href_title" href="$share_url"><span>$href_text</span></a>
</li>

Il faut ajouter par exemple "(nouvelle fenêtre)" dans le title du lien

Mastodon

Problème de contenu sur l'instance https://mstdn.nrkn.fr/ à tester avec une autre instance éventuellement.

Exemple de contenu (sur le billet https://open-time.net/post/2023/02/05/Journee-off) dans la popup sur l'instance :

web+mastodon://share?text=[OT]%20Journ%C3%A9e%20off+https%3A//open-time.net/post/2023/02/05/Journee-off

L'URL de partage est la suivante :

https://mstdn.nrkn.fr/share?text=web%2Bmastodon%3A%2F%2Fshare%3Ftext%3D%5BOT%5D%2520Journ%25C3%25A9e%2520off%2Bhttps%253A%2F%2Fopen-time.net%2Fpost%2F2023%2F02%2F05%2FJournee-off