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 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>
{% 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>
<div class="entry-content" itemprop="description">
{{ content }}

View file

@ -10,6 +10,7 @@ image:
credit: Michael Rose
creditlink: http://mademistakes.com
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.

View file

@ -9,6 +9,7 @@ image:
credit: Michael Rose
creditlink: http://mademistakes.com
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.

View file

@ -5,6 +5,7 @@ description: "Examples and code for displaying images in posts."
category: articles
tags: [sample post, images, test]
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.

View file

@ -10,6 +10,7 @@ image:
credit: Michael Rose
creditlink: http://mademistakes.com
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.

View file

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

View file

@ -9,6 +9,7 @@ image:
credit: Michael Rose
creditlink: http://mademistakes.com
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]

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>
{% 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 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.