Merge pull request #75 from github/refactor-social-share

Share: Only list social media that support a share URL

_config.yml

@@ -27,7 +27,7 @@ projects:
     projects:
     # - repo-name
 
-social_media:
+# social_media:
   # behance: your_username
   # facebook: your_username
   # dribbble: your_username

_data/social_media.yml

@@ -6,11 +6,13 @@ behance:
 facebook:
   name: Facebook
   profile_url_prefix: https://www.facebook.com/
+  share_url_prefix: https://www.facebook.com/sharer/sharer.php?u=
   icon_svg: '<svg height="20" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 15.3 15.4"><path d="M14.5 0H.8a.88.88 0 0 0-.8.9v13.6a.88.88 0 0 0 .8.9h7.3v-6h-2V7.1h2V5.4a2.87 2.87 0 0 1 2.5-3.1h.5a10.87 10.87 0 0 1 1.8.1v2.1h-1.3c-1 0-1.1.5-1.1 1.1v1.5h2.3l-.3 2.3h-2v5.9h3.9a.88.88 0 0 0 .9-.8V.8a.86.86 0 0 0-.8-.8z" fill="#959da5"/></svg>'
 
 linkedin:
   name: LinkedIn
   profile_url_prefix: https://www.linkedin.com/in/
+  share_url_prefix: https://www.linkedin.com/shareArticle?mini=true&url=
   icon_svg: '<svg height="20" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 19 18"><path d="M3.94 2A2 2 0 1 1 2 0a2 2 0 0 1 1.94 2zM4 5.48H0V18h4zm6.32 0H6.34V18h3.94v-6.57c0-3.66 4.77-4 4.77 0V18H19v-7.93c0-6.17-7.06-5.94-8.72-2.91z" fill="#959da5"/></svg>'
 
 stackoverflow:
@@ -21,6 +23,7 @@ stackoverflow:
 twitter:
   name: Twitter
   profile_url_prefix: https://www.twitter.com/
+  share_url_prefix: https://twitter.com/share?url=
   icon_svg: '<svg height="20" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 273.5 222.3"><path d="M273.5 26.3a109.77 109.77 0 0 1-32.2 8.8 56.07 56.07 0 0 0 24.7-31 113.39 113.39 0 0 1-35.7 13.6 56.1 56.1 0 0 0-97 38.4 54 54 0 0 0 1.5 12.8A159.68 159.68 0 0 1 19.1 10.3a56.12 56.12 0 0 0 17.4 74.9 56.06 56.06 0 0 1-25.4-7v.7a56.11 56.11 0 0 0 45 55 55.65 55.65 0 0 1-14.8 2 62.39 62.39 0 0 1-10.6-1 56.24 56.24 0 0 0 52.4 39 112.87 112.87 0 0 1-69.7 24 119 119 0 0 1-13.4-.8 158.83 158.83 0 0 0 86 25.2c103.2 0 159.6-85.5 159.6-159.6 0-2.4-.1-4.9-.2-7.3a114.25 114.25 0 0 0 28.1-29.1" fill="#959da5"/></svg>'
 
 youtube:

_includes/social_media_share_url.html

@@ -1,13 +0,0 @@
-{% if include.service == 'facebook' %}
-  {% capture share_url %}
-    https://www.facebook.com/sharer/sharer.php?u={{ include.permalink | prepend: site.url | prepend: site.baseurl | url_encode }}
-  {% endcapture %}
-{% elsif include.service == 'linkedin' %}
-  {% capture share_url %}
-    https://www.linkedin.com/shareArticle?mini=true&url={{ include.permalink | prepend: site.url | prepend: site.baseurl | url_encode }}&title={{ include.title | url_encode }}&source=LinkedIn
-  {% endcapture %}
-{% elsif include.service == 'twitter' %}
-  {% capture share_url %}
-    https://twitter.com/share?text={{ include.title | url_encode }}&url={{ include.permalink | prepend: site.url | prepend: site.baseurl | url_encode }}
-  {% endcapture %}
-{% endif %}{{ share_url | strip }}

_layouts/post.html

@@ -2,20 +2,33 @@
 
 {% capture post_body %}
   {% if site.social_media %}
-    <div class="col-sm-4 col-lg-3 d-flex flex-wrap flex-items-center d-sm-block float-sm-right border rounded-2 bg-white p-3 mb-5 ml-md-5">
+    {% assign shareable_social_media = '' | split: ',' %}
-      <h3 class="text-gray-dark mr-3 mr-sm-0">Share</h3>
+
-      <ul class="d-flex d-sm-block list-style-none">
+    {% for account in site.social_media %}
-        {% for account in site.social_media %}
+      {% assign service_shortname = account[0] %}
-          <li class="mt-sm-3">
+      {% assign service = site.data.social_media[service_shortname] %}
-            {% assign service_shortname = account[0] %}
+
-            {% assign service = site.data.social_media[service_shortname] %}
+      {% if service.share_url_prefix %}
-            <a href="{% include social_media_share_url.html service=service_shortname title=page.title permalink=page.url %}" title="Share on {{ service.name }}" class="d-flex flex-items-center">
+        {% assign shareable_social_media = shareable_social_media | push: service %}
-              <div style="width:32px">{{ service.icon_svg }}</div><span class="d-none d-sm-inline-block text-gray-light">{{ service.name }}</span>
+      {% endif %}
-            </a>
+    {% endfor %}
-          </li>
+
-        {% endfor %}
+    {% assign total_shareable_services = shareable_social_media | size %}
-      </ul>
+
-    </div>
+    {% if total_shareable_services > 0 %}
+      <div class="col-sm-4 col-lg-3 d-flex flex-wrap flex-items-center d-sm-block float-sm-right border rounded-2 bg-white p-3 mb-5 ml-md-5">
+        <h3 class="text-gray-dark mr-3 mr-sm-0">Share</h3>
+        <ul class="d-flex d-sm-block list-style-none">
+          {% for service in shareable_social_media %}
+            <li class="mt-sm-3">
+              <a href="{{ service.share_url_prefix }}{{ page.url | prepend: site.url | prepend: site.baseurl | url_encode }}" title="Share on {{ service.name }}" class="d-flex flex-items-center">
+                <div style="width:32px">{{ service.icon_svg }}</div><span class="d-none d-sm-inline-block text-gray-light">{{ service.name }}</span>
+              </a>
+            </li>
+          {% endfor %}
+        </ul>
+      </div>
+    {% endif %}
   {% endif %}
   <div class="article">
     {{ content }}