質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.48%
JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

Q&A

解決済

1回答

2028閲覧

SNSシェアボタンを作っています。URLとタイトルをコピーするボタンを作るにはどうすれば良いでしょうか?

hiroelegance

総合スコア13

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

0グッド

0クリップ

投稿2018/07/13 04:01

現在このようなソースでタイトルタグとURLを引用するスクリプトを使っています。
ここにタイトルとURLをクリップボードにコピーするスクリプトを追加したいです。
よろしくお願いいたします。

HTML

1<ul class="sns"> 2<li class="sns-hatena"><a href="">ここにはてなブックマークのSVGアイコンソース</a></li> 3<li class="sns-gp"><a href="">ここにgoogle+のSVGアイコンソース</a></li> 4<li class="sns-tw"><a href="">ここにtwitterのSVGアイコンソース</a></li> 5<li class="sns-line"><a href="">ここにLINEのSVGアイコンソース</a></li> 6</ul>

javascript

1<script> 2$(function(){ 3var shareTitle = encodeURI($('title').html()); 4var shareUrl = encodeURI(document.URL); 5$('.sns-tw a').attr("href", "http://twitter.com/share?url="+ shareUrl + "&text=" + shareTitle); 6$('.sns-gp a').attr("href", "https://plus.google.com/share?url=" + shareUrl); 7$('.sns-line a').attr("href", "https://line.me/R/msg/text/?" + shareUrl ); 8$('.sns-hatena a').attr("href", "http://b.hatena.ne.jp/add?mode=confirm&url=" + shareUrl + "&title=" + shareTitle); 9$('.sns a').click(function(){ 10window.open(this.href, "social_window","width=600,height=600,resizable=yes,scrollbars=yes,toolbar=yes"); 11return false; 12}); 13}); 14</script>

【ソース引用元】
https://www.markernet.co.jp/blog/blog/2015/01/14/post-4363/

LINEにシェアするボタンが無かったので自分なりにカスタマイズしています。

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

自己解決

クリップボードにコピー機能は別のスクリプトを貼って解決しました。

HTML

1<div class="copy_btn" data-clipboard-text=""> 2記事のタイトルとURL をコピーする! 3</div>

javascript

1var clipboard = new Clipboard('.copy_btn'); //clipboard.min.jsが動作する要素をクラス名で指定 2//クリックしたときの挙動 3jQuery(function(){ 4 var title = jQuery('title').text(); //タイトル取得 5 var url = location.href; //URL取得 6 jQuery('.copy_btn').click(function(){ 7 jQuery(this) 8 .attr('data-clipboard-text', title + ' ' + url) // コピー内容生成 9 .css('background-color','#FFD8D8') // 背景切り替え 10 .css('font-weight','bold') // 文字の太さ切り替え 11 .css('cursor','default') // カーソル切り替え 12 .text('クリップボードにコピーされました。'); // テキスト切り替え 13 }); 14});

投稿2018/07/13 06:29

hiroelegance

総合スコア13

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.48%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問