元々ツイート用のブックマークレットとして使っていた JavaScript コードをシェアボタン用に改造してみました。JavaScript 化することにより、ツイート時の不具合が解消されています。Twitter 以外の SNS のコードもついでに JavaScript 化させてありますが機能的な変化は特にないですw
既に当ブログで紹介しているシェアボタンコードを使われている環境では、CSSはそのまま転用可能で、HTML コードを入れ替えるだけで使えます。
QooQ 用カスタマイズ記事
ふじろじっく【QooQ】オリジナルSNSシェアボタンの設置オリジナル SNS シェアボタンの設置手順~QooQ編https://fujilogic.blogspot.com/2019/09/original-snssharebutton-for-qooq.html
QooQ 以外のテーマ用記事
ふじろじっくオリジナルデザインのSNSシェアボタンを付けるふじろじっく仕様のかわいい丸型デザインです。リンクコピー機能も付いてます。https://fujilogic.blogspot.com/2019/05/original-sns-sharebuttons.html
CONTENTS
旧コードとの違い
- Twitterでのシェアの時、記事タイトルに半角の # や & や % や | が含まれていてもバグりません。
ちなみに公式テーマ以外のツイートボタンでは # や & が含まれると、それ以降の文字列が消えてしまい、% や | が含まれるとエラーになってツイート不能になってしまいます。 - シェアウインドウが画面の中央にポップアップ表示されます。
Twitter 以外の機能的な変化はこれだけです(^^;
注意点
QooQ のように SNS ボタンが上下にある場合、上側の方しか機能しなくなります。
素人考えで単純に <a class='tweet_btn' title='ツイートする'> にして getElementById を getElementsByclassName に変えたらいけるんじゃね?と思いついてやってみたものの、上手くいきませんでした。JavaScript って難しいね(~_~;)…JSに詳しい方はご自身で改良してみてくださいw
私と同じくそんなの無理!という方は、この記事の手順を参考に片一方のシェアボタンタグを無効にしてください。
2021/05/14追記: コードをアップデートしました
カスタマイズでいつもお世話になっている Fuma さんに、コメントで改善方法を教えて頂きました!ありがとうございますm(_ _)m
早速試してみた所、上下のボタン共に問題なく機能することを確認しましたので、コードも改善版にアップデートしておきました。
カスタマイズ手順
HTMLを編集しますので必ず予めバックアップを取ってから行って下さい。もしくはテスト用の環境(別ブログ)を用意してそちらで試されることをおすすめします。
① Font Awesome アイコン準備
Font Awesome (ver.5x)のアイコンを使用するため、まだ導入されてない場合はテーマ編集画面(HTML)にて下記のタグを </head> の上に設置して下さい。
<link href='//use.fontawesome.com/releases/v5.15.3/css/all.css' rel='stylesheet' type='text/css'/>
② HTML コードの設定
Pinterest とコピーリンクのコードは旧コードのまま弄ってません。
jQuery を導入済みの場合は Copy Link の所にあるタグは削除しても大丈夫です。
HTML コードの設置位置
QooQ の場合は <div class='single-share'> ~ </div> の部分を丸ごと下記のコードと入れ替えます。
QooQ 以外のテーマの場合は <data:post.body/> (2箇所ある場合はどちらか一方→たぶん下側)の直下に下記のコードをコピペします。
<!-- SNS Share Buttons --> <b:if cond='data:view.isPost'> <div class='sns-share-buttons-title'>この記事をシェアする</div> <ul class='sns-share-buttons'> <!--Twitter--> <li class='tweet'> <a id='tweet_btn' onclick='popup1()' title='ツイートする'> <i class='fab fa-twitter'/> </a> <script> //<![CDATA[ function popup1() {var w=550,h=550;window.open("https://twitter.com/intent/tweet?url="+encodeURIComponent(location.href)+"&text="+encodeURIComponent(document.title),"_blank","width="+w+",height="+h+",left="+(screen.width-w)/2+",top="+(screen.height-h)/2+",scrollbars=yes,resizable=yes,toolbar=no,location=yes")}; //]]> </script> </li> <!--Facebook--> <li class='facebook'> <a id='fb_btn' onclick='popup2()' title='シェアする'> <i class='fab fa-facebook-f'/> </a> <script> //<![CDATA[ function popup2() {var w=550,h=420;window.open("https://www.facebook.com/sharer.php?u="+encodeURIComponent(location.href),"_blank","width="+w+",height="+h+",left="+(screen.width-w)/2+",top="+(screen.height-h)/2+",scrollbars=yes,resizable=yes,toolbar=no,location=yes")}; //]]> </script> </li> <!--はてな--> <li class='hatena'> <a id='hatena_btn' onclick='popup3()' title='はてなブックマークに登録'> <span style='font-weight:bold;font-family:verdana;line-height:22px'>B!</span> </a> <script> //<![CDATA[ function popup3() {var w=550,h=520;window.open("https://b.hatena.ne.jp/entry/panel/?url="+encodeURIComponent(location.href),"_blank","width="+w+",height="+h+",left="+(screen.width-w)/2+",top="+(screen.height-h)/2+",scrollbars=yes,resizable=yes,toolbar=no,location=yes")}; //]]> </script> </li> <!--Pocket--> <li class='pocket'> <a id='pocket_btn' onclick='popup4()' title='Pocketに保存'> <i class='fab fa-get-pocket'/> </a> <script> //<![CDATA[ function popup4() {var w=550,h=420;window.open("https://getpocket.com/edit?url="+encodeURIComponent(location.href),"_blank","width="+w+",height="+h+",left="+(screen.width-w)/2+",top="+(screen.height-h)/2+",scrollbars=yes,resizable=yes,toolbar=no,location=yes")}; //]]> </script> </li> <!--LINE--> <li class='line'> <a id='line_btn' onclick='popup5()' title='LINEで送る'> <i class='fab fa-line'/> </a> <script> //<![CDATA[ function popup5() {var w=550,h=420;window.open("https://social-plugins.line.me/lineit/share?url="+encodeURIComponent(location.href),"_blank","width="+w+",height="+h+",left="+(screen.width-w)/2+",top="+(screen.height-h)/2+",scrollbars=yes,resizable=yes,toolbar=no,location=yes")}; //]]> </script> </li> <!--Pinterest--> <li class='pinterest'> <a data-pin-custom='true' data-pin-do='buttonBookmark' data-pin-lang='ja' expr:href='"https://jp.pinterest.com/pin/create/button/?url=" + data:post.url + "&media=" + data:post.thumbnailUrl' title='ピン保存する'> <i class='fab fa-pinterest-p'/> </a> <script async='async' defer='defer' src='//assets.pinterest.com/js/pinit.js' /> </li> <!--Copy Link--> <li class='copylink'> <a class='copy_btn' style='font-weight:bold;line-height:1em' title='タイトルとURLをコピーする' /> <script src='//ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js' /> <script src='//cdn.jsdelivr.net/npm/clipboard@2/dist/clipboard.min.js' /> <script> //<![CDATA[ const clipboard=new ClipboardJS(".copy_btn");window.addEventListener('DOMContentLoaded', function(){$(".copy_btn").click(function(){$(this).attr("data-clipboard-text",document.title+" "+location.href).css("cursor","text").css("transform","none").text("COPIED").attr("title","コピーしました")})}) //]]> </script> </li> </ul> </b:if>
③ CSS コードの設定
既に当ブログで紹介しているシェアボタンコードを使われている環境では CSS の追加・変更は不要です。
CSS コードの設置位置
QooQ は /* SNSボタン */ 以下のコードを下記のコードと入れ替えます。
QooQ 以外のテーマの場合は ]]></b:skin> の上辺りにコピペしてください。
QooQ 以外のテーマ(Emporio や Essential 等)でボタンが丸でなく縦長になってしまう場合は、
.sns-share-buttons li a の height の値を 33px に変えてみてください。
/* SNSボタン */ .sns-share-buttons { width: 100%; margin: 1em 0; text-align: center; list-style: none; padding-left:0!important; } .sns-share-buttons li { display: inline-block; width: 43px; height: 43px; margin: 3px; padding: 0!important; border-radius: 25px; vertical-align: middle; line-height:1em; } .sns-share-buttons li a { font-size: 1.5em; display: block; padding-top: 10px; text-align: center; box-shadow: 2px 2px 8px -2px #aaa; text-decoration: none; color: #fff!important; border-radius: 25px; height: 43px; /*QooQ以外で縦長になる場合は 33px に変更*/ transition: .3s; } .sns-share-buttons li a:hover { text-decoration: none!important; transform: translateY(-3px); cursor: pointer; } .sns-share-buttons .tweet a { background: deepskyblue; } .sns-share-buttons .facebook a { background: royalblue; } .sns-share-buttons .hatena a { background: dodgerblue; } .sns-share-buttons .pocket a { background: coral; } .sns-share-buttons .line a { background: limegreen; } .sns-share-buttons .pinterest a { background: tomato; } .sns-share-buttons .copylink a { font-family: arial; background: plum; font-size: 8px; color: #333!important; } .copylink a::before { font-family: "Font Awesome 5 Free"; content: "\f0ea" "\A"; font-weight: 900; font-size: 22px; line-height: 1em; color: #fff!important; } .sns-share-buttons-title { margin: 2em auto 1em; font-weight: bold; text-align: center; }
最後に
もし何かしら不具合があったり、ご質問等がありましたら、お気軽にコメントでお知らせください。
また、複数のシェアボタンでも機能する方法が分かる方、教えて下さいw
コメントを投稿
別ページに移動します10 件のコメント (新着順)
ふじやん
>Bellezzaさん
ブログのソースコード確認してみたところ、Font Awesome のタグが設置されていません。アイコンが出ないのはそのためです(記事内の① Font Awesome アイコン準備参照)
</head> の上に以下のコードを設置してみてください。
<link href='//use.fontawesome.com/releases/v5.15.3/css/all.css' rel='stylesheet' type='text/css'/>
Bellezza
いつも参考にさせてもらっています。
どうしてもアイコンが出てきません、、、
改善点をよろしくお願いいたします。
ふじやん
ひき太郎さん、こんにちは。
こうやって詳しい方にタダで色々教えてもらえてほんとありがたいですよねえ。
でも面倒くさがりな私は、ひき太郎さんみたいに自力で何とかするべく本格的に勉強始めようという気は起こらないですけど(^^;
ひき太郎
こんにちは^^
なるほど。こういう書き方もあるのですね。
たぶんHTMLにJSを記述することはこれからもないと思っていたので知識をスルーしていたかも^^;
いわれてみればHTML側でイベント登録しているなら必ずしも要素を取得する必要はないのか。
一つ勉強になりましたm(_ _)m
ふじやん
Fumaさん、補足ありがとうございます。動作確認後、コードを修正しました。
コピーボタンに関して、元々classだったのをわざわざidに変更していたのをすっかり忘れておりました(^^;
Fuma
お役に立てたなら良かったです。
先ほどの内容に追加して補足を。通常のpopupに関して、先のコードではテスト用にthisとtargetを使っていたのですが、機能的には必要ないので空白で大丈夫です。(つまりonclick=popup1(), function popup1()という形でOKです)
あと、コピーボタンのほうはaタグのid='copy_btn'をclass='copy_btn'に変え、スクリプト部分の#copy_btnを.copy_btnに変えれば正常に動きます。お伝えし忘れていてすみません(^^;
ふじやん
Fumaさん、コメントありがとうございます!(実は密かに期待しておりましたw)
早速試してみた所、問題なく機能することを確認しましたので、コードをアップデートしておきました。
JSの知識がほとんどない私は getElementsByclassName でなんとかすることしか思いつかなかったのですが、こういうやり方があるんですねえ…勉強になりました(~_~;)
Fuma
こんにちは。片方しか機能しない件ですが、document.getElementByIdで要素を取得していることが原因と考えられます。idは一意であることが前提なので、2つある場合は片方しか取得されません。
<a id='tweet_btn' title='ツイートする'>
↓
<a id='tweet_btn' onclick='popup1(this)' title='ツイートする'>
とし、元のスクリプト部分を
<script>
//<![CDATA[
function popup1(target) {
var w=550,h=550;window.open("https://twitter.com/intent/tweet?url="+encodeURIComponent(location.href)+"&text="+encodeURIComponent(document.title),"_blank","width="+w+",height="+h+",left="+(screen.width-w)/2+",top="+(screen.height-h)/2+",scrollbars=yes,resizable=yes,toolbar=no,location=yes")
}
//]]>
</script>
という風に書き換えると、両側とも機能しました(QooQ環境で検証済み)。Facebook、はてブ等も同じようにpopup2, popup3としてそれぞれ書き換えれば手っ取り早く修正できます。
ふじやん
ひき太郎さん、アドバイスありがとうございます。
自分なりに調べて試行錯誤したものの、やはり自分にはハードルが高そうで匙を投げてしまいました(^^;
うちのシェアボタンを導入されている方はほぼ全員上側を無効にしてるようですし(上側を無効にする方法だけ参考にされてる方も結構いる)、たぶんニーズはないだろうと思いますので、要望があるまではこのままにしておこうと思います。
もし要望があった際には改めてひき太郎さんかFumaさんに丸投げさせていただきます(笑)
ひき太郎
こんにちは^^
getElementsByClassNameやquerySeletorAllなどで複数要素を取得してfor文で両方の要素にクリックイベントを登録すれば上下ボタンとも大丈夫だと思います。上下の二ヶ所だけならtweet_btn2みたいにIDをそれぞれ書き換えて関数を二つ用意するのも可能だと思いますが…コードが2倍になるので微妙ですね^^;