Add support for simple social sharing links to posts

This commit is contained in:
Michael Rose 2014-01-02 11:55:49 -05:00
parent e92c672868
commit f708b13b8c
8 changed files with 27 additions and 5 deletions

View file

@ -30,6 +30,14 @@
{% if page.modified %}<span class="entry-date date modified"><time datetime="{{ page.modified }}" itemprop="dateModified"><i class="icon-pencil"></i> {{ page.modified | date: "%B %d, %Y" }}</time></span>{% endif %} {% if page.modified %}<span class="entry-date date modified"><time datetime="{{ page.modified }}" itemprop="dateModified"><i class="icon-pencil"></i> {{ page.modified | date: "%B %d, %Y" }}</time></span>{% endif %}
{% if site.disqus_shortname and page.comments %}<span class="entry-comments"><i class="icon-comment-alt"></i> <a href="#disqus_thread">Comment</a></span>{% endif %} {% if site.disqus_shortname and page.comments %}<span class="entry-comments"><i class="icon-comment-alt"></i> <a href="#disqus_thread">Comment</a></span>{% endif %}
<span><a href="{{ site.url }}{{ page.url }}" rel="bookmark" title="{{ page.title }}" itemprop="url"><i class="icon-link"></i> Permalink</a></span> <span><a href="{{ site.url }}{{ page.url }}" rel="bookmark" title="{{ page.title }}" itemprop="url"><i class="icon-link"></i> Permalink</a></span>
{% if page.share %}
<span class="social-share-facebook">
<a href="https://www.facebook.com/sharer/sharer.php?u={{ site.url }}{{ page.url }}" title="Share on Facebook" itemprop="Facebook"><i class="icon-facebook-sign"></i> Like</a></span>
<span class="social-share-twitter">
<a href="https://twitter.com/intent/tweet?text={{ site.url }}{{ page.url }}" title="Share on Twitter" itemprop="Twitter"><i class="icon-twitter-sign"></i> Tweet</a></span>
<span class="social-share-googleplus">
<a href="https://plus.google.com/share?url={{ site.url }}{{ page.url }}" title="Share on Google Plus" itemprop="GooglePlus"><i class="icon-google-plus-sign"></i> +1</a></span>
<!-- /.social-share -->{% endif %}
</footer> </footer>
<div class="entry-content" itemprop="description"> <div class="entry-content" itemprop="description">
{{ content }} {{ content }}

View file

@ -9,7 +9,8 @@ image:
feature: so-simple-sample-image-1.jpg feature: so-simple-sample-image-1.jpg
credit: Michael Rose credit: Michael Rose
creditlink: http://mademistakes.com creditlink: http://mademistakes.com
comments: true comments: true
share: true
--- ---
Below is just about everything you'll need to style in the theme. Check the source code to see the many embedded elements within paragraphs. Below is just about everything you'll need to style in the theme. Check the source code to see the many embedded elements within paragraphs.

View file

@ -8,7 +8,8 @@ image:
feature: so-simple-sample-image-2.jpg feature: so-simple-sample-image-2.jpg
credit: Michael Rose credit: Michael Rose
creditlink: http://mademistakes.com creditlink: http://mademistakes.com
comments: true comments: true
share: true
--- ---
Portland in shoreditch Vice, labore typewriter pariatur hoodie fap sartorial Austin. Pinterest literally occupy Schlitz forage. Odio ad blue bottle vinyl, 90's narwhal commodo bitters pour-over nostrud. Ugh est hashtag in, fingerstache adipisicing laboris esse Pinterest shabby chic Portland. Shoreditch bicycle rights anim, flexitarian laboris put a bird on it vinyl cupidatat narwhal. Hashtag artisan skateboard, flannel Bushwick nesciunt salvia aute fixie do plaid post-ironic dolor McSweeney's. Cliche pour-over chambray nulla four loko skateboard sapiente hashtag. Portland in shoreditch Vice, labore typewriter pariatur hoodie fap sartorial Austin. Pinterest literally occupy Schlitz forage. Odio ad blue bottle vinyl, 90's narwhal commodo bitters pour-over nostrud. Ugh est hashtag in, fingerstache adipisicing laboris esse Pinterest shabby chic Portland. Shoreditch bicycle rights anim, flexitarian laboris put a bird on it vinyl cupidatat narwhal. Hashtag artisan skateboard, flannel Bushwick nesciunt salvia aute fixie do plaid post-ironic dolor McSweeney's. Cliche pour-over chambray nulla four loko skateboard sapiente hashtag.

View file

@ -4,7 +4,8 @@ title: "A Post with Images"
description: "Examples and code for displaying images in posts." description: "Examples and code for displaying images in posts."
category: articles category: articles
tags: [sample post, images, test] tags: [sample post, images, test]
comments: true comments: true
share: true
--- ---
Here are some examples of what a post with images might look like. If you want to display two or three images next to each other responsively use `figure` with the appropriate `class`. Each instance of `figure` is auto-numbered and displayed in the caption. Here are some examples of what a post with images might look like. If you want to display two or three images next to each other responsively use `figure` with the appropriate `class`. Each instance of `figure` is auto-numbered and displayed in the caption.

View file

@ -9,7 +9,8 @@ image:
feature: so-simple-sample-image-3.jpg feature: so-simple-sample-image-3.jpg
credit: Michael Rose credit: Michael Rose
creditlink: http://mademistakes.com creditlink: http://mademistakes.com
comments: true comments: true
share: true
--- ---
This is a sample post with a large feature image[^1] up top and tons of text. Odio ad blue bottle vinyl, 90's narwhal commodo bitters pour-over nostrud. Ugh est hashtag in, fingerstache adipisicing laboris esse Pinterest shabby chic Portland. Shoreditch bicycle rights anim, flexitarian laboris put a bird on it vinyl cupidatat narwhal. Hashtag artisan skateboard, flannel Bushwick nesciunt salvia aute fixie do plaid post-ironic dolor McSweeney's. Cliche pour-over chambray nulla four loko skateboard sapiente hashtag. This is a sample post with a large feature image[^1] up top and tons of text. Odio ad blue bottle vinyl, 90's narwhal commodo bitters pour-over nostrud. Ugh est hashtag in, fingerstache adipisicing laboris esse Pinterest shabby chic Portland. Shoreditch bicycle rights anim, flexitarian laboris put a bird on it vinyl cupidatat narwhal. Hashtag artisan skateboard, flannel Bushwick nesciunt salvia aute fixie do plaid post-ironic dolor McSweeney's. Cliche pour-over chambray nulla four loko skateboard sapiente hashtag.

View file

@ -5,6 +5,7 @@ description: "Custom written post descriptions are the way to go... if you're no
category: articles category: articles
tags: [sample post, video] tags: [sample post, video]
comments: true comments: true
share: true
--- ---
<iframe width="560" height="315" src="http://www.youtube.com/embed/SqYiglufb8Y" frameborder="0"> </iframe> <iframe width="560" height="315" src="http://www.youtube.com/embed/SqYiglufb8Y" frameborder="0"> </iframe>

View file

@ -8,7 +8,8 @@ image:
feature: so-simple-sample-image-5.jpg feature: so-simple-sample-image-5.jpg
credit: Michael Rose credit: Michael Rose
creditlink: http://mademistakes.com creditlink: http://mademistakes.com
comments: true comments: true
share: true
--- ---
Syntax highlighting is a feature that displays source code, in different colors and fonts according to the category of terms. This feature facilitates writing in a structured language such as a programming language or a markup language as both structures and syntax errors are visually distinct. Highlighting does not affect the meaning of the text itself; it is intended only for human readers.[^1] Syntax highlighting is a feature that displays source code, in different colors and fonts according to the category of terms. This feature facilitates writing in a structured language such as a programming language or a markup language as both structures and syntax errors are visually distinct. Highlighting does not affect the meaning of the text itself; it is intended only for human readers.[^1]

View file

@ -231,6 +231,14 @@ Not sure if this only effects Kramdown or if it's an issue with Markdown in gene
<iframe width="560" height="315" src="http://www.youtube.com/embed/PWf4WUoMXwg" frameborder="0"> </iframe> <iframe width="560" height="315" src="http://www.youtube.com/embed/PWf4WUoMXwg" frameborder="0"> </iframe>
{% endhighlight %} {% endhighlight %}
#### Social Share Links
To enable Facebook, Twitter, and Google+ share links on a post or page, add the following to its front matter:
{% highlight yaml %}
share: true
{% endhighlight %}
#### Twitter Cards #### Twitter Cards
Twitter cards make it possible to attach images and post summaries to Tweets that link to your content. Summary Card meta tags have been added to `head.html` to support this, you just need to [validate and apply your domain](https://dev.twitter.com/docs/cards) to turn it on. Twitter cards make it possible to attach images and post summaries to Tweets that link to your content. Summary Card meta tags have been added to `head.html` to support this, you just need to [validate and apply your domain](https://dev.twitter.com/docs/cards) to turn it on.