TwitterをHTMLに埋め込む方法

前へ 次へ
このQ&Aのポイント
  • Twitterの個人のアカウントをHTMLに埋め込み表示する方法
  • 公式で生成されたコードを埋め込んでもリンクしか表示されず、タイムラインが表示されない
  • divやheadで囲んでも改善されないので、別の方法を試す必要がある
回答を見る
  • ベストアンサー

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
  • 回答数1
  • ありがとう数1

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

  • ベストアンサー
  • Proof4
  • ベストアンサー率78% (151/192)
回答No.1

scriptタグのsrcが//で始まっていますが、https:を付け加えてhttps://platform・・・のように記述したら表示されました。 バグかなんかですかね。

TKIosu
質問者

お礼

わたしも同じようにすると表記されました たしかにコピーではこの項目はないのでバグっぽいですね… ありがとうございました

  1. カテゴリ
  2. [技術者向] コンピューター
  3. プログラミング・開発
  4. HTML

関連するQ&A

  • 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> お力添え頂けたら幸いです。 よろしくお願いします。

  • 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> 上記部分に問題があるみたいです。 解決方法ないでしょうか。お力添え頂けますと幸いです。よろしくお願いします。

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

    宜しくお願い致します。 twitterのツイートボタンを設置できないで困っています。 宜しくご教授ください。 ホームページビルダーで自分のHPを作っています。 カウントを設定します。 プロバイダはOCNです。 ブラウザはIE９と他のパソコンでは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 ではライブプレビューは利用できません。』 と表示されました。 何がいけないのでしょうか？ また対応策を教えてください。 宜しくお願い致します。

  • 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` が指定されています。

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

    ご覧いただきましてありがとうございます。 ウェブサイトのページに、ツイッターのつぶやくボタン（下記コード）を設置したのですが、デフォルトだとツイッターのアイコンの上にマウスが来てもポインタのままでハンド（人差し指のポインタ）になりません。 ページ上のリンクはすべて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
  • 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
  • twitterのプロフィールウィジェットをホーム・

    twitterのプロフィールウィジェットをホームページで表示させたいのですが表示されるかどうか試しに以下のようにやってみましたが空白のページしか表示されません。なぜでしょうか? htmlのコードはhttp://twitter.com/about/resources/widgets/widget_profileにて取得しました。 プレビューも確認しました。宜しくお願いします。 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>無題ドキュメント</title> </head> <body> <div > <script src="http://widgets.twimg.com/j/2/widget.js"></script> <script> new TWTR.Widget({ version: 2, type: 'profile', rpp: 4, interval: 6000, width: 250, height: 300, theme: { shell: { background: '#333333', color: '#ffffff' }, tweets: { background: '#000000', color: '#ffffff', links: '#4aed05' } }, features: { scrollbar: false, loop: false, live: false, hashtags: true, timestamp: true, avatars: false, & nbsp; behavior: 'all' } }).render().setUser('自分のID').start(); </script> </div> </body> </html>

    • ベストアンサー
    • HTML
  • twitterのプロフィールウィジェットの表示

    半月前からでしょうか、ツイッターのプロフィールウィジェットが表示されません。 私自身は、何も変えていないです。 どうしたら表示されるでしょうか。 ---以下、ツイッター上で表示されるコード--- <script src="http://widgets.twimg.com/j/2/widget.js"></script> <script> new TWTR.Widget({ version: 2, type: 'profile', rpp: 5, interval: 5000, width: 250, height: 300, theme: { shell: { background: '#555555', color: '#ffffff' }, tweets: { background: '#000000', color: '#ffffff', links: '#4aed05' } }, features: { scrollbar: false, loop: false, live: true, hashtags: true, timestamp: true, avatars: false, behavior: 'all' } }).render().setUser('自分のＩＤ').start(); </script> ---終了---

  • twitterのリツイートの確認方法

    いつもお世話になっております。 PCから、https://twitter.com/ にログインして、 画面上の@つながり をクリックすると さんは、あなたのツイートをリツイートしました さんと他○人があなたをフォローしました というようなメッセージを見かけるのですが、 何のツイートに対して、どんなフォロー、リツイートが行われたのかをみたいのですが、確認方法がわかりません。 http://okwave.jp/qa/q6858428.html 1) Twitter公式サイト（ http://twitter.com/ ）にログインする。 2) 自分のTLの上に表示されている「リツイート」の文字をクリック 3) ダウンリストが表示されるので、その中から「リツイートされたあなたのツイート」を選択 と記載があるですが、TL(TimeLine)とはログインした直後の画面と思っています。 http://twitter.web-marketing.in/twitter-words/what-is-timeline-tl-of-twitter/ しかし自分のツイートの上に表示されるリツイートの文字というのがみあたりません。 http://blog.livedoor.jp/has/archives/51074161.html http://twitter.com/#retweeted_of_mine にアクセスしたのですが、 #retweeted_of_mineの検索結果 ツイート トップ / すべて / あなたがフォローしているユーザー #retweeted_of_mineのツイートが見つかりません。 と表示されるだけで、一覧のようなものはでてきませんでした。 リツイート、フォローされたツイート、相手がフォローした内容を一覧で確認するにはどうすればよいのでしょうか。 ご教授よろしくお願いいたします。

  • MSNとTwitterについて

    MSNでTwitterを更新していました。 MSNでログインしたままTwitterのアカウントを削除しました。 そしたらツイートを表示できません。再度お試しください。 と表示されました。 新しいアカウントでMSNにログインしたいのですができません。 「ログアウトする」という表示もありません。 新しいアカウントでログインする方法をご存知の方教えてください。 ↓参考にしてください。 MSN http://jp.msn.com/ MSN - Wikipedia http://ja.wikipedia.org/wiki/MSN Twitter http://twitter.com/ Twitter - Wikipedia http://ja.wikipedia.org/wiki/Twitter

注目のQ&A

カテゴリ

専門家に質問してみよう

職業から探して質問する

あなたにピッタリな商品が見つかる！ OKWAVEセレクト

質問する