Merge pull request #194 from safing/feature/ogp

Adding OGP

_config.yml

@@ -87,6 +87,13 @@ inter_post_navigation: false
 email: hello@safing.io
 emailobfuscated: "=b!isfg>#nbjmup;ifmmpAtbgjoh/jp#?ifmmpAtbgjoh/jp=0b?"
 
+##############################
+###### OGP settings ######
+##############################
+
+twitter_username: "@SafingIO"
+twitter_card_type: "summary_large_image"
+
 ###################################
 ###### media/content options ######
 ###################################

_includes/head.html

@@ -1,22 +1,13 @@
-<!-- meta -->
+
 <meta charset={{ site.encoding }}>
 <meta http-equiv="X-UA-Compatible" content="IE=edge">
 <meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">
+
+<title>{{ page.title }}</title>
 <meta name="description" content="{{ site.description }}">
 <meta name="author" content="{{ site.author }}">
-<title>
-  {% if page.type == "podcast" %}
-    {% assign title_length = page.title | size %}
-    {{ page.title | slice: 7, title_length }} - The Safing Podcast #{{ page.title | slice: 2, 2 }}
-  {% elsif page.type == "video" %}
-    {% assign title_length = page.title | size %}
-    {{ page.title | slice: 7, title_length }} - Safing Update #{{ page.title | slice: 2, 2 }}
-  {% elsif page.type == "post" %}
-    {{ page.title }} - Safing Blog
-  {% else %}
-    {{ page.title }}
-  {% endif %}
-</title>
+
+{% include head_ogp.html %}
 
 <!-- Favicon and other icons (made with http://www.favicon-generator.org/) -->
 <link rel="apple-touch-icon" sizes="57x57" href="{{ site.assets_url }}icons/apple-icon-57x57.png">

_includes/head_ogp.html

@@ -0,0 +1,67 @@
+<!-- Other & Facebook -->
+<meta property="og:url" content="{{ site.url }}{{ page.url }}">
+<meta property="og:type" content="website">
+<meta property="og:title" content="{{ page.title }}">
+
+<!-- 
+    Todo: Daniel said leave a comment here and this 
+    need also need more clarification for how/what 
+    should be displayed here
+ -->
+<!-- <meta property="og:description" content="
+  {% if page.summary != null %}
+    {{ page.summary | truncatewords: 18 }}
+  {% else %}
+    {{ site.description }}
+  {% endif %}
+"> -->
+
+<meta property="og:image" content="
+  {% if page.category == "podcast" %}
+    {% if page.custom_thumbnail_name %}
+        {{ site.url }}{{ site.img_url }}thumbnails/podcast/{{ page.custom_thumbnail_name }}.png
+    {% else %}
+        {{ site.url }}{{ site.img_url }}thumbnails/podcast/placeholder.png
+    {% endif %}
+  {% elsif page.category == "video" %}
+    {{ site.url }}{{ site.img_url }}thumbnails/video/{{ page.custom_thumbnail_name }}.png
+  {% elsif page.category == "blog" %}
+    {{ site.url }}{{ site.img_url }}thumbnails/blog/{{ page.custom_thumbnail_name }}.png
+  {% else %}
+    {{ site.url }}{{ site.img_url }}ogp/default.png
+  {% endif %}
+">
+
+<!-- Twitter -->
+<meta name="twitter:title" content="{{ page.title }}">
+
+<!-- 
+    Todo: Daniel said leave a comment here and this 
+    need also need more clarification for how/what 
+    should be displayed here
+ -->
+<!-- <meta name="twitter:description" content="
+{% if page.summary != null %}
+  {{ page.summary | truncatewords: 18 }}
+{% else %}
+  {{ site.description }}
+{% endif %}
+"> -->
+
+<meta name="twitter:site" content="{{ site.twitter_username }}">
+<meta name="twitter:card" content="{{ site.twitter_card_type }}">
+<meta name="twitter:image" content="
+{% if page.category == "podcast" %}
+  {% if page.custom_thumbnail_name %}
+    {{ site.url }}{{ site.img_url }}thumbnails/podcast/{{ page.custom_thumbnail_name }}.png
+  {% else %}
+    {{ site.url }}{{ site.img_url }}thumbnails/podcast/placeholder.png
+  {% endif %}
+{% elsif page.category == "video" %}
+  {{ site.url }}{{ site.img_url }}thumbnails/video/{{ page.custom_thumbnail_name }}.png
+{% elsif page.category == "blog" %}
+  {{ site.url }}{{ site.img_url }}thumbnails/blog/{{ page.custom_thumbnail_name }}.png
+{% else %}
+  {{ site.url }}{{ site.img_url }}ogp/default.png
+{% endif %}
+">

_includes/thumbnail_podcast.html

@@ -7,7 +7,7 @@
         >
       {% else %}
         <img
-          src="{{ site.img_url }}thumbnails/podcast/{{ episode.custom_thumbnail_name }}.jpg"
+          src="{{ site.img_url }}thumbnails/podcast/{{ episode.custom_thumbnail_name }}.png"
           style="max-width: 365px; max-height: 223px;"
         >
       {% endif %}