2015/11/07

【Blogger】自作ソーシャルボタンを設置して読み込みを高速化する

Labels:

公式のソーシャルボタンの読み込みが遅いことがずっと気になっていた。
それに加え、Twitterがツイート数カウンターを11月20日までに廃止するということで、思い切ってソーシャルボタンを作り変えてみた。

ちなみにボタンにするのは、Twitter、facebook、Google+、はてなブックマーク、Pocketの5種類。
デザインはWebクリエイターボックスを参考にさせていただいた。


完成予想図


Before

After




ソーシャルボタンをつくる

HTML

<section id="share">
  <ul class="share">
    <li class="share-twitter"><a expr:href='"http://twitter.com/share?text=" + data:post.title + "｜" + data:blog.title + " &#64;bc_rikkoさんから&amp;url=" + data:post.canonicalUrl' target="_blank" onclick="javascript:window.open(this.href, '', 'menubar=no,toolbar=no,resizable=yes,scrollbars=yes,height=300,width=600');return false;"><i class="fa fa-twitter"></i><span class="btn-text">Twitter</span></a></li>
    <li class="share-facebook"><a expr:href='"http://www.facebook.com/sharer.php?u=" + data:post.canonicalUrl + "&amp;t=" + data:post.title + "｜" + data:blog.title' target="_blank" onclick="javascript:window.open(this.href, '', 'menubar=no,toolbar=no,resizable=yes,scrollbars=yes,height=300,width=600');return false;"><i class="fa fa-facebook"></i><span class="btn-text">Facebook</span></a></li>
    <li class="share-google"><a expr:href='"https://plus.google.com/share?url=" + data:post.canonicalUrl' target="_blank" onclick="javascript:window.open(this.href, '', 'menubar=no,toolbar=no,resizable=yes,scrollbars=yes,height=300,width=600');return false;"><i class="fa fa-google-plus"></i><span class="btn-text">Google+</span></a></li>
    <li class="share-hatena"><a expr:href='"http://b.hatena.ne.jp/add?mode=confirm&amp;url=" + data:post.canonicalUrl + "&amp;" + data:post.title + "｜" + data:blog.title' target="_blank" onclick="javascript:window.open(this.href, '', 'menubar=no,toolbar=no,resizable=yes,scrollbars=yes,height=300,width=600');return false;"><i class="fa fa-hatena"></i><span class="btn-text">はてブ</span></a></li>
    <li class="share-pocket"><a expr:href='"http://getpocket.com/edit?url=" + data:post.canonicalUrl' target="_blank" onclick="javascript:window.open(this.href, '', 'menubar=no,toolbar=no,resizable=yes,scrollbars=yes,height=300,width=600');return false;"><i class="fa fa-get-pocket"></i><span class="btn-text">Pocket</span></a></li>
  </ul>
</section>

上記のHTMLの詳細はあとで説明するとして、
［マイブログ］→［テンプレート］→［HTMLの編集］からブログのHTMLを修正する。

ヘッダー用のボタンは、<div class='post-header'> … </div>の"直後"。
フッター用のボタンは、<div class='post-footer'>の"直後"。

※ 使用しているテンプレートによって内容がことなることがあるので注意
2016/05/28 追記:
嬉しいことに多くの方にこの記事を参考にしていただいているようでなによりです！
ブログの下の方で説明はしていたのですが、↑のHTMLをコピペする際には、Twitterボタンの「;#64;bc_rikkoさんから」の部分をご自身のTwitterアカウントに変えていただくようお願いします。


CSS

#share {
    padding: 10px;
}

.share {
    overflow: hidden;
    height: 55px;
}

.share li {
    font-size: 14px;
    float: left;
    text-align: center;
    width: 19%;
    margin-right: 1%;
    border-radius: 3px;
    list-style: none;
    
    cursor: pointer;
}

.share a {
    display: block;
    height: 30px;
    padding-top: 10px;
    text-decoration: none;
    color: #fff;
}

.share i {
    margin-right: 7px;
    font-size: 1.5em;
}

.share .btn-text {
    position: relative;
    top: -3px;
}

.share .share-twitter {
    background-color: #55acee;
    box-shadow: 0 3px #2795e9;
}
.share .share-twitter:hover {
    background-color: #83c3f3;
}

.share .share-facebook {
    background-color: #3b5998;
    box-shadow: 0 3px #2d4373;
}
.share .share-facebook:hover {
    background-color: #4c70ba;
}

.share .share-google {
    background-color: #dd4b39;
    box-shadow: 0 3px #c23321;
}
.share .share-google:hover {
    background-color: #e47365;
}

.share .share-hatena {
    background-color: #2c6ebd;
    box-shadow: 0 3px #225694;
}
.share .share-hatena:hover {
    background-color: #4888d4;
}

.share .share-pocket {
    background-color: #ee4056;
    box-shadow: 0 3px #e6152f;
}
.share .share-pocket:hover {
    background-color: #f26f7f;
}

.fa-hatena:before {
    content: "B!";
    font-family: "Verdana";
    font-weight: bold;
}

上記のCSSを追加する場所は、場合によって異る。

通常は［マイブログ］→［テンプレート］→［カスタマイズ］→［上級者向け：CSSを追加］にカスタムCSSを追加することができる。

しかし、カスタムCSSの量が増えると［上級者向け：CSSを追加］に既存のCSSが標示されなくなってしまう。
そのため、［マイブログ］→［テンプレート］→［HTMLの編集］で「 ]]></b:skin>」の"直前"に上記CSSを追加する。
 

Font Awesomeの読み込み


ボタンのアイコンにFont Awesomeを使っている。
アイコンいらないよって人は、以降の対応は不要。

［マイブログ］→［テンプレート］→［HTMLの編集］から「</head>」の"直前"に追加する。



HTMLの説明


共通：Bloggerのレイアウトデータタグ


取得データ レイアウトデータタグ
ブログURL data:post.canonicalUrl
ブログタイトル data:blog.title
記事タイトル data:post.title

この3つのレイアウトデータタグを使ってリンクを作っていく。


共通：新しいウィンドウで開く


ソーシャルボタンが押された時に新しいウィンドウで開くためには、JavaScritpを使う。
onclick="javascript:window.open(this.href, '', 'menubar=no,toolbar=no,resizable=yes,scrollbars=yes,height=300,width=600');return false;"

これをaタグの中に入れれば新しいウィンドウで開いてくれる。
同じウィンドウの別タブで開く場合は、この処理は不要。


Twitterボタン


Twitterボタンでツイートするためにはhttp://twitter.com/share?text={タイトル}&url={ブログURL}というリンクを使う。
<a expr:href='"http://twitter.com/share?text=" + data:post.title + "｜" + data:blog.title + " &#64;{twitterアカウント}さんから&amp;url=" + data:post.canonicalUrl' target="_blank" onclick="javascript:window.open(this.href, '', 'menubar=no,toolbar=no,resizable=yes,scrollbars=yes,height=300,width=600');return false;">

Facebookボタン

Facebookボタンでシェアするためにはhttp://www.facebook.com/sharer.php?u={ブログURL}&t={タイトル}というリンクを使う。
<a expr:href='"http://www.facebook.com/sharer.php?u=" + data:post.canonicalUrl + "&amp;t=" + data:post.title + "｜" + data:blog.title' target="_blank" onclick="javascript:window.open(this.href, '', 'menubar=no,toolbar=no,resizable=yes,scrollbars=yes,height=300,width=600');return false;">

Google+ボタン


Google+ボタンでシェアするためにはhttps://plus.google.com/share?url={ブログURL}というリンクを使う。
<a expr:href='"https://plus.google.com/share?url=" + data:post.canonicalUrl' target="_blank" onclick="javascript:window.open(this.href, '', 'menubar=no,toolbar=no,resizable=yes,scrollbars=yes,height=300,width=600');return false;">

はてなブックマークボタン


はてなブックマークでブックマークするためにはhttp://b.hatena.ne.jp/add?mode=confirm&url={ブログURL}&{ブログタイトル}」というリンクを使う。 
<a expr:href='"http://b.hatena.ne.jp/add?mode=confirm&amp;url=" + data:post.canonicalUrl + "&amp;" + data:post.title + "｜" + data:blog.title' target="_blank" onclick="javascript:window.open(this.href, '', 'menubar=no,toolbar=no,resizable=yes,scrollbars=yes,height=300,width=600');return false;">

Pocketボタン


Pocketするためにはhttp://getpocket.com/edit?url={ブログURL}というリンクを使う。
<a expr:href='"http://getpocket.com/edit?url=" + data:post.canonicalUrl' target="_blank" onclick="javascript:window.open(this.href, '', 'menubar=no,toolbar=no,resizable=yes,scrollbars=yes,height=300,width=600');return false;">



まだBloggerで消耗してるの？




フツーにHTMLとCSSを書けばこんな感じで標示される。
しかし、Bloggerには制約があったり、テンプレートのCSSがジャマしてきたり…

私のブログのテンプレートでは、他のCSSがジャマしてきてうまく標示されなかった。
そのため、一部サイズを絶対値で指定している。


以上

written by @bc_rikko
時刻:
Labels:

0 件のコメント :

コメントを投稿

登録: コメントの投稿 ( Atom )