phoenix-power共有ボタンがなかなか見つからないので、自作してみました。

octopress-share-button

Hatena Google+ Feedly

ソースは、GitHubに置きました。

install

インストールは以下のとおりです。setup.shも用意してあるので、インストールを簡易化したい方は、そちらの方を見てください。

1
2
3
4
5
6
7
$ cd /path/to/octopress/source/_includes/post

$ curl -O https://raw.githubusercontent.com/syui/octopress-share-button/master/share_button_syui.html

$ cd /path/to/octopress/sass/partials

$ curl -O https://raw.githubusercontent.com/syui/octopress-share-button/master/_icon.scss

setup.sh

1
2
3
4
5
$ git clone https://github.com/syui/octopress-share-button

$ cd !$:t

$ ./setup.sh

setting

一応、分離して、フォント、アイコン単体で使えるようになっています。

_config.yml
1
2
3
4
5
6
7
8
9
# Share Button @syui
# 全体の有効、無効
share_button_syui: true

# 各アイコンの有効、無効
share_button_hatena: true
share_button_twitter: true
share_button_gplus: false
share_button_rss: false

あとは、表示したい場所、具体的には、source/_layouts/post.htmlに以下のタグを挿入します。

  {% unless page.share_button_syui == false %}
    {% include post/share_button_syui.html %}
  {% endunless %}

css

CSSは以下の様な感じになっています。

_icon.scss
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
@import url(http://weloveiconfonts.com/api/?family=entypo);

/* entypo */
[class*="entypo-"]:before {
  font-family: 'entypo', sans-serif;
}

//font
span.entypo-twitter {
font-size: 15px;
color: #fff;
padding: 10px;
margin: 5px 0px;
background-color: #999999;
}

span.entypo-gplus {
font-size: 15px;
color: #fff;
padding: 10px;
margin: 5px 0px;
background-color: #999999;
}

span.entypo-vkontakte {
font-size: 15px;
color: #fff;
padding: 10px;
margin: 5px 0px;
background-color: #999999;
word-break: break-all;
}

span.entypo-rss {
font-size: 15px;
color: #fff;
padding: 10px;
margin: 5px 0px;
background-color: #999999;
}

//link
a:hover {
text-decoration: none;
}

span.entypo-twitter:hover {
transition: all 0.3s;
color: #66CCFF;
}
span.twitter-name:hover {
opacity: 0.6;
}

span.entypo-gplus:hover {
transition: all 0.3s;
color: #CC3300;
}
span.googleplus-name:hover {
opacity: 0.6;
}

span.entypo-vkontakte:hover {
transition: all 0.3s;
color: #3366CC;
}
span.hatena-name:hover {
opacity: 0.6;
}

span.entypo-rss:hover {
transition: all 0.3s;
color: #66FF33;
//color: #FF9933;
}
span.feedly-name:hover {
opacity: 0.6;
}

//title
span.twitter-name {
font-size: 15px;
text-align:center;
color: #fff;
padding: 10px;
margin: 5px 0px;
background-color: #66CCFF;
line-height:50px;
word-break: break-all;
}

span.googleplus-name {
font-size: 15px;
text-align:center;
color: #fff;
padding: 10px;
margin: 5px 0px;
background-color: #CC3300;;
line-height:50px;
word-break: break-all;
}

span.hatena-name {
font-size: 15px;
text-align:center;
color: #fff;
padding: 10px;
margin: 5px 0px;
background-color: #3366CC;
line-height:50px;
word-break: break-all;
}

span.feedly-name {
font-size: 15px;
text-align:center;
color: #fff;
padding: 10px;
margin: 5px 0px;
background-color: #66FF33;
line-height:50px;
word-break: break-all;
}

http://weloveiconfonts.com/

全体としてリンクを貼りたい場合は、divを使ってみてください。