• 締切済み

アメーバブログに外部Javascriptを利用して、以下を実現したいの

アメーバブログに外部Javascriptを利用して、以下を実現したいのですが可能でしょうか? 【実現したい】 ・各記事に表示 ・リツイートボタン ・各ソーシャルブックマーク ・「Facebookのいいね」ボタン 【可能な限り一つのjavascriptで実現したい】 リツイートボタンを実現しているjavascriptに、「各ソーシャルブックマーク」と「facebookのいいねボタン」を組み込みたいです。 ▼リツイートボタンのjavascript▼ <!-- $(document).ready(function(){ var tid = 'twitteracount'; var page_url = location.href; if (page_url.match(/^.+\/entrylist[\-0-9]*\.html$/g )) { var entries = $(".newentrytitle a"); var classname = ".updatetime"; var flg = 0; } else { var entries = $(".foot a:contains('記事URL')"); var classname = "div.entry .subContents"; var flg = 1; } for (i = 0; i < entries.length; i++) { var url = entries[i]; if (flg == 0) { title = entries.eq(i).text(); } else { title = $("div.entry h3.title").eq(i).text(); } var twitter_btn = '<p>この記事を共有する</p><a href="http://twitter.com/home/?status=' + encodeURIComponent('RT @'+tid+': '+title + ' ' + url) + '" target="_blank"><img border="0" alt="ツイッターに投稿する" src="../common/twitter/button/twitter-button038.png" /></a>'; $(classname).eq(i).append(' <div style="background: none repeat scroll 0% 0% rgb(255, 255, 255); border: 1px dotted rgb(153, 153, 153); padding: 8px;">' + twitter_btn + '</div> '); } }) // --> ▼ソーシャルブックマーク▼ <a href='javascript:location.href="http://b.hatena.ne.jp/add?mode=confirm&url="%2bencodeURIComponent(location.href)%2b"&amp;title="%2bencodeURIComponent(document.title);' style="font-size:12px; text-decoration:none;"><img src="common/img/hatenasbm.gif" alt="はてなブックマーク" width="14" height="12" /></a>

みんなの回答

  • yyr446
  • ベストアンサー率65% (870/1330)
回答No.1

ぱっと見回答ですが、 for(i = 0; i < entries.length; i++){ ------ $(classname).eq(i).append('<div ....... + twitter_btn + '</div> '); の下に、同じように $(classname).eq(i).append('▼ソーシャルブックマーク▼のHTML'); $(classname).eq(i).append('「Facebookのいいね」ボタンのHTML'); } }); としてもだめなの?

ameblo-wo
質問者

補足

yyr446さん、ご回答ありがとうございます。 以下のように追記しましたが、表示されなくなりました。 リンク先の指定が javascript になっているからエラーになるんですかね? $(classname).eq(i).append(' <div style="background: none repeat scroll 0% 0% rgb(255, 255, 255); border: 1px dotted rgb(153, 153, 153); padding: 8px;">' + twitter_btn + '</div> '); $(classname).eq(i).append('<a href='javascript:location.href="http://b.hatena.ne.jp/add?mode=confirm&url="%2bencodeURIComponent(location.href)%2b"&amp;title="%2bencodeURIComponent(document.title);' style="font-size:12px; text-decoration:none;"><img src="common/img/hatenasbm.gif" alt="はてなブックマーク" width="14" height="12" /></a>');

関連するQ&A

  • 簡潔なJavaScriptで実現したい

    次のような、btnToggleというクラス名のdivタグがいくつかあるHTMLで、 それぞれクリックするとそれぞれの「開く/閉じる」が反転するという動きをさせたいです。 <div class="btnToggle"><a href="#"><span>+</span>開く</a> <div>AAA</div> </div> <div class="btnToggle"><a href="#"><span>+</span>開く</a> <div>BBB</div> </div> <div class="btnToggle"><a href="#"><span>+</span>開く</a> <div>CCC</div> </div>    : <div class="btnToggle"><a href="#"><span>+</span>開く</a> <div>XXX</div> </div> 下記のようなJavaScriptで実行してみたのですが、 いくつかのdivタグをそれぞれクリックすると、flgの値と現在の状態が入れ替わってしまいます。 クラス名が同じで、flgも一つの変数なので当たり前なのですが… <script type="text/javascript"> $(document).ready(function(){ var flg = "close"; $(".btnToggle").click(function(){ if(flg == "close"){ $(this).html("<span>-</span>閉じる"); flg = "open"; }else{ $(this).html("<span>+</span>開く"); flg = "close"; } }); }); </script> 私が考えられることは、classではなく、idで「btnToggle1」「btnToggle2」「btnToggle3」…などと定義し、 JavaScriptのプログラムを次のように書くしか思いつかないのですが、 これでは、我ながら間抜けなプログラムだなと思いました。 <script type="text/javascript"> $(document).ready(function(){ var flg1 = "close"; $(".btnToggle1").click(function(){ if(flg1 == "close"){ $(this).html("<span>-</span>閉じる"); flg1 = "open"; }else{ $(this).html("<span>+</span>開く"); flg1 = "close"; } }); var flg2 = "close"; $(".btnToggle2").click(function(){ if(flg2 == "close"){ $(this).html("<span>-</span>閉じる"); flg2 = "open"; }else{ $(this).html("<span>+</span>開く"); flg2 = "close"; } }); var flg3 = "close"; $(".btnToggle3").click(function(){ if(flg3 == "close"){ $(this).html("<span>-</span>閉じる"); flg3 = "open"; }else{ $(this).html("<span>+</span>開く"); flg3 = "close"; } });        :        : }); </script> 配列などを使えばもっと簡潔になるのでしょうか。 どうか教えてくださいますようお願い申し上げます。

  • innerHTML

    JavaScript初心者です。 下記のコード(1)がGoogleの公式サンプルに載っていますが、 私としては(2)の方が分かりやすいと思っています。 コードとして問題がありますでしょうか? 1. 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); } 2. var container=document.getElementById("feed"); var htmlsrc=""; for(var i=0;i<result.feed.entries.length;i++){ var entry=result.feed.entries[i]; htmlsrc+="<div>"+entry.title+"</div>"; } container.innerHTML=htmlsrc; } 参考サイト http://www.ajaxtower.jp/googleajaxfeed/before/index2.html

  • アメーバブログについてです。

    アメブロのプロフィールページのフリースペースに 下のブログパーツを表示させたいんですが・・・↓ <script src="http://www.google.com/jsapi" type="text/javascript"></script><script type="text/javascript">google.load("swfobject", "2"); </script><script type="text/javascript">var flashvarsARiErbKQlN = {lcolor:"660000",hcolor:"FFCC33",zcolor:"FF0099",rcolor:"FF3300",volume:"35",psize:"20",fsize:"12",auto:"1",rand:"1",dbno:"14899"};var paramsARiErbKQlN = {loop:"true",quality:"high",wmode:"window",bgcolor:"#000000"};var attributesARiErbKQlN = {id:"flashARiErbKQlN", name:"flashARiErbKQlN"};swfobject.embedSWF("http://www.ryuutuu.net/yt/yt-flash.swf", "ARiErbKQlN", "300", "200", "10.0.0", "", flashvarsARiErbKQlN, paramsARiErbKQlN, attributesARiErbKQlN);</script><div id="ARiErbKQlN"><a title="通販" href="http://www.ryuutuu.net/" target="_blank">通販</a></div> 「不正な文字が含まれています」とでるんです。 この中に不正な文字が入っているんでしょうか? これを直接貼り付ける方法でやっているんですが・・・ 私のやり方が間違っているんでしょうか? できればこのブログパーツをアメブロのプロフィールページに表示させれるかたちにしていただきたいです。 それか、表示させれる方法を教えてくださると助かります。 あと、フリープラグインでなら表示されることは知っています。 しかし、私がブログパーツを表示させたいところは プロフィールページのフリースペースなので それについて詳しい方 教えてくださると嬉しいですm(_ _)m

  • クリックすると内容が展開されるリスト

    親項目をクリックすると、隠れていた子項目が表示され、 再び親項目をクリックすると、子項目が隠れる。 といったページを作成するため(http://www.openspc2.org/reibun/javascript/mouse/060/index.html)より、サンプルをいただきました。 これを、さらに ・「ダブルクリックではなく、シングルクリックで開閉」 ・「1つだけ展開し後はたたむのではなく、展開したものは閉じる操作をするまで展開している」 というように変換したいと思っています。 (JavaScript等、かなりの初心者です。できるだけ単純かつ分りやすい方法で作成したいと考えております。) お知恵を貸してください。 自分の要望に近いサンプルコードを探しましたが、コードが複雑で理解できず、皆さんへご質問している次第です。 =============(以下、コード)============= <html> <head> <title>ページの名前</title> <script> window.onload=function(){ setNavi(); hideNavi(); } function setNavi(){ var tags=document.getElementById("navi").getElementsByTagName("a"); for(var i=0;i<tags.length;i++){ if(tags[i].href.match(/#$/)) tags[i].onclick=disp; } } function hideNavi(){ var n=document.getElementById("navi").firstChild; while(n){ if(n.nodeName=="LI") n.className="hide"; n=n.nextSibling; } } function disp() { var pp=this.parentNode.parentNode; var flg=pp.className=="hide"; hideNavi(); pp.className=flg?"":"hide"; return false; } </script> <style> #navi,#navi ul{ margin:0px; padding:0px; list-style:none; } #navi li.hide ul{ display:none; } </style> </head> <body> <ul id="navi"> <li> <div><a href="#">☆★☆スパゲッティー☆★☆</a></div> <ul> <li><a href="http://~">・カルボナーラ</a></li> <li><a href="http://~">・ペスカトーレ</a></li> <li><a href="http://~">・ペペロンチーノ</a></li> </ul> </li> <li> <div><a href="#">☆★☆どんぶり☆★☆</</a></div> <ul> <li><a href="http://~">・親子丼</a></li> <li><a href="http://~">・カツ丼</a></li> <li><a href="http://~">・天丼</a></li> </ul> </li> <li> <div><a href="#">☆★☆ファーストフード☆★☆</div> <ul> <li><a href="http://~">・ハンバーガー</a></li> <li><a href="http://~">・ホットドッグ</a></li> <li><a href="http://~">・フライドポテト</a></li> </ul> </li> </ul> </body> </html> ============================================ よろしくお願いいたします。

  • 外部javascriptファイルの中にさらに外部javascriptファイルを入れたい

    javascript初心者です。 メニューの一部を外部ファイルによるツリーメニューにし、 さらにメニュー部分全体を外部ファイルにしようとしましたが、 メニュー部分全体を外部ファイルに移したら、 中のツリーメニューが機能しなくなってしまいました。 いろいろ試してみましたが、付け焼き刃の知識では皆目見当が付きません。 ご指摘いただけると嬉しいです。内容は下記の通りです。 メニュー全体の外部ファイル「menu.js」 document.write('<div id="menu">'); document.write('<h1>お役立ち情報<\/h1>'); document.write('<ul>'); document.write('<script src="javascript\/tree.js" type="text\/javascript"><\/script>'); document.write('<li><a href="javascript:tree("click1");" title="">HOME<\/a>'); document.write('<\/li>'); document.write('<div id="click1" style="display:none;">'); document.write(' <a href="未設定" title="作成中です" target="未定">第1ページ <\/a>'); document.write('<br>'); document.write(' <a href="未設定" title="教えられません" target="未定">第2ページ <\/a>'); document.write('<br>'); document.write('<\/div>'); document.write('<li><a href="javascript:tree("click2");" title="">お知らせ<\/a>'); document.write('<\/li>'); document.write('<div id="click2" style="display:none;">'); document.write(' <a href="未設定" title="作成中です" target="未定">第3ページ <\/a>'); document.write('<br>'); document.write(' <a href="未設定" title="教えられません" target="未定">第4ページ <\/a>'); document.write('<br>'); document.write('<\/div>'); document.write('<li><a href="#">DOWNLOAD<\/a>'); document.write('<\/li>'); document.write('<\/ul>'); document.write('<\/div>'); 中に入れてあるツリーメニューの外部ファイル「tree.js」 function tree(id) { if (document.getElementById(id).style.display == "block") document.getElementById(id).style.display="none"; else document.getElementById(id).style.display="block"; } .htmlの記述はこうなっています。 <script src="menu.js" type="text/javascript"></script>

  • javascriptとCSSを使ってのドロップダウンメニュー作成

    CSSとJavaScriptを使って ドロップダウンメニューを作ろうと思っているのですが JavaScriptがうまく作動していないためか FireFoxでは表示されるのですが IE6では動きません。 ご教授お願い致します。 ■index.html <head> <script src="javascript/menu.js" type="text/javascript"></script> </head> <div id="nav"> <ul> <li id="category"><a href="~">category</a> <ul> <li><a href="~">Overview</a></li> <li><a href="~">Overview</a></li> </ul> <ul> <li id="category"><a href="~">category</a> <ul> <li><a href="~">Overview</a></li> <li><a href="~">Overview</a></li> </ul> </div> ■menu.js function menuHover() {var menuItems = d.getElementById("nav").getElementsByTagName("li"); for (var i = 0, miL = menuItems.length; i < miL; i++) { menuItems[i].onmouseover = function() { this.className = "mnhover"; } menuItems[i].onmouseout = function() { this.className = ""; } window.onload = menuHover();

  • すみませ~~ん!助けてぇ!

    初心者です・・すいません! どうしても解決できずに頭抱えています!!うぅ・・。 a要素をマウスオーバーしたらdiv要素のクラスが入れ替わるようにしたいと思い こんなスクリプトを組んでみたんですが・・・できません。。 原因はたぶん function(){~~}の中身の記述の仕方が違うのかもと・・ そう思っています。 原因を教えていただけませんでしょうか?? ぜひご教授のほどよろしくお願いいたします。。お願いします! HTML------------------------------------------------------------------------- <body> <a href="http://www.yahoo.co.jp/" class="waiwai"></a> <a href="http://www.yahoo.co.jp/" class="waiwai" style="top:100px;"></a> <a href="http://www.yahoo.co.jp/" class="waiwai" style="top:200px;"></a> <a href="http://www.yahoo.co.jp/" class="waiwai" style="top:300px;"></a> <div class="hare"></div> <div class="hare"></div> <div class="hare"></div> <div class="hare"></div> </body> CSS------------------------------------------------------------------------- .hare{ display:block; background:url(toumei.gif) no-repeat; width:300px; height:100px;} .ame{ display:block; background:url(toumei2.gif) no-repeat; width:300px; height:100px;} .waiwai{background:url(toumei.gif) no-repeat; width:300px; height:100px; position:absolute; display:block;} javascript------------------------------------------------------------------- window.onload = function(){ var hai = document.getElementsByTagName("div"); var waku = document.getElementsByTagName("a"); for (var i=0; i<waku.length; i++){ waku[i].onmouseover = function(){ hai[i].className="ame"; } waku[i].onmouseout = function(){ hai[i].className="hare"; } } }

  • スクリプトで<div id="links">

    下記スクリプトで<div id="links"></div>のところを 開いた瞬間 <ul> <li><a href="http://foo.com/">foo</a></li> <li><a href="http://bar.com/">bar</a></li> </ul> に変換したいのですがうまくいきません どこをどのように変更すれば変換されるのでしょうか 【スクリプト】 <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <script type="text/javascript"> var URL = new Array("http://foo.com/","http://bar.co.jp/"); var TITLE = new Array("foo","bar"); // 表示用コンテナ var container = document.getElementById('links'); // リセット container.innerHTML=''; var ul=document.createElement('ul'); container.appendChild(ul); for(var i=0;i<URL.length;i++){ var li=document.createElement('li'); var a=document.createElement('a'); // 'href'属性の設定 a.setAttribute('href',URL[i]); // ラベル a.appendChild(document.createTextNode(TITLE[i])); li.appendChild(a); ul.appendChild(li); } </script> </head> <body> <div id="links"></div> </body> </html>

  • Scriptを読み込み中の表示について

    HTML <script language="JavaScript" type="text/javascript" src="AAA.js"></script> 外部JS <!-- google.load("feeds", "1"); function initialize() { var feed = new google.feeds.Feed("RSSURL"); feed.setNumEntries(5); feed.load(function(result) { if (!result.error) { var container = document.getElementById("mini_feed"); for (var i = 0; i < result.feed.entries.length; i++) { var entry = result.feed.entries[i]; var div = document.createElement("div"); var entry = result.feed.entries[i]; var dd = new Date(entry.publishedDate); // now var yearNum = dd.getYear(); if (yearNum < 2000) yearNum += 1900; var date = yearNum + "年"+(dd.getMonth()+1)+"月"+dd.getDate()+"日"; container.innerHTML += "<div>【"+"<b>" + date+"</b>" +"】<br /><a href='" + entry.link + "'>" + entry.title + "</a></div>"; } } }); } google.setOnLoadCallback(initialize); //--> を設置し、RSSをスクリプトで表示しています。 2秒くらい読込みが遅いので、その部分が、一時空白状態のままになります。 そこで、読み込み中に読込みしていますというぐるぐる回る画像を表示したいのですが、どのように記述すれば宜しいのでしょうか?

  • JavaScriptに詳しい方へ。

    はじめまして。twitterのつぶやきをブログへ貼り付ける方法をお聞きしたく、質問させていただきます。 Twitterの正規のブログパーツではたまに表示されないことがあるので、googleの提供する、Ajax feed というRSSを試して、成功したのですが文章が、 「kobayashitakuya: おはよう。」 「kobayashitakuya: おやすみ。」 のように、ひとつひとつのつぶやきに「@kobayashitakuya」というTwitterIDまで表示されてしまいます。 これを非表示にする方法をご教授してくださった方がいらしたら、とても助かります。 どなたか時間があればご教授してください。 ちなみにソースは以下のとおりです。 google.load("feeds", "1"); google.setOnLoadCallback(function() { var feed = new google.feeds.Feed("http://twitter.com/statuses/user_timeline/162644645.rss"); feed.setNumEntries(15); //表示つぶやき数 feed.load(function(result) { if (!result.error) { var html = ""; html += "<div class='newslist'>"; html += "<dl>"; for (var i = 0; i < result.feed.entries.length; i++) { var entry = result.feed.entries[i]; var dd = new Date(entry.publishedDate); // now var date = (dd.getMonth() + 1) + "月" + dd.getDate() + "日&nbsp;" + dd.getHours() + ":" + dd.getMinutes(); var content = entry.content; var contentSnippet = entry.contentSnippet; html += "<dt>" + date + "</dt>"; html += "<dd>"; html += "<a class='title' target='_blank' href='" + entry.contentSnippet + "'>" + result.feed.entries[i].title + "</a>"; html += "</dd>"; } html += "<dl>"; html += "</div>"; $("#kobayashi").html(html); } }); }); これで、 <div id="kobayashi"></div> と入力すると、つぶやきが表示されます。 「おはよう。」とつぶやくと、 「kobayashitakuya: おはよう」 と表示されます。 参考までに宜しくお願いします。

専門家に質問してみよう