Ameba Hyperland Plus公式ブログ

Ameba Hyperland Plus公式ブログ

Hyperland PlusのAmeba用ブログです。
更新は不定期で、Amebaでテストしたい時に使用します。

たまにピグでで遊んでいるかもしれません。

Amebaでブログを始めよう!
http://ameblo.jp/hyperlandplus/entry-10951394080.html

この記事は、アメーバブログにGoogle +1(プラスワン)ボタンを設置するための方法で、2011/07/12作成の完全オリジナルスクリプトです。
なお、本記事手法は1ページに複数のGoogle +1(プラスワン)ボタンを設置する場合の方法です。(1つ設置でも使用可能です。)
1ページに1つのみGoogle +1(プラスワン)ボタンを設置する場合は「アメーバブログでGoogleプラスワンボタン設置 単一ボタン対応 」を参照下さい。

1.以下のソースをフリープラグインに追加する。

↓↓↓↓ 以下コピー開始↓↓↓↓
<script type="text/javascript">
<!--
/*******************************************************************
* 機能名:Google Plusone設置Script(テンプレート型ホームページ用)
* 引数 :Div内の文字列をURLとして扱う。
* 戻り値:なし
*
* 製作者:HyperLand Plus
* http://www.hplus.jp/
*
* 著作権:引用元を明示的に表記する場合にのみ著作権法に
* おける引用を許可します。
* 本コメント製作者情報は削除しない事を条件に
* 修正・二次配布を許可します。
*
* 最後に:本スクリプトでは、Divを置き換えていますが、Body要素に
* appendChildを付けてもよいかもしれません。
* カスタマイズ要素はかなり大きいです。
*
*******************************************************************/
window.onload = function(){

for (i = 1; i < 31; i++){

try {
var idStr = "idName" + i;
/* DIVタグ要素のオブジェクト */
var divNode = document.getElementById(idStr);
/* G:PLUSONE要素を生成 */
var newNode = document.createElement('g:plusone');
/* 属性付与URL href */
if (divNode.innerHTML!=""){
newNode.setAttribute("href",divNode.innerHTML);
}

/* 属性付与サイズ [small | medium | tall]*/
newNode.setAttribute("size","small");

/* 要素置き換え */
divNode.parentNode.replaceChild(newNode, divNode);
} catch(ex) {
null;
}
}

/* 外部JavaScript呼出し */
funcGP();

}

function funcGP(){
var el = document.createElement("script");
el.setAttribute("src","https://apis.google.com/js/plusone.js");

el.type = "text/javascript";
el.text="{lang: 'ja'}";
document.getElementsByTagName("head").item(0).appendChild(el);
}

//-->
</script>
↑↑↑↑ 以下コピー開始↑↑↑↑

-- 終了 --

2.Googleプラスワン配置
単一設置に比べて若干難しいですが、例えば1ページに5つブログを設置する場合ブログ毎に以下の様にDiv要素のidを変えて下さい。
※同一ページに同じidが存在すると2つ目以降のGoogle +1(プラスワン)ボタンは表示されません。

■以下1時間毎にブログを投稿した例
7/12 11:00のブログは「<div id="idName2"></div>」
7/12 11:00のブログは「<div id="idName1"></div>」←また1に戻る
7/12 10:00のブログは「<div id="idName5"></div>」←idName5
7/12 09:00のブログは「<div id="idName4"></div>」←idName4
7/12 08:00のブログは「<div id="idName3"></div>」←idName3
7/12 07:00のブログは「<div id="idName2"></div>」←idName2
7/12 06:00のブログは「<div id="idName1"></div>」←idName1

難しく考えないで下さい、idName1~5を順に指定するだけです要は1つのページに同じidが無いようにするためです。
※「HTMLタグを表示」で登録してください。

GoogleプラスワンのURL指定にも対応させていますので、URLを指定する場合は以下のように書いてください。
<div id="idName3">http://ameblo.jp/hyperlandplus/entry-10951394080.html</div>
<div id="idName2">http://ameblo.jp/hyperlandplus/entry-10951329619.html</div>
<div id="idName1">http://ameblo.jp/hyperlandplus/entry-10946149997.html</div>

idはidName1~30まで指定可能です、必要に応じて「for (i = 1; i < 31; i++){」の「31」を変更してください。

3.最後に
カスタマイズはスクリプト内の著作権をお守りいただければご自由に変更していただいて構いません。
その場合、できればで結構ですのでコメントください。

ソース一生懸命インデント付けたのに・・・

http://ameblo.jp/hyperlandplus/entry-10951329619.html

この記事は、アメーバブログにGoogle +1(プラスワン)ボタンを設置するための方法で、2011/07/12作成の完全オリジナルスクリプトです。
なお、本記事手法は1ページに1つGoogle +1(プラスワン)ボタンを設置する場合の方法です。
1ページに複数のGoogle +1(プラスワン)ボタンを設置する場合は「アメーバブログでGoogleプラスワンボタンを設定」する方法 複数記事対応編 」を参照下さい。

1.以下のソースをフリープラグインに追加する。

↓↓↓↓ 以下コピー開始↓↓↓↓
<script type="text/javascript">
<!--
/*******************************************************************
* 機能名:Google Plusone設置Script(テンプレート型ホームページ用)
* 引数 :Div内の文字列をURLとして扱う。
* 戻り値:なし
*
* 製作者:HyperLand Plus
* http://www.hplus.jp/
*
* 著作権:引用元を明示的に表記する場合にのみ著作権法に
* おける引用を許可します。
* 本コメント製作者情報は削除しない事を条件に
* 修正・二次配布を許可します。
*
* 最後に:本スクリプトでは、Divを置き換えていますが、Body要素に
* appendChildを付けてもよいかもしれません。
* カスタマイズ要素はかなり大きいです。
*
*******************************************************************/
window.onload = function(){

/* DIVタグ要素のオブジェクト */
var divNode = document.getElementById('idName');

/* G:PLUSONE要素を生成 */
var newNode = document.createElement('g:plusone');

/* 属性付与URL href */
if (divNode.innerHTML!=""){
newNode.setAttribute("href",divNode.innerHTML);
}

/* 属性付与サイズ [small | medium | tall]*/
newNode.setAttribute("size","small");

/* 要素置き換え */
divNode.parentNode.replaceChild(newNode, divNode);

/* 外部JavaScript呼出し */
funcGP();

}

function funcGP(){
var el = document.createElement("script");
el.setAttribute("src","https://apis.google.com/js/plusone.js");

el.type = "text/javascript";
el.text="{lang: 'ja'}";
document.getElementsByTagName("head").item(0).appendChild(el);
}

//-->
</script>
↑↑↑↑ 以下コピー開始↑↑↑↑

-- 終了 --

2.Googleプラスワン配置
Googleプラスワンボタンを表示したい場所に以下のタグを書く
※「HTMLタグを表示」で登録してください。

<div id="idName"></div>

GoogleプラスワンのURL指定にも対応させていますので、URLを指定する場合は以下のように書いてください。

<div id="idName">http://ameblo.jp/hyperlandplus/entry-10946149997.html</div>

3.最後に
カスタマイズはスクリプト内の著作権をお守りいただければご自由に変更していただいて構いません。
その場合、できればで結構ですのでコメントください。

上記方法を使えばURLをJavaScriptに渡しているので他のソーシャルブックマークにも対応可能です。
ま、簡単なので公開する程のネタではないですが。

久しぶりにJavaScriptを書きましたが、意外と書けるものですね。