Twitter Widgetが表示されない

このQ&Aのポイント
  • ツイッター公式ウィジェットの設定ページで指定のハッシュタグが付いたツイートを表示するように設定し、スクリプトを作成したが、何も表示されない。
  • scriptタグにcharset="utf-8"を追加したが、状況は変わらなかった。
  • Chromeのコンソールでエラー内容が「GET file://platform.twitter.com/widgets.js」と表示され、解決方法を探している。
回答を見る
  • ベストアンサー

twitter widgetが表示されない

ツイッター公式ウィジェットの設定ページ(https://twitter.com/settings/widgets)で 指定のハッシュタグが付いたツイートを表示するように設定し、スクリプトを作成しました。 右下に表示されている「このコードをコピーして、あなたのwebサイトのHTMLに貼り付けてください。」 という文言通り、生成されたスクリプトをHTMLファイルに貼りつけても、何も表示されません。 厳密には「(#ハッシュタグ)に関するツイート」という文字だけが表示されています。 「Twitter Widget 表示されない」などでググってみますと、多くは文字コードに言及する記事が多く、 念のためscriptタグにchaset="utf-8"を追加してみましたが、状況かわりませんでした。 Chromeのコンソールでみると、エラー内容が「GET file://platform.twitter.com/widgets.js 」と出ており、 <script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script> 上記部分に問題があるみたいです。 解決方法ないでしょうか。お力添え頂けますと幸いです。よろしくお願いします。

質問者が選んだベストアンサー

  • ベストアンサー
回答No.2

Webサーバーにアップされているとのことですので、私のケースとは違うようです。 「widget not whitelisted for domain “ドメイン名”」と出ているとのことで、 ホワイトリストに関する記事を見つけましたので、参照URLにペーストさせていただきました。 もしかしたらもうすでにご覧になられているかもしれませんが、ご覧ください。 あと、ウィジェットの作成時のドメイン名はどのように登録されましたでしょうか。 「www」が付くURLを、「www」を省いた状態でウィジェットを作成し、埋め込んだ場合も表示されません。 もし、お心当たりがあれば、ウィジェットをもう一度ご確認ください。

参考URL:
http://takao.asaya.ma/article_957.html
webama_fk
質問者

お礼

> mokemokekemo 様 まさに「www」のところが問題だったようです!解決しました!!!! 色々と経験則をご教授頂きありがとうございます!!!

その他の回答 (1)

回答No.1

同じ日に同じような悩みを抱え、調べていた者です。 ちなみに、スクリプトを貼り付けた何も表示されないページというのは、 ホスト側にUPされている状態でしょうか。 本日、自分の管理しているWebサイトにテストページを作り、 ウィジェットを埋め込み、ホスト側にUPしたところ、表示できました。 アップロードしていないテストページの状態では、javascriptは反応しません。 また、この新しいウィジェットはchasetはいじらなくてもうまく表示されるようです。 違っていたらすみません。 アップロードされていないページで表示されていないのでしたら、ぜひ試してみてください。

webama_fk
質問者

お礼

貴重な回答をくださりありがとうございます! 「ホスト側にアップされている状態でしょうか」と確認頂いておりますが、 すみません、これはどういうことでしょうか。 お客様などに確認してもらう際に使っているWebサーバーにアップしてチェックしてはいます。 その他確認する事柄はございますでしょうか。

webama_fk
質問者

補足

> mokemokekemo 様 Chromeのコンソールのワーニングに「widget not whitelisted for domain ”ドメイン名”と出てしまっております。

関連するQ&A

  • Twitterボタンの右の余計なスペース

    ツイッターのボタンを設置しました。 添付の図のように、ツイッターのボタンと「テスト」の間にスペースが開いてしまいます。 スペースが開かないようにぴったりとくっつけるにはどうすればよいでしょうか? ツイッターのボタンは、ここで作りました。 https://twitter.com/about/resources/buttons#tweet ■ソース <script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script> <a href="https://twitter.com/share" class="twitter-share-button" data-url="$twitter_url" data-lang="ja">ツイート</a> テスト

    • ベストアンサー
    • HTML
  • HTMLに詳しい方に質問です

    ここのサイト http://openlab.ring.gr.jp/k16/htmllint/htmllint.html を使ってチェックしたらこんなエラーが出ました。どうすれば治りますか? ツイッターボタンHTML↓ <a href="https://twitter.com/share" class="twitter-share-button" data-via="アカウント名" data-lang="ja" data-count="none">ツイート</a> <script type="text/javascript"> <!-- !function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs"); // --> </script> エラー↓ 6: line 68: <A> に不明な属性 `DATA-VIA` が指定されています。 6: line 68: <A> に不明な属性 `DATA-LANG` が指定されています。 6: line 68: <A> に不明な属性 `DATA-COUNT` が指定されています。

  • TwitterをHTMLに埋め込む方法

    Twitterの個人のアカウントをHTMLに埋め込み表示させたいのですが、 <a class="twitter-timeline" data-width="220" data-height="500" href="https://twitter.com/OKWAVE">Tweets by OKWAVE</a> <script async src="//platform.twitter.com/widgets.js" charset="utf-8"></script> 公式(https://publish.twitter.com/#)でこのようなコードが生成されそれを埋め込むと リンクが埋め込まれた「Tweets by OKWAVE」としか表示されません 情報によるとこの部分にこのアカウントのツイートががタイムライン形式で表示されるはずなのですがどうも表示されません また、<div>,<head>(/)で囲むなどしましたが改善されません どうすればいいでしょうか

    • ベストアンサー
    • HTML
  • Twitterウィジェットの表示速度について

    webサイトにTwitterタイムラインを埋め込むことは多々あるのですが、お客様から「タイムラインの表示が遅く感じる」とご指摘を受けました。 外部のものなので難しいとは思っているのですが、できれば改善したいです。 自分でも調べていますが、ウィジェットを埋め込むことによってサイト全体の表示が遅くなる事案が多く、タイムライン単体の表示速度についてはありませんでした。 通常使用しているのは、公式から出ているものになります。↓ <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script> <a class="twitter-timeline" width="100%" data-lang="ja" data-theme="light" data-chrome="noheader nofooter noborders transparent noscrollbar" href="https://twitter.com/">Tweets by</a> お力添え頂けたら幸いです。 よろしくお願いします。

  • いいねボタンが出てこない

    Facebookボタンを配置したのですが表示されません。 ページ内にFacebookのいいねボタンを下記のサンプルソースのように配置し、 サーバーにUPしましたが、4日経っても表示されません。 https://developers.facebook.com/docs/plugins/like-button 上記のページでいいねボタンを作成しました。 「URL to Like」にいいねボタンを設置したいページのURLを入力(静的URLです)し、 Widthは120を指定、Layoutはbutton_countを選択、Action Typeはlikeを選択、 「Show Friends' Faces」と「Include Share Button」はオフでコードを取得しました。 この取得したコードを、ツイッターのツイートボタンを横並び(ツイッターボタンは左に、いいねボタンは右)に表示されるよう、floatして配置しています。 色々と調べ倒しましたが、表示されない原因がわかりませんでした。 もう少し待てば表示されるものなのでしょうか? html5でコーディングし、htmlの文字コードはUTF-8で指定しています。 ページ内にいいねボタンがどうしても必要ですので、解決方法をご存知の方がおられましたら、ご教授いただけると大変ありがたいです。 <!doctype html> <html lang="ja"> <head> <meta charset="utf-8"> <title>fbtest</title> <meta name="viewport" content="width=device-width,user-scalable=no"> <meta name="format-detection" content="telephone=no"> <meta name="description" content=""> <meta name="keywords" content=""> <link rel="stylesheet" href="common/css/normalize.css"> <link rel="stylesheet" href="common/css/style.css"> <link rel="stylesheet" href="common/css/style-s.css" media="only screen and (max-width:767px)"> <link rel="stylesheet" href="common/css/style-l.css" media="only screen and (min-width:768px)"> <style type="text/css"> div#social { clear: both; text-align:left; position:absolute; left: 0; top:30px; } div#tw { float: left; width:92px; } div#fb { float: left; width:120px; } div#fb .fb_iframe_widget > span { vertical-align: baseline !important; } </style> </head> <body> <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&version=v2.0"; js = d.createElement(s); js.id = id; js.async = true; }(document, 'script', 'facebook-jssdk'));</script> <div id="social" class="clr"> <div id="tw"> <a href="https://twitter.com/share" class="twitter-share-button" data-url="www.sample.co.jp/site/" data-via="info_lvwellness" data-hashtags="サンプル">Tweet</a> <script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');</script> </div> <div id="fb"> <div class="fb-like" data-href="http://www.sample.co.jp/site/sample.html" data-width="120" data-layout="button_count" data-action="like" data-show-faces="false" data-share="false"></div> </div> </div> </body> </html>

    • 締切済み
    • CSS
  • ハッシュタグ付きツイートが表示されない。

    ツイッター公式アカウントからハッシュタグ付きツイートを拾って、掲載するウィジェットをHTML上に組み込んだのですが、一部のアカウントのみ、問題なくハッシュタグ付きツイートが表示されます。 ツイッターボタンのaタグには、 https://twitter.com/intent/tweet?text=エンコードされたテキスト&url=URL&button_hashtag=ハッシュタグ としているのですが、できる人とそうでない人がおりまして、何か各アカウントに設定があるのでしょうか。

  • twitterのツイートボタンを設置できない

    宜しくお願い致します。 twitterのツイートボタンを設置できないで困っています。 宜しくご教授ください。 ホームページビルダーで自分のHPを作っています。 カウントを設定します。 プロバイダはOCNです。 ブラウザはIE9と他のパソコンではIE7を使って確認しました。 クロームではちゃんと見れました。 https://twitter.com/goodies/tweetbuttonを参考にボタンを作りました。 <a href="http://twitter.com/share" class="twitter-share-button" data-text="コメントを入れました。!" data-count="none" data-via="yoyo" data-lang="ja">Tweet</a><script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script> 『ボタンをプレビューにて確認後、コードを取得すれば完了です!』と書いてあるところに 『SSL ではライブプレビューは利用できません。』 と表示されました。 何がいけないのでしょうか? また対応策を教えてください。 宜しくお願い致します。

  • FacebookのCommentsについて

    Facebookのapi(JavaScript)にてFacebookページのウォールを取得し、各投稿ごとに動的にIDを付加したCommentsプラグインを表示したいと思っています。 下記要領で実行すると、htmlは正しく挿入されている(Firebugにて確認)のですが、Commentsが読み込まれません。 同じファイル内でgetWall関数外に静的にHTMLを記述するとCommentsは表示されます。 どうすれば動的に識別子を付加したCommentsを表示させることができますでしょうか? <!-- SDK読み込み --> <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/all.js#xfbml=1";  fjs.parentNode.insertBefore(js, fjs); }(document, 'script', 'facebook-jssdk'));</script> <script>   function getWall() {     FB.api(       '/ -- ID -- /feed',       { access_token: ' -- 取得したアクセストークン -- ' },       function(response) {         // 取得後のコールバック         var contents = '';         for (var i = 0; i < response.data.length; i++) {           if(response.data[i]['message']){             contents += "<div class='topic_block' id='topic_" + response.data[i]['id'] + "'\>";             contents += response.data[i]['message'];             contents += "</div>";             contents += "<div class='fb-comments' data-href=' -- パーマリンク等、投稿毎の識別子 -- ' data-num-posts='10' data-width='470'></div>";             contents += "</div>";           */           }         }                     // ウォールの内容を表示させる         document.getElementById('topics').innerHTML = contents;       });   }      window.fbAsyncInit = function() {     getWall();   }; </script> <div id='topics'></div>

  • いいねボタンのコメント用ポップアップが消える

    こんにちは. HTML初心者です. Facebookのいいねボタンを設置したところ,正常に動作しないようなので質問させていただきます. 【症状】 ウェブページに設置したFacebookのいいねボタンを動作確認のためにボタンをクリックしたところ, 表示されるはずのコメント用ポップアップが一瞬表示された後,何も操作していないのにすぐに消えてしまい困っています. この時点ではいいねボタンのカウントは増えません. ポップアップが消えた後は,いいねボタンが「承認」という文字になり,クリックすると別ウィンドウで「「いいね!」を認証」というページのポップアップが現れ,「いいね!」または「キャンセル」を選べるようになります. ここで「いいね!」を押すとカウントは増えるのですが,コメントを書き込むことができません. コメントを書いた上でいいね!と押せるようにしたいのです. 【動作確認したパソコン】 Windows XP 【動作確認したブラウザ】 Google Chrome (バージョン 24.0.1312.57 m) Firefox (バージョン 16.0.2) 以下にソースコードの一部を示します. 埋め込みコードはFacebookコネクトのページ (http://developers.facebook.com/docs/reference/plugins/like/) から発行しました. HTML5で記述しています. (XFBMLでも試しましたが,同様の症状が出ました.) ======================================== 【HTMLタグ】 <html xmlns="http://www.w3.org/TR/xhtml1" lang="ja"> 【BODYタグ内】 <!-- Facebook共有ボタンスクリプトここから --> <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/all.js#xfbml=1"; fjs.parentNode.insertBefore(js, fjs); }(document, 'script', 'facebook-jssdk'));</script> <!-- Facebook共有ボタンスクリプトここまで --> <!-- Facebook共有ボタンここから --> <div class="fb-like" data-href="<!-- 表示させたいページのURL -->" data-send="false" data-layout="button_count" data-width="450" data-show-faces="false"></div> <!-- Facebook共有ボタンここまで --> ======================================== オブジェクトデバッガ(http://developers.facebook.com/tools/debug/og/object)で確認しても, 特にエラーや警告はありませんでした. コメント用ポップアップを正常に表示させるにはどのようにしたらよいでしょうか. iframe版は正常に動作することを確認済みです. iframe版のほうがIEでも表示できるなどのメリットがあり,そちらのほうが推奨されていますが, コメントも書き込めたほうがいいので,HTML5かXFBMLで設置したいと考えております. なにか足りない情報やご指摘がありましたらご連絡ください. よろしくお願いいたします.

  • ツイッターボタンのマウスオーバー時にハンドにしたい

    ご覧いただきましてありがとうございます。 ウェブサイトのページに、ツイッターのつぶやくボタン(下記コード)を設置したのですが、デフォルトだとツイッターのアイコンの上にマウスが来てもポインタのままでハンド(人差し指のポインタ)になりません。 ページ上のリンクはすべてonmouse時にハンドになるように統一したいのですが、どのような記述をすればできるでしょうか。 よろしくお願いします。 <a href="http://twitter.com/share" class="twitter-share-button" data-count="none" data-lang="ja">Tweet</a><script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script>

    • ベストアンサー
    • HTML

専門家に質問してみよう