質問編集履歴

2 Twitterのウォジェットについて追記

penguin520

penguin520 score 14

2018/01/19 11:30  投稿

jQueryのプラグインを組み込むと、Twitterのjsがエラーを返す。
![chromeのconsole](d72110e0a43f2e63997337075ce8ee91.jpeg)
[Colorbox](http://www.jacklmoore.com/colorbox/) を サイトに、組み込もうとしています。しかし、すでにサイトに組み込んである[TwitterのPublish](https://publish.twitter.com/)が、エラーを出します。何かご存知の方がいらっしゃれば、教えていただけないでしょうか。
jQueryバージョン https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js  
 
ソースを追記します。どうか、よろしくお願いします。
  
  
組み込まれているTwitterのウォジェット[https://publish.twitter.com/](https://publish.twitter.com/)
```javascript
<a class="twitter-timeline" href="https://twitter.com/penguin520?ref_src=twsrc%5Etfw">Tweets by penguin520</a>
<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
```
 
現在のコード
```html
<!DOCTYPE html>
<html lang="ja">
<head>
<title></title>
   <meta charset="UTF-8">
   <meta name="description" content="">
   <meta name="keywords" content="">
   <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
   <script src="jquery.colorbox.js"></script>
   <meta http-equiv="Content-type" content="text/html; charset=UTF-8">
   <meta name="viewport" content="width=device-width, user-scalable=yes, maximum-scale=1">
   <link rel="stylesheet" href="colorbox.css" />
   <link href="style.css" rel="stylesheet" type="text/css" media="screen,print">
   
       <script>
           $(document).ready(function(){
               //Examples of how to assign the Colorbox event to elements
               $(".group1").colorbox({rel:'group1'});
               $(".group2").colorbox({rel:'group2', transition:"fade"});
               $(".group3").colorbox({rel:'group3', transition:"none", width:"75%", height:"75%"});
               $(".group4").colorbox({rel:'group4', slideshow:true});
               $(".ajax").colorbox();
               $(".youtube").colorbox({iframe:true, innerWidth:640, innerHeight:390});
               $(".vimeo").colorbox({iframe:true, innerWidth:500, innerHeight:409});
               $(".iframe").colorbox({iframe:true, width:"80%", height:"80%"});
               $(".inline").colorbox({inline:true, width:"50%"});
               $(".callbacks").colorbox({
                   onOpen:function(){ alert('onOpen: colorbox is about to open'); },
                   onLoad:function(){ alert('onLoad: colorbox has started to load the targeted content'); },
                   onComplete:function(){ alert('onComplete: colorbox has displayed the loaded content'); },
                   onCleanup:function(){ alert('onCleanup: colorbox has begun the close process'); },
                   onClosed:function(){ alert('onClosed: colorbox has completely closed'); }
               });
               $('.non-retina').colorbox({rel:'group5', transition:'none'})
               $('.retina').colorbox({rel:'group5', transition:'none', retinaImage:true, retinaUrl:true});
               
               //Example of preserving a JavaScript event for inline calls.
               $("#click").click(function(){
                   $('#click').css({"background-color":"#f00", "color":"#fff", "cursor":"inherit"}).text("Open this window again and this message will still be here.");
                   return false;
               });
           });
       </script>
   
</head>
<body>
<main>
   <div>
   <p><a class='youtube' href="http://www.youtube.com/embed/9VWtyR87w-g?rel=0&amp;wmode=transparent"><img src="move.png" alt="Youtube"></a></p>
   </div>
</main>
<a class="twitter-timeline" href="https://twitter.com/penguin520?ref_src=twsrc%5Etfw">Tweets by penguin520</a> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>>
<a class="twitter-timeline" href="https://twitter.com/penguin520?ref_src=twsrc%5Etfw">Tweets by penguin520</a> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
<script type="text/javascript">
   
   $(function() {
       var topBtn = $('#page-top');   
       topBtn.hide();
       $(window).scroll(function () {
           if ($(this).scrollTop() > 600) {
               topBtn.fadeIn();
           } else {
               topBtn.fadeOut();
           }
       });
           topBtn.click(function () {
           $('body,html').animate({
               scrollTop: 0
           }, 500);
           return false;
           });
   });
   $(document).ready(function() {
           $("#pop").click(function () {
           $("#popNav").slideToggle('fast');
       });
   });   
   
</script>
</body>
</html>
```
  • JavaScript

    26419 questions

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

  • jQuery

    10272 questions

    jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

  • CSS3

    3561 questions

    CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

  • HTML5

    6898 questions

    HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

1 ソースの追記

penguin520

penguin520 score 14

2018/01/19 11:20  投稿

jQueryのプラグインを組み込むと、Twitterのjsがエラーを返す。
![イメージ説明](d72110e0a43f2e63997337075ce8ee91.jpeg)
![chromeのconsole](d72110e0a43f2e63997337075ce8ee91.jpeg)
[Colorbox](http://www.jacklmoore.com/colorbox/) を サイトに、組み込もうとしています。しかし、すでにサイトに組み込んである[TwitterのPublish](https://publish.twitter.com/)が、エラーを出します。何かご存知の方がいらっしゃれば、教えていただけないでしょうか。
[Colorbox](http://www.jacklmoore.com/colorbox/) を サイトに、組み込もうとしています。しかし、すでにサイトに組み込んである[TwitterのPublish](https://publish.twitter.com/)が、エラーを出します。何かご存知の方がいらっしゃれば、教えていただけないでしょうか。
ソースを追記します。どうか、よろしくお願いします。
```html
<!DOCTYPE html>
<html lang="ja">
<head>
<title></title>
   <meta charset="UTF-8">
   <meta name="description" content="">
   <meta name="keywords" content="">
   <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
   <script src="jquery.colorbox.js"></script>
   <meta http-equiv="Content-type" content="text/html; charset=UTF-8">
   <meta name="viewport" content="width=device-width, user-scalable=yes, maximum-scale=1">
   <link rel="stylesheet" href="colorbox.css" />
   <link href="style.css" rel="stylesheet" type="text/css" media="screen,print">
   
       <script>
           $(document).ready(function(){
               //Examples of how to assign the Colorbox event to elements
               $(".group1").colorbox({rel:'group1'});
               $(".group2").colorbox({rel:'group2', transition:"fade"});
               $(".group3").colorbox({rel:'group3', transition:"none", width:"75%", height:"75%"});
               $(".group4").colorbox({rel:'group4', slideshow:true});
               $(".ajax").colorbox();
               $(".youtube").colorbox({iframe:true, innerWidth:640, innerHeight:390});
               $(".vimeo").colorbox({iframe:true, innerWidth:500, innerHeight:409});
               $(".iframe").colorbox({iframe:true, width:"80%", height:"80%"});
               $(".inline").colorbox({inline:true, width:"50%"});
               $(".callbacks").colorbox({
                   onOpen:function(){ alert('onOpen: colorbox is about to open'); },
                   onLoad:function(){ alert('onLoad: colorbox has started to load the targeted content'); },
                   onComplete:function(){ alert('onComplete: colorbox has displayed the loaded content'); },
                   onCleanup:function(){ alert('onCleanup: colorbox has begun the close process'); },
                   onClosed:function(){ alert('onClosed: colorbox has completely closed'); }
               });
               $('.non-retina').colorbox({rel:'group5', transition:'none'})
               $('.retina').colorbox({rel:'group5', transition:'none', retinaImage:true, retinaUrl:true});
               
               //Example of preserving a JavaScript event for inline calls.
               $("#click").click(function(){
                   $('#click').css({"background-color":"#f00", "color":"#fff", "cursor":"inherit"}).text("Open this window again and this message will still be here.");
                   return false;
               });
           });
       </script>
   
</head>
<body>
<main>
   <div>
   <p><a class='youtube' href="http://www.youtube.com/embed/9VWtyR87w-g?rel=0&amp;wmode=transparent"><img src="move.png" alt="Youtube"></a></p>
   </div>
</main>
<a class="twitter-timeline" href="https://twitter.com/penguin520?ref_src=twsrc%5Etfw">Tweets by penguin520</a> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>>
<script type="text/javascript">
   
   $(function() {
       var topBtn = $('#page-top');   
       topBtn.hide();
       $(window).scroll(function () {
           if ($(this).scrollTop() > 600) {
               topBtn.fadeIn();
           } else {
               topBtn.fadeOut();
           }
       });
           topBtn.click(function () {
           $('body,html').animate({
               scrollTop: 0
           }, 500);
           return false;
           });
   });
   $(document).ready(function() {
           $("#pop").click(function () {
           $("#popNav").slideToggle('fast');
       });
   });   
   
</script>
</body>
</html>
```
  • JavaScript

    26419 questions

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

  • jQuery

    10272 questions

    jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

  • CSS3

    3561 questions

    CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

  • HTML5

    6898 questions

    HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

思考するエンジニアのためのQ&Aサイト「teratail」について詳しく知る