Added support for using text based social sharing links instead of javascript widgets which may track users and do trigger crazy high http requests. Also added a custom sharing template file for injecting any other sharing widget into the sharing section after a post

This commit is contained in:
Brandon Mathis 2012-06-05 00:07:23 -05:00
parent 0d2aac5676
commit d353d3de8b
12 changed files with 79 additions and 10 deletions

View File

@ -62,9 +62,10 @@ $page-border-bottom: darken($footer-bg, 5) !default;
/* Core theme application */ /* Core theme application */
a { a {
color: $link-color;
@include link-colors($link-color, $hover: $link-color-hover, $focus: $link-color-hover, $visited: $link-color-visited, $active: $link-color-active); @include link-colors($link-color, $hover: $link-color-hover, $focus: $link-color-hover, $visited: $link-color-visited, $active: $link-color-active);
} }
aside.sidebar a { .sidebar a {
@include link-colors($sidebar-link-color, $hover: $sidebar-link-color-hover, $focus: $sidebar-link-color-hover, $active: $sidebar-link-color-active); @include link-colors($sidebar-link-color, $hover: $sidebar-link-color-hover, $focus: $sidebar-link-color-hover, $active: $sidebar-link-color-active);
} }
a { a {

View File

@ -19,7 +19,7 @@ article {
} }
.blog-index & { background: none; padding-bottom: 0; } .blog-index & { background: none; padding-bottom: 0; }
p { p {
font-size: .9em; font-size: .8em;
margin: 0; margin: 0;
color: $text-color-light; color: $text-color-light;
&.meta { @extend .sans; position: absolute; top: 0; } &.meta { @extend .sans; position: absolute; top: 0; }

View File

@ -1,3 +1,37 @@
@mixin social-button-bg($img, $color: #444) {
color: $color;
&:visited, &:hover, &:visited:hover { color: $color; }
position: relative;
padding-left: image-width($img) + 6px;
&:before {
content: "";
background: image-url($img) no-repeat center center;
width: image-width($img);
height: image-height($img);
display: inline-block;
position: absolute; left: 3px;
top: 3px;
}
}
.simple-social-button {
display: inline-block;
border: 1px solid #ccc;
background-color: #e5e5e5;
@include background-image(linear-gradient(#fff, #ddd));
&:hover {
@include background-image(linear-gradient(#f5f5f5, #ccc));
border-color: #b5b5b5;
background-color: #ddd;
}
padding: .2em .5em .1em; line-height: 1.45em;
font-size: 13px;
font-weight: bold;
text-decoration: none;
text-shadow: #fff 0 1px;
@include border-radius(.3em);
}
.sharing { .sharing {
p.meta + & { p.meta + & {
padding: { top: 1em; left: 0; } padding: { top: 1em; left: 0; }
@ -6,3 +40,16 @@
} }
#fb-root { display: none; } #fb-root { display: none; }
.googleplus-share {
@extend .simple-social-button;
@include social-button-bg('googleplus.png', #db583b);
}
.facebook-share {
@extend .simple-social-button;
@include social-button-bg('facebook.png', #4e5a9b);
}
.twitter-share, .sidebar a.twitter-follow-button {
@extend .simple-social-button;
@include social-button-bg('twitter.png');
}

View File

@ -1,7 +1,7 @@
.side-shadow-border { .side-shadow-border {
@include box-shadow(lighten($sidebar-bg, 5) 0 1px); @include box-shadow(lighten($sidebar-bg, 5) 0 1px);
} }
aside.sidebar { .sidebar {
overflow: hidden; overflow: hidden;
color: $sidebar-color; color: $sidebar-color;
text-shadow: lighten($sidebar-bg, 8) 0 1px; text-shadow: lighten($sidebar-bg, 8) 0 1px;
@ -44,7 +44,7 @@ aside.sidebar {
color: inherit; color: inherit;
@include transition(color .5s); @include transition(color .5s);
} }
&:hover a { &:hover p a, &:hover li a {
color: $sidebar-link-color; color: $sidebar-link-color;
&:hover { color: $sidebar-link-color-hover; } &:hover { color: $sidebar-link-color-hover; }
} }

View File

@ -1,5 +1,7 @@
{% include disqus.html %} {% include disqus.html %}
{% unless site.do_not_track %}
{% include facebook_like.html %} {% include facebook_like.html %}
{% include google_plus_one.html %} {% include google_plus_one.html %}
{% include twitter_sharing.html %} {% include twitter_sharing.html %}
{% endunless %}
{% include custom/after_footer.html %} {% include custom/after_footer.html %}

View File

@ -0,0 +1,3 @@
{% comment %}
You can add sharing buttons here. Just so you know, some services may use these buttons to track visitors to your site, and also these can trigger lots of http requests slowing your site down for low bandwidth and mobile users.
{% endcomment %}

View File

@ -1,6 +1,6 @@
{% if site.facebook_like %} {% if site.facebook_like %}
<div id="fb-root"></div> <div id="fb-root"></div>
<script>(function(d, s, id) { <script type="text/javascript">(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0]; var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) {return;} if (d.getElementById(id)) {return;}
js = d.createElement(s); js.id = id; js = d.createElement(s); js.id = id;

View File

@ -1,11 +1,24 @@
<div class="sharing"> <div class="sharing">
{% if site.twitter_tweet_button %} {% if site.twitter_tweet_button %}
<a href="http://twitter.com/share" class="twitter-share-button" data-url="{{ site.url }}{{ page.url }}" data-via="{{ site.twitter_user }}" data-counturl="{{ site.url }}{{ page.url }}" >Tweet</a> {% if site.do_not_track %}
<a href="http://twitter.com/share" title="Tweet this" class="twitter-share" target="_blank">Tweet</a>
{% else %}
<a href="http://twitter.com/share" title="Tweet this" class="twitter-share-button twitter-share" data-url="{{ site.url }}{{ page.url }}" data-via="{{ site.twitter_user }}" data-counturl="{{ site.url }}{{ page.url }}" target="_blank" >Tweet</a>
{% endif %}
{% endif %} {% endif %}
{% if site.google_plus_one %} {% if site.google_plus_one %}
{% if site.do_not_track %}
<a title="+1 on Google Plus" class="googleplus-share" href="https://plusone.google.com/_/+1/confirm?hl=en&url={{site.url}}{{page.url}}" target="_blank">+1</a>
{% else %}
<div class="g-plusone" data-size="{{ site.google_plus_one_size }}"></div> <div class="g-plusone" data-size="{{ site.google_plus_one_size }}"></div>
{% endif %} {% endif %}
{% endif %}
{% if site.facebook_like %} {% if site.facebook_like %}
{% if site.do_not_track %}
<a title="Share on Facebook" class="facebook-share" href="http://www.facebook.com/sharer.php?s=100&p[url]={{site.url}}{{page.url}}" target="_blank">Share</a>
{% else %}
<div class="fb-like" data-send="true" data-width="450" data-show-faces="false"></div> <div class="fb-like" data-send="true" data-width="450" data-show-faces="false"></div>
{% endif %} {% endif %}
{% endif %}
{% include custom/sharing.html %}
</div> </div>

Binary file not shown.

After

Width:  |  Height:  |  Size: 209 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 365 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 302 B

View File

@ -43,8 +43,8 @@ pagination_dir: blog # Directory base for pagination URLs eg. /blog/page/2/
recent_posts: 5 # Posts in the sidebar Recent Posts section recent_posts: 5 # Posts in the sidebar Recent Posts section
excerpt_link: "Read on &rarr;" # "Continue reading" link text at the bottom of excerpted articles excerpt_link: "Read on &rarr;" # "Continue reading" link text at the bottom of excerpted articles
excerpt_in_feed: false # Truncate excerpted articles in the atom feed excerpt_in_feed: false # Truncate excerpted articles in the atom feed
permalink_label: "&infin;" permalink_label: "Permalink"
permalink_label_feed: "&infin; Permalink" permalink_label_feed: "&#9875; Permalink"
linklog_marker: "&rarr;" linklog_marker: "&rarr;"
linklog_marker_position: after linklog_marker_position: after
linklog_marker_position_feed: after linklog_marker_position_feed: after
@ -66,6 +66,9 @@ blog_index_asides: [asides/twitter.html, asides/delicious.html, asides/pinboard.
# 3rd Party Settings # # 3rd Party Settings #
# ----------------------- # # ----------------------- #
# Use text links instead of Javascript widgets for Twitter, Facebook and Google Plus
do_not_track: false
# Github repositories # Github repositories
github_user: github_user:
github_repo_count: 0 github_repo_count: 0