BloggerにカスタムSNSボタンを設置しよう
オリジナルデザインのボタンを設置する際のベースにするコードです。
コード一覧
リスト（<ul>～</ul>）で使う想定で<li>～</li>タグが付いています。
<ul class="share-buttons">
<!-- お好みのSNS -->
</ul>BlogThis!
Bloggerでリブログするボタンです。URL、投稿タイトル、本文冒頭を含みます。
<li class='blogger'><a expr:href='"https://www.blogger.com/blog-this.g?u=" + data:post.url.canonical + "&n=" + data:post.title + "&t=" + data:post.snippets.short' rel='noopener' target='_blank'>BlogThis!</a></li>カラーコード
#ff9800
投稿タイトル - ブログタイトル、URLを含みます。
<li class='twitter'><a expr:href='"http://twitter.com/share?text=" + data:post.title + " - " + data:blog.title + " &url=" + data:post.url.canonical' rel='noopener' target='_blank'>Twitter</a></li>カラーコード
#00acee
URL、投稿タイトル - ブログタイトルを含みます。
<li class='facebook'><a expr:href='"http://www.facebook.com/sharer.php?u=" + data:post.url.canonical + "&t=" + data:post.title + " - " + data:blog.title' rel='noopener' target='_blank'>Facebook</a></li>カラーコード
#3b5998
Google+
URLを含みます。投稿タイトルは自動で読み込まれます。
<li class='google'><a expr:href='"https://plus.google.com/share?url=" + data:post.url.canonical' rel='noopener' target='_blank'>Google+</a></li>カラーコード
#db4a39
はてブ
URL、投稿タイトル - ブログタイトルを含みます。
<li class='hatebu'><a expr:href='"http://b.hatena.ne.jp/add?mode=confirm&url=" + data:post.url.canonical + "&" + data:post.title + " - " + data:blog.title' rel='noopener' target='_blank'>はてブ</a></li>カラーコード
#5d8ac1
URLを含みます。
<li class='pocket'><a expr:href='"http://getpocket.com/edit?url=" + data:post.url.canonical' rel='noopener' target='_blank'>Pocket</a></li>カラーコード
#f03e51
URL、投稿タイトル、投稿内の最初の画像を含みます。
<li class='pinterest'><a expr:href='"https://www.pinterest.com/pin/create/button/?url=" + data:post.url.canonical + "&description=" + data:post.title + "&media=" + data:post.featuredImage' rel='noopener' target='_blank'>Pinterest</a></li>カラーコード
#bd081c
Tumblr
URL、投稿タイトル、本文冒頭を含みます。
<li class='tumblr'><a expr:href='"https://www.tumblr.com/share/link?url=" + data:post.url.canonical + "&name=" + data:post.title + "&description=" + data:post.snippets.short' rel='noopener' target='_blank'>Tumblr</a></li>カラーコード
#36465d
Feedly
Feedlyでブログを購読するボタンです。Feed（Atom）のURLを含みます。
<li class='feedly'><a expr:href='"https://cloud.feedly.com/i/subscription/feed/" + data:feedLinks.first.url' rel='noopener' target='_blank'>Feedly</a></li>カラーコード
#87c040
サンプル
どちらの例もCSS グリッド レイアウトで配置しています。
新規コメント