Enable ability to add social markup tags to <head>.

h/t to https://github.com/DandyDev/pelican-bootstrap3/
duilio · Jan 10, 2015 · e683922 · e683922
1 parent 46a57f7
commit e683922
Show file tree

Hide file tree

Showing 2 changed files with 80 additions and 2 deletions.
diff --git a/README.rst b/README.rst
@@ -81,7 +81,7 @@ Sidebar image
 - ``SEARCH_BOX``: set to true to enable site search box
 - ``SITESEARCH``: [default: 'http://google.com/search'] search engine to which
   search form should be pointed (optional)
-  
+
 QR Code generation
 -------------
 
@@ -109,6 +109,38 @@ Favicon
 - ``FAVICON_FILENAME``: set to path of your favicon. The default is empty in
   which case the template will use the hardcoded address ``favicon.png``.
 
+Markup for Social Sharing
+-------------------------
+
+In order to specify page title, description, image and other metadata for
+customized social sharing (e.g.
+`Twitter cards <https://dev.twitter.com/cards/overview>`_), you can add
+the following metadata to each post:
+
+- ``title``: The title of the post. This is expected for any post.
+- ``description``: A long form description of the post.
+- ``social_image``: A path to an image, relative to ``SITEURL``. This image
+                    will show up next to the other information in social
+                    shares.
+- ``twitter_site``: A Twitter handle, e.g. ``@getpelican`` for the owner
+                    of the site.
+` ``twitter_creator``: A Twitter handle, e.g. ``@getpelican`` for the author
+                       of the post.
+
+In addition, you can provide a default post image (instead of setting
+``social_image`` in the post metadata), by setting ``SOCIAL_IMAGE`` in your
+``pelicanconf``.
+
+These can be used for social sharing on Google+, Twitter, and Facebook as
+well as provide more detailed page data for Google Search. In order
+to enable in each respective channel, your post metadata needs to specify:
+
+- ``title``: The title of the post. This is expected for any post.
+
+- ``use_schema_org: true``: For Google and Google+ specific meta tags.
+- ``use_open_graph: true``: For Facebook specific meta tags.
+- ``use_twitter_card: true``: For Twitter specific meta tags.
+
 Contribute
 ----------
 
@@ -125,7 +157,7 @@ Authors
 - `Jake Vanderplas`_: Work on Twitter, Google plus, Facebook, and Disqus plugins.
 - `Nicholas Terwoord`_: Additional fixes for Twitter, Google plus, and site search
 - `Mortada Mehyar`_: Display advertising features for Google Analytics
-- ... and many others. `Check the contributors`_. 
+- ... and many others. `Check the contributors`_.
 
 
 .. _`Pelican`: http://getpelican.com

diff --git a/templates/base.html b/templates/base.html
@@ -2,10 +2,17 @@
 <!--[if IEMobile 7 ]><html class="no-js iem7"><![endif]-->
 <!--[if lt IE 9]><html class="no-js lte-ie8"><![endif]-->
 <!--[if (gt IE 8)|(gt IEMobile 7)|!(IEMobile)|!(IE)]><!--><html class="no-js" lang="en"><!--<![endif]-->
+{% if article and article.use_schema_org %}
+<head itemscope itemtype="http://schema.org/Article">
+{% else %}
 <head>
+{% endif %}
   <meta charset="utf-8">
   <title>{% block title %}{{ SITENAME }}{% endblock %}</title>
   <meta name="author" content="{{ AUTHOR }}">
+  {% if article and article.description %}
+  <meta name="description" content="{{ article.description }}" />
+  {% endif %}
 
   {% if FEED_FEEDBURNER %}
   <link href="http://feeds.feedburner.com/{{ FEED_FEEDBURNER }}" type="application/rss+xml" rel="alternate"
@@ -25,6 +32,45 @@
     {{ EXTRA_HEADER }}
   {% endif %}
 
+  {% if article %}
+    {% if article.use_schema_org %}
+    <!-- Schema.org markup for Google+ -->
+    <meta itemprop="name" content="{{ article.title }}" />
+    <meta itemprop="description" content="{{ article.description }}" />
+    {% if article.social_image %}
+    <meta itemprop="image" content="{{ SITEURL }}/{{ article.social_image }}" />
+    {% elif SOCIAL_IMAGE %}
+    <meta itemprop="image" content="{{ SITEURL }}/{{ SOCIAL_IMAGE }}" />
+    {% endif %}
+    {% endif %}
+
+    {% if article.use_open_graph %}
+    <!-- Open Graph data -->
+    <meta property="og:type" content="article" />
+    <meta property="og:title" content="{{ article.title }}" />
+    {% if article.social_image %}
+    <meta property="og:image" content="{{ SITEURL }}/{{ article.social_image }}" />
+    {% elif SOCIAL_IMAGE %}
+    <meta property="og:image" content="{{ SITEURL }}/{{ SOCIAL_IMAGE }}" />
+    {% endif %}
+    <meta property="og:description" content="{{ article.description }}" />
+    {% endif %}
+
+    {% if article.use_twitter_card %}
+    <!-- Twitter Card data -->
+    <meta name="twitter:card" content="summary" />
+    <meta name="twitter:site" content="{{ article.twitter_site }}" />
+    <meta name="twitter:title" content="{{ article.title }}" />
+    <meta name="twitter:description" content="{{ article.description }}" />
+    <meta name="twitter:creator" content="{{ article.twitter_creator }}" />
+    {% if article.social_image %}
+    <meta name="twitter:image" content="{{ SITEURL }}/{{ article.social_image }}" />
+    {% elif SOCIAL_IMAGE %}
+    <meta name="twitter:image" content="{{ SITEURL }}/{{ SOCIAL_IMAGE }}" />
+    {% endif %}
+    {% endif %}
+  {% endif %}
+
   <!-- http://t.co/dKP3o1e -->
   <meta name="HandheldFriendly" content="True">
   <meta name="MobileOptimized" content="320">