はじめてでもこわくない！株式会社のつくりかた -2ページ目

<< 前のページへ最新 | 1 | 2 | 3 | 4 | 5 | 最初次のページへ >>

アメブロにGoogle +1ボタンやfacebook「いいね！」ボタンなどをまとめて設置する方法

おとといTwitterが「フォロー」ボタンを提供開始し、昨日はGoogleが「+1（プラスワン）」をWebサイトに設置するためのコードを公開しました。

早速このブログにも入れてみたところ、Googleが公式サイトで「このコードを貼り付けてください」としている+1のコードでは、Firefoxでは動くのですがIE8ではうまく動きませんでした（アメブロとの相性かな？）

スクリプトでDOMを使用した構文をHTMLに替え、<div>のclassにg-plusoneを設定したらIE8でもうまく動いたのですが、これはHTMLに詳しくないかたには敷居が高いんじゃないのかなぁ？・・・と思いましたので、簡単な設置方法をご紹介します

以前、このブログで「アメブロにfacebookの「いいね！」ボタンやソーシャルブックマークボタンを設置する方法」という記事を書きましたが、基本的にはこれをちょこちょこっといじっただけです。

まず、今回ブログに付けるボタンは
　　　Twitterの『フォロー』ボタン
　　　『Google +1』ボタン
　　　『はてなブックマークに追加する』ボタン
　　　『Yahoo!ブックマークに追加する』ボタン
　　　『Googleブックマークに追加する』ボタン
　　　『Livedoor Clipに追加する』ボタン
　　　『Evernoteにクリップする』ボタン
そして、facebookの「いいね！」ボタンです。

（今回は「いいね！」の横に「送信」ボタンも付けます。）

そして、これらを付ける場所は、『なうで紹介』ボタンの直前です。

下記のソースを記述したJavaScriptファイルを外部に置いて、それを読み込むようにします。
（ソースが長いので、Amebaのフリープラグインの中には書ききれません。文字数制限に引っかかってしまいます。）

$(document).ready(function(){
var entries = $(".foot a:contains('記事URL')");
var cName = "div.entry #exLinkBtn";
for (var i = 0; i < entries.length; i++) {
var url = entries[i];
var title = $("div.entry h3.title").eq(i).text();
var blog = 'ブログ名';

title += ' | ' + blog;

var google = '<div class="g-plusone" data-size="medium" data-count="true" data-href="' + url + '"></div>';

var hatena = '<a href="http://b.hatena.ne.jp/entry/' + url + '" class="hatena-bookmark-button" data-hatena-bookmark-title="' + title + '" data-hatena-bookmark-layout="standard" title="このエントリーをはてなブックマークに追加"><img src="http://b.st-hatena.com/images/entry-button/button-only.gif" alt="このエントリーをはてなブックマークに追加" width="20" height="20" /></a>';

var htmlData = google + hatena;

var nObj = new Array();
nObj[0]={
href:'http://bookmarks.yahoo.co.jp/bookmarklet/showpopup?t=' + title + '&u=' + url + '&opener=bm&ei=UTF-8',
alt:'このエントリーをYahoo!ブックマークに追加',
src:"Yahoo!ブックマーク画像のパス"
};

nObj[1]={
href:'http://www.google.com/bookmarks/mark?op=add&bkmk=' + url + '&title=' + title,
alt:'このエントリーをGoogleブックマークに追加',
src:"Googleブックマーク画像のパス"
};

nObj[2]={
href:'http://clip.livedoor.com/clip/add?link=' + url + '&title=' + title + '&jump=ref',
alt:'このエントリーをLivedoor Clipに追加',
src:"Livedoor Clip画像のパス"
};

for (var n=0; n < nObj.length; n++){
htmlData += '<a href="' + nObj[n].href + '" target="_blank"><img src="' + nObj[n].src + '" alt="' + nObj[n].alt + '" title="' + nObj[n].alt + '" /></a>';
}

var evernote = '<a href="#" onclick="Evernote.doClip({contentId:\'sub_main\',providerName:\'' + url + '\'}); return false;"><img src="http://static.evernote.com/article-clipper-jp.png" alt="Clip to Evernote" title="evernoteにクリップする" /></a>';

var follow = '<a href="http://twitter.com/Twitterアカウント" class="twitter-follow-button" data-show-count="false" data-lang="ja">フォロー @Twitterアカウント</a>';

var facebook = '<div id="fb-root"></div><fb:like href="' + url + '" send="true" width="400" show_faces="false" font=""></fb:like>';

htmlData += evernote + follow + facebook;

$(cName).eq(i).before(htmlData);
}
})