「Google+1ボタン」の設置方法とは?

このQ&Aのポイント
  • 「Google+1ボタン」を設置する方法について説明します。
  • 具体的な設置コードとともに、「Google+1ボタン」の表示位置やタグの貼り付け方について解説します。
  • また、タグの貼り付け方の具体的な例も示します。
回答を見る
  • ベストアンサー

「Google+1ボタン」を設置したい

「Google+1ボタン」を設置したいと思い、こちらのサイトを見ながら取り組んでいます。 https://developers.google.com/+/web/+1button/?hl=ja 取得するコードは次のようになっているのですが、これについて質問させてください。 <!-- +1 ボタン を表示したい位置に次のタグを貼り付けてください。 --> <div class="g-plusone" data-size="medium"></div> <!-- 最後の +1 ボタン タグの後に次のタグを貼り付けてください。 --> <script type="text/javascript"> window.___gcfg = {lang: 'ja'}; (function() { var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true; po.src = 'https://apis.google.com/js/platform.js'; var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s); })(); </script> このコードについてですが、 <!-- 最後の +1 ボタン タグの後に次のタグを貼り付けてください。 --> とありますが、 「最後の +1 ボタン タグの後」とは <div class="g-plusone" data-size="medium"></div> のことでしょうか? もしそうだとすると、これらを続けて貼り付けるということで次のようになりますね。 <div class="g-plusone" data-size="medium"></div> <script type="text/javascript"> window.___gcfg = {lang: 'ja'}; (function() { var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true; po.src = 'https://apis.google.com/js/platform.js'; var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s); })(); </script> もし違っていたら指摘してください。 よろしくお願いします。

  • arbert
  • お礼率98% (269/273)
  • PHP
  • 回答数1
  • ありがとう数6

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

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

ボタンを1つ設置する場合は、それで合っています。 もし複数のボタンを設置する場合は、下部に設置したボタンの下に<script type~~>を記述してあげれば良いと言う事ですね。

arbert
質問者

お礼

ご回答ありがとうございます。 わかりました。 最初はよくわからなかったので、<script type="text/javascript">以下の部分を</head>のすぐ上に貼り付けていたのですが、これでも表示されました。 どちらでもよいということでしょうか?

関連するQ&A

  • CSSでクラス名を指定してもうまくいかない

    下記URLのサイトを参考にして「Google+1ボタン」を設置しようとしています。 https://developers.google.com/+/web/+1button/?hl=ja とりあえずサイト上には設置できたのですが、今度はこの「Google+1ボタン」を自分が設置したい場所に貼り付けるために、CSSで指定しようと思いました。 ちなみに、取得したコードは以下のようになっています。 <!-- +1 ボタン を表示したい位置に次のタグを貼り付けてください。 --> <div class="g-plusone" data-size="medium"></div> <!-- 最後の +1 ボタン タグの後に次のタグを貼り付けてください。 --> <script type="text/javascript"> window.___gcfg = {lang: 'ja'}; (function() { var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true; po.src = 'https://apis.google.com/js/platform.js'; var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s); })(); </script> コードは上記のようになっています。 class="g-plusone" となっていますので、このままこれをクラス名としてCSSに記述しても適用されません。 そこで、これにさらに<div>タグで囲んで、この<div>にクラスを付ければできると思い <div class=”sample”><div class="g-plusone" data-size="medium"></div></div> として、sampleに対してスタイルを指定してみたところ、うまくできました。 しかし、できればこのようなことはせず、"g-plusone"というクラス名が最初から付いているわけですから、これを利用できないかと考えています。 もし、できるのであれば、そのやり方を教えてください。

    • ベストアンサー
    • CSS
  • Google Analytics トラッキングコードについて

    Google Analytics トラッキングコードについて ホームページのhead部分にこのスクリプトを埋め込んでくださいとありますが、 外部のJavaScriptに埋め込む方法はないでしょうか?外部のファイルにコピペしてみたのですがトラッキングコードを認識できませんでした。 <script type="text/javascript"> var _gaq = _gaq || []; _gaq.push(['_setAccount', 'UA-18744062-1']); _gaq.push(['_trackPageview']); (function() { var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true; ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js'; var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s); })(); </script>

  • mixiイイネ ボタン タグ FC2ブログに設置

    mixiイイネボタンのタグを取得し、FC2ブログに貼りましたが、下記、問題があります。 どなたか、タグの修正をお願いいたします。 (1)mixiイイネが、トップページのすべての記事にリンクしてしまう。-->個別の記事にリンクさせたい。 (2)コメント欄のポップアップが出てこない。 取得したタグは下記です。 書き換えお願いいたします。 <div data-plugins-type="mixi-favorite" data-service-key="cb9d3e566afee757511aeb28b067c69fcd9f22fe" data-href="" data-show-faces="true" data-show-count="true" data-show-comment="true" data-width="450"></div><script type="text/javascript">(function(d) {var s = d.createElement('script'); s.type = 'text/javascript'; s.async = true;s.src = 'http://static.mixi.jp/js/plugins.js#lang=ja';d.getElementsByTagName('head')[0].appendChild(s);})(document);</script>

  • グーグル+ボタンが設置できない

    こんにちは。 ホームページにグーグル+のボタンをつけたいのですがうまくいきません。 HTML5構文などいろいろやってみたのですが、<g:plusone 不明なタグがあります>、 というメッセージが出てきます。 ホームページ作成ソフトはホームページビルダー16を使っています。 ご指導お願いいたします。

  • JavaScriptのDOMでGoogle Ads

    JavaScriptのDOMでGoogle Adsenceコードを表示させたいです。 var test = document.getElementById("test"); var code='【Google Adsenceコード】'; test.innerHTML=code; が上手くいきません。 Google Adsenceコードの中に、<script type="text/javascript"><!-- などが入っているからでしょうか? よろしくお願いいたします。 Google Adsenceコードの例。 <script type="text/javascript"><!-- google_ad_client = "ca-pub-11111111111111111"; /* test */ google_ad_slot = "11111111111111"; google_ad_width = 728; google_ad_height = 90; //--> </script> <script type="text/javascript" src="http://pagead2.googlesyndication.com/pagead/show_ads.js"> </script>

  • google翻訳ツール設置

    google翻訳ツールを ビルダー11で作成しているHPに設置したのですが プレビューで表示されません。 <header>から</header>の間に入れたのですが間違いでしょうか? 11行目です。 よろしくお願いいたします。非常に困っております。 ご存知の方教えてください、お願いします。 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitio … <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <meta http-equiv="Content-Style-Type" content="text/css"> <title></title> <meta name="description" content="" /> <meta name="keywords" content="" /> <link href="style.css" rel="stylesheet" type="text/css" /> <link rel="stylesheet" type="text/css" href="table.css" id="_HPB_TABLE_CSS_ID_"> <script type="text/javascript"> var _gaq = _gaq || []; _gaq.push(['_setAccount', 'UA-6834572-4']); _gaq.push(['_trackPageview']); (function() { var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true; ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js'; var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s); })(); </script> </head> <body> <div id="container"> <div id="header"> <h1></h1> <a href="index.html"><img src="images/logo.gif" alt="Sample Nail Salon" name="logo" width="357" height="57" id="logo" /></a><br> </div> <!--/header-->

  • ラジオボタンとテキストボックスの連動

    現在googleマップで経度、緯度の取得ができました。 そこで、こちらのサイト(http://www.geocities.jp/standing_art/hoheto/idokeido_old.html)のようにラジオボタン選択時のテキストボックスにのみ経度、緯度の取得を行いたいのですがどうすればいいでしょうか? 今あるソースはこれです。 <!DOCTYPE html> <html> <head> <script src="http://maps.google.com/maps/api/js?v=3&sensor=false" type="text/javascript" charset="UTF-8"></script> <script type="text/javascript"> //<![CDATA[ var map; function init() { var latlng = new google.maps.LatLng(39, 138); var opts = { zoom: 6, mapTypeId: google.maps.MapTypeId.ROADMAP, center: latlng }; map = new google.maps.Map(document.getElementById("map"), opts); google.maps.event.addListener(map, 'click', mylistener); } function mylistener(event) { document.getElementById("show_lng").innerHTML = event.latLng.lng(); document.getElementById("show_lat").innerHTML = event.latLng.lat(); } //]]> </script> </head> <body onload="init()"> <div id="map" style="height:560px"></div> 緯度 : <div id="show_lng"></div> 経度 : <div id="show_lat"></div> </body> </html>

  • Google AJAX Feed APIキー

    http://okwave.jp/qa/q7289256.html ↑こちらの記事を参考にしてサイトのTOPページにWPのタイトル表示を試みました。 表示はされるものの、そのタイトルを更にリンク(各記事にとぶ)にしたいのですが、 以下のソースのどこをいじればリンクになるのか教えて下さい。 ------------------------------------------------------- ■タイトル表示させたいページの<head>内に以下入れる。 <script type="text/javascript" src="http://www.google.com/jsapi"></script> <script type="text/javascript"> google.load("feeds", "1"); function initialize() { var feed = new google.feeds.Feed("★RSS★"); feed.load(function(result) { if (!result.error) { var container = document.getElementById("feed"); for (var i = 0; i < result.feed.entries.length; i++) { var entry = result.feed.entries[i]; var div = document.createElement("div"); div.appendChild(document.createTextNode(entry.title)); container.appendChild(div); } } }); } google.setOnLoadCallback(initialize); </script> ■HTMLのタイトル表示させたい部分に以下入れる。 <div id="feed"></div> ------------------------------------------------------------------------------- よろしくお願い致します。

  • ホームページにおいて

    シンタックスエラーが出ます。 何かミスがありますでしょうか?? 教えて下さい。 <script type="text/javascript"> var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www."); document.write("\<script src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'>\<\/script>" ); </script>

  • 外部javascriptの重複を防ぐには

    簡単なタグを貼り付けるだけで使えるブログパーツを、javascriptで作ろうとしています。 <■コード(1)> <script type="text/javascript" src="http://ex.com/js/test.js"></script> <div> <img class="imgobj" src="http://ex.com/dm.gif" width=1 height=1/> </div> 上記のように外部JSを読み、そのJSの中でimgタグのonloadイベントを記述し、そのイベントの処理でimgタグの直前にテキストを書き出すようにしています。これはidなどを意識しなくてもタグを貼りつけた場所に出力されるようにするための措置です。 上記は単独で貼り付ける場合はうまくいったのですが、同じコードを複數貼り付けると外部JSの衝突でエラーになります。よって外部JSの読み込みを動的にしてみました。 <■コード(2)> <script type="text/javascript"> var obj=""; obj = document.getElementById("example_tag"); if( !obj ){ var ele = document.createElement("script"); ele.id = "amacusplus_scriptfile"; ele.type = "text/javascript"; ele.src = "http://ex.com/test.js"; document.body.appendChild(ele); } </script> <div> <img class="imgobj" src="http://ex.com/dm.gif" width=1 height=1/> </div> このソースを同じページ内で二箇所貼り付けると、 今度は動的な外部JSの読み込みとimgタグのonload処理の発生タイミングが微妙なため挙動不審になってしまいました。成功したり失敗したり・・・。 とこのような状況で煮詰まっています。 質問は (1)外部JSの動的な読み込みの後に、明示的にimgのonloadイベントを起こすことはできないか? がメインですが、他のアプローチで解決できればそれでもいいので (2)<script>~</script>内に書いたjavascript内で、現在位置を知る方法(scriptエレメントを知る方法) (3)複数回読まれても重複を起こさない外部JSやその読み込み方法の書き方 などなにかヒントになるようなことを教えて頂きたいのです。 よろしくお願いします。

専門家に質問してみよう