やっと BloggerにWebフォントで作ったソーシャルボタンを設置することができました。
Bloggerの変数やexpr属性の呪縛により無理だと思われてたガジェットやヘッダーへの設置も可能です。(^_^)v
SNSボタンの作り方
これはシェア数を取得するボタンではありませんが、ちゃんと記事毎のページのタイトルとURLを取得することができます。
このブログの右上。
スマホからは一番上に設置した自分で作ったSNSボタン。
（引っ越ししたので変わっています）
普通に設置しただけでは、ページ情報は取得できませんし、
ブログ変数に置き換えてexpr:hrefと書くとテンプレートエラーとして怒られてしまいます。
ボタンの作り方を紹介した過去記事はこちら
用のコードです。
参考にしたソースコードはこちら。
SNSシェアボタンをjQueryでオリジナルにカスタマイズする方法
WEB制作ブログ
https://www.markernet.co.jp/blog/2015/01/14/post-4363/
画像を使う場合は、上記サイトのソースそのままで大丈夫ですが、"を'に変更して＜a href=''＞の''の中は空のままで設置したい場所へ記載して下さい。
ただし、本文内へ記載する場合はBloggerでは空リンクを書くと自動で書き換えられてしまうので気を付けて下さい。
WEBフォントで作る場合は↑の過去記事をご覧下さい。
|
1 2 3 4 5 6 |
<ul class='sns'> <li class='sns-fb'><a href=''><img src='[画像パス]' alt='Facebook'></a></li> <li class='sns-tw'><a href=''><img src='[画像パス]' alt='Twitter'></a></li> <li class='sns-gp'><a href=''><img src='[画像パス]' alt='Google+'></a></li> <li class='sns-hatena'><a href=''><img src='[画像パス]' alt='はてなブックマーク'></a></li> </ul> |
シェア用のアプリケーションコードを直前に記載。
（すでに設置してる場合は、このスクリプトは1つだけで構いません）
|
1 2 3 4 5 6 7 8 |
<div id="fb-root"></div> <script>(function(d, s, id) { var js, fjs = d.getElementsByTagName(s)[0]; if (d.getElementById(id)) return; js = d.createElement(s); js.id = id; js.src = "//connect.facebook.net/ja_JP/sdk.js#xfbml=1&appId=ここにアプリID&version=v2.0"; fjs.parentNode.insertBefore(js, fjs); }(document, 'script', 'facebook-jssdk'));</script> |
アプリケーションIDの取得方法を紹介した過去記事はこちら
HTMLの空リンクに対してjQueryでURLを呼び出します。
↓のコードを＜/body＞直前、さきほどのfacebookのコードの上にでも記載します。（エンコードしてるので、このままコピペできます）
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
<script type='text/javascript'> $(function(){ var shareTitle = encodeURI($('title').html()); var shareUrl = encodeURI(document.URL); $('.sns-gp a').attr("href", "https://plus.google.com/share?url=" + shareUrl); $('.sns-fb a').attr("href", "http://www.facebook.com/sharer.php?u=" + shareUrl + "&t=" + shareTitle); $('.sns-tw a').attr("href", "http://twitter.com/share?url=" + shareUrl + "&text=" + shareTitle); $('.sns-hatena a').attr("href", "http://b.hatena.ne.jp/add?mode=confirm&url=" + shareUrl + "&title=" + shareTitle); $('.sns-pocket a').attr("href", "http://getpocket.com/edit?url=" + shareUrl + "&text=" + shareTitle); $('.circle_group a').click(function(){ window.open(this.href, "social_window","width=600,height=600,resizable=yes,scrollbars=yes,toolbar=yes"); return false; }); }); </script> |
jQuery本体を呼び出すコードをまだ記載してない方は、
直前に↓のコードを記載して下さい。
|
1 |
<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js'/> |
以上で、どのページでもボタンを押せば記事タイトルとURLを取得できると思います。
HTMLには、
facebook、Twitter、Google+、はてブ
jQueryには、当ブログの右上のように
Google+、facebook、Twitter、はてブ、Pocketを記載してるので設置したいボタンに合わせて調整して下さい。
増やす時は、必ずクラス名'sns-●●'と書いて
HTMLとjQueryのクラス名を合わせて下さい。
3Dボタンの過去記事では「LINE」ボタンも作ってましたが、私は「LINE」未登録のため、ボタン動作の確認がとれないので設置を断念しました。(^^;)
あとがき
では、「公式ボタン」か「忍者おまとめボタン」「ShareThis」を設置するしか方法がなくて、サイトの方のページをいつも指を咥えて見てましたが、
やっとオリジナルボタンの設置方法が完成しました。
よく言われる読み込み速度も公式ボタンや忍者と比べると2秒ほど速くなったので本当に良かったです。(^^)
SNSボタンの重さが気になってる方や、でWebフォントやフラットボタンでソーシャルリンクを設置したいけど出来なかったという方は、このコードをぜひ試してみて下さいね。
最後までご覧いただき ありがとうございました。
この記事が役に立ったと思った方はシェアして頂けると嬉しいです。(^^)
訪問ありがとうございました。
