Optimize share buttons

Author: EllieTheYeen

_config.yml

@@ -15,6 +15,70 @@ relative_links:
 include: [".well-known"]
 timezone: Europe/Stockholm
 paginate: 20
+defaultmedia: https://github.com/EllieTheYeen.png
+
+sharebuttons:
+  - name: Tumblr
+    base: https://www.tumblr.com/widgets/share/tool
+    extra: posttype=link
+    url: canonicalUrl
+    title: title
+    color: '#34465D'
+  - name: Twitter
+    base: https://twitter.com/intent/tweet
+    url: url
+    title: text
+    color: '#08a0e9'
+  - name: Reddit
+    base: https://reddit.com/submit
+    url: url
+    title: title
+    color: '#ff4500'
+  - name: Facebook
+    base: https://www.facebook.com/sharer.php
+    url: u
+    color: '#4267B2'
+  - name: Pinterest
+    base: http://pinterest.com/pin/create/link/
+    url: url
+    title: description
+    media: media
+    color: '#cc2127'
+  - name: Telegram
+    base: https://telegram.me/share/url
+    url: url
+    color: '#27a6e7'
+  - name: YCombinator
+    base: https://news.ycombinator.com/submitlink
+    url: u
+    title: t
+    color: '#cc5200'
+  - name: Instapaper
+    base: https://www.instapaper.com/edit
+    url: url
+    color: '#828181'
+  - name: Pinboard
+    base: https://pinboard.in/add
+    url: url
+    color: '#1120ab'
+  - name: Pocket
+    base: https://getpocket.com/edit
+    url: url
+    color: '#e0264b'
+  - name: GMail
+    base: https://mail.google.com/mail/u/0/
+    extra: 'fs=1&tf=cm'
+    body: body
+    color: '#ea4235'
+  - name: Blogger
+    base: https://www.blogger.com/blog_this.pyra
+    body: n
+    color: '#ff5722'
+  - name: Email
+    base: 'mailto:'
+    body: body
+    title: subject
+    color: '#26BF74'
 
 defaults:
   - scope:

_includes/share.html

@@ -1,70 +1,16 @@
 <div id="share">
     Share on
-    <a class="sharelink" title="Share this on Tumblr"
-        href="https://www.tumblr.com/widgets/share/tool?posttype=link&canonicalUrl={{ 'https://ellietheyeen.github.io' | append: page.url | uri_escape }}&title={{ page.title | uri_escape }}&caption=&content=&tags=">
-        <span class="btn" style="background-color: #34465D;">Tumblr</span>
-    </a>
-
-    <a class="sharelink" title="Share this on Twitter"
-        href="https://twitter.com/intent/tweet?url={{ 'https://ellietheyeen.github.io' | append: page.url | uri_escape }}&text={{ page.title | uri_escape }}">
-        <span class="btn" style="background-color: #08a0e9;">Twitter</span>
-    </a>
-
-    <a href="javascript:void" title="Share this on Mastodon"><span class="btn" style="background-color: #6260fa;"
-            onclick="mastodon_modal()">Mastodon</span></a>
-
-    <a class="sharelink" title="Share this on Reddit"
-        href="https://reddit.com/submit?url={{ 'https://ellietheyeen.github.io' | append: page.url | uri_escape }}&title={{ page.title | uri_escape }}">
-        <span class="btn" style="background-color: #ff4500;">Reddit</span></a>
-
-    <a class="sharelink" title="Share this on Facebook"
-        href="https://www.facebook.com/sharer.php?u={{ 'https://ellietheyeen.github.io' | append: page.url | uri_escape }}">
-        <span class="btn" style="background-color: #4267B2;">Facebook</span></a>
-
-    <a class="sharelink" title="Share this on Pinterest"
-        href="http://pinterest.com/pin/create/link/?url={{ 'https://ellietheyeen.github.io' | append: page.url | uri_escape }}&media=https://github.com/EllieTheYeen.png&description={{ page.title | uri_escape }}">
-        <span class="btn" style="background-color: #cc2127;">Pinterest</span>
-    </a>
-
-    <a class="sharelink" title="Share this on Telegram"
-        href="https://telegram.me/share/url?url={{ 'https://ellietheyeen.github.io' | append: page.url | uri_escape }}">
-        <span class="btn" style="background-color: #27a6e7;">Telegram</span>
-    </a>
 
-    <a class="sharelink" title="Share this on Ycombinator"
-        href="https://news.ycombinator.com/submitlink?u={{ 'https://ellietheyeen.github.io' | append: page.url | uri_escape }}&t={{ page.title | uri_escape }}">
-        <span class="btn" style="background-color: #cc5200;">Ycombinator</span>
-    </a>
-
-    <a class="sharelink" title="Share this on Instapaper"
-        href="https://www.instapaper.com/edit?url={{ 'https://ellietheyeen.github.io' | append: page.url | uri_escape }}">
-        <span class="btn" style="background-color: #828181;">Instapaper</span>
-    </a>
-
-    <a class="sharelink" title="Share this on Pinboard"
-        href="https://pinboard.in/add?url={{ 'https://ellietheyeen.github.io' | append: page.url | uri_escape }}">
-        <span class="btn" style="background-color: #1120ab;">Pinboard</span>
-    </a>
+    <a href="javascript:void" title="Share this on Mastodon">
+        <span class="btn" style="background-color: #6260fa;" onclick="mastodon_modal()">Mastodon</span></a>
 
-    <a class="sharelink" title="Share this on Pocket"
-        href="https://getpocket.com/edit?url={{ 'https://ellietheyeen.github.io' | append: page.url | uri_escape }}">
-        <span class="btn" style="background-color: #e0264b;">Pocket</span>
+    {% for butt in site.sharebuttons %}
+    <a class="sharelink" title="Share this on {{ butt.name }}" target="_blank"
+        href="{{ butt.base }}?{%- if butt.extra -%}{{ butt.extra }}{%- endif -%}{%- if butt.url -%}&{{ butt.url }}={{ 'https://ellietheyeen.github.io' | append: page.url | uri_escape }}{%- endif -%}{%- if butt.title -%}&{{ butt.title }}={{ page.title | uri_escape }}{%- endif -%}{%- if butt.body -%}&{{ butt.body }}={{ page.title | uri_escape }}%0A{{ 'https://ellietheyeen.github.io' | append: page.url | uri_escape }}%0A{%- endif -%}{%- if butt.media -%}&{{ butt.media }}={{ site.defaultmedia }}{%- endif -%}">
+        <span class="btn" style="background-color: {{ butt.color }};">{{ butt.name }}</span>
     </a>
+    {% endfor %}
 
-    <a class="sharelink" title="Share this on GMail"
-        href="https://mail.google.com/mail/u/0/?fs=1&tf=cm&body={{ page.title | uri_escape }}%0A{{ 'https://ellietheyeen.github.io' | append: page.url | uri_escape }}%0A">
-        <span class="btn" style="background-color: #ea4235;">GMail</span>
-    </a>
-
-    <a class="sharelink" title="Share this on Blogger"
-        href="https://www.blogger.com/blog_this.pyra?n={{ page.title | uri_escape }}%0A{{ 'https://ellietheyeen.github.io' | append: page.url | uri_escape }}%0A">
-        <span class="btn" style="background-color: #ff5722;">Blogger</span>
-    </a>
-
-    <a class="sharelink" title="Share this through email"
-        href="mailto:?subject={{ page.title | uri_escape }}&body={{ page.title | uri_escape }}%0A{{ 'https://ellietheyeen.github.io' | append: page.url | uri_escape }}%0A">
-        <span class="btn" style="background-color: #26BF74;">Email</span>
-    </a>
 </div>
 <dialog id="mastodon_modal">
     <button onclick="mastodon_modal(true)">Close</button><br />