最近は各種ブログやサイト上でSNS関連のボタンを設置しているところが増えていますね。
アメブロでも標準で、なうで紹介、mixiチェック、ツイートボタンが設置されています。
ただ機能的に少し味気ないのと、後述するSEO対策の観点から設定を外しております。
設定→アメブロの基本設定→共有ボタンの設定で「表示しない」を選択
もともと「アメーバなう」のサービスが開始されたついでにチラシの裏的に
ブログを始めたのがキッカケでしたが、せっかくWeb上に配信する以上
誰かの役に立ったという声が聞こえたら、正直嬉しいというのが本音です。
基本的なSEO対策
Googleなどの検索エンジンは、クローラロボットにより定期的にインデックス登録しており事前にサイト登録をしておくことで、検索対象として表示されやすくなります。
http://www.google.co.jp/addurl/
■Googleブログ検索
http://blogsearch.google.co.jp/ping?hl=ja
■bing
http://www.bing.com/webmaster/SubmitSitePage.aspx
SNSボタンの設置方法
ソーシャルメディアのボタンは色々とありますが、自分が利用しているサービスから選択しました。「はてなブックマーク」「Twitter: ツイート、フォロー」「tumblr」「アメーバなう」
「mixiチェック」「Google + 1」「Facebook: いいね！」のボタンを設置する方法です。
タイトル下にSNSボタンの設置
はてなブックマーク、Twitterツイート、tumblr、アメーバなう、mixiチェック、Google+1、Facebookいいね！の順番です。以下のコードをフリープラグインに追加します。
<script type="text/javascript">
(function () {
var Twitter_ID = 'TwitterID', BLOG_TITLE = '|BlogTittle';
if (!(/Trident|Firefox/i.test(navigator.userAgent))) {
navigator.userAgent = 'Mozilla/5.0 (Windows NT 6.1; WOW64) AppleWebKit/534.30 (KHTML, like Gecko) Chrome/12.0.742.91 Safari/534.30';
}
function generate_button_text(url, // @param String:
title) { // @param String:
// @return String:
var hatena_btn, twitter_btn, tumblr_btn, ameba_btn, mixi_btn, gplus_btn, facebook_btn;
hatena_btn = '<a href="' + 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" style="border: none;" /></a>';
twitter_btn = '<a href="http://twitter.com/share" class="twitter-share-button" data-count="horizontal" data-via="' + Twitter_ID + '" data-text="' +
title + BLOG_TITLE + '" data-url="' + url + '">Tweet</a>';
if (/Firefox/i.test(navigator.userAgent)) {
tumblr_btn = '<a href="http://www.tumblr.com/share?v=3&u=' + encodeURIComponent(url) + '&t=' + encodeURIComponent(title + BLOG_TITLE) + '" ' +
'title="Share on Tumblr" ' +
'style="display:inline-block; overflow:hidden; width:61px; height:20px; ' +
'background:url(\'http://platform.tumblr.com/v1/share_2.png\') top left no-repeat transparent;" ' +
'data-text="' + title + BLOG_TITLE + '" data-url="' + url + '"></a>';
} else {
tumblr_btn = '<a href="http://www.tumblr.com/share" title="Share on Tumblr" ' +
'style="display:inline-block; overflow:hidden; width:61px; height:20px; ' +
'background:url(\'http://platform.tumblr.com/v1/share_2.png\') top left no-repeat transparent;" ' +
'data-text="' + title + BLOG_TITLE + '" data-url="' + url + '"></a>';
}
ameba_btn = '<a rel="nofollow" target="_blank" href="http://stat100.ameba.jp/blog/proxy.html?longurl=' + url + '&title=' + title + '&type=now">' +
'<img src="http://stat100.ameba.jp/common_style/img/common/btn/btn_share_now.gif" alt="なうで紹介"></a>';
mixi_btn = '<a rel="nofollow" target="_blank" href="http://stat100.ameba.jp/blog/proxy.html?longurl=' + url + '&type=mixi">' +
'<img src="http://stat100.ameba.jp/common_style/img/common/btn/btn_share_mixi.png" alt="mixiチェック"></a>';
gplus_btn = '<div class="g-plusone" size="medium" data-size="medium" data-count="true" href=' + url + '></div>';
facebook_btn = '<iframe src="http://www.facebook.com/plugins/like.php?href='+ encodeURIComponent(url) +
'&layout=button_count&show_faces=false&width=100&action=like&colorscheme=light&height=21" scrolling="no" ' +
'frameborder="0" style="border:none; overflow:hidden; width:100px; height:21px;" allowTransparency="true"></iframe> ';
return [hatena_btn, twitter_btn, tumblr_btn, ameba_btn, mixi_btn, gplus_btn, facebook_btn].join(' ');
}
$(document).ready(function(){
var infos = [],
target_node;
$.getScript('http://b.st-hatena.com/js/bookmark_button.js');
$.getScript('http://platform.twitter.com/widgets.js');
$.getScript('http://platform.tumblr.com/v1/share.js');
$.getScript("http://apis.google.com/js/plusone.js",function(){{lang: 'ja'}});
if (location.href.match(/^.+\/entrylist[\-0-9]*\.html$/g )) {
$('.newentrytitle a')
.each(function (idx, // @param Number:
node) { // @param Node: each Element;
infos[idx] = [node.toString(), node.text()];
});
target_node = $('.updatetime');
} else {
$('.foot a:contains("記事URL")')
.each(function (idx, // @param Number:
node) { // @param Node: each Element;
infos[idx] = [node.toString(), $("div.entry h3.title").eq(idx).text()];
});
target_node = $('div.entry .theme');
}
$.each(infos, function (idx, // Number:
elm) { // Array:
target_node.
eq(idx).
append(' ' + generate_button_text(elm[0], elm[1]));
});
});
}());
</script>
実際に設置するときは、「var Twitter_ID = 'TwitterID', BLOG_TITLE = '|BlogTittle';」の
「TwitterIDを自分のTwitterID」へ「BlogTittleを自分のブログタイトル」に変更してください。
また、全部登録すると1行で収まらない可能性があるため、適宜修正してみてください。
記事下にSNSボタンの設置
同様の手順でフリープラグインにコードを入力します。はてなブックマーク、Twitterツイート、tumblr、アメーバなう、mixiチェック、Google+1、Facebookいいね！、Twitterフォローの順番です。
<script type="text/javascript">
(function () {
var Twitter_ID = 'TwitterID', BLOG_TITLE = '|BlogTittle';
if (!(/Trident|Firefox/i.test(navigator.userAgent))) {
navigator.userAgent = 'Mozilla/5.0 (Windows NT 6.1; WOW64) AppleWebKit/534.30 (KHTML, like Gecko) Chrome/12.0.742.91 Safari/534.30';
}
function generate_button_text(url, // @param String:
title) { // @param String:
// @return String:
var hatena_btn, twitter_btn, tumblr_btn, ameba_btn, mixi_btn, gplus_btn, facebook_btn, twitter_follow_btn;
hatena_btn = '<a href="' + 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" style="border: none;" /></a>';
twitter_btn = '<a href="http://twitter.com/share" class="twitter-share-button" data-count="horizontal" data-via="' + Twitter_ID + '" data-text="' +
title + BLOG_TITLE + '" data-url="' + url + '">Tweet</a>';
if (/Firefox/i.test(navigator.userAgent)) {
tumblr_btn = '<a href="http://www.tumblr.com/share?v=3&u=' + encodeURIComponent(url) + '&t=' + encodeURIComponent(title + BLOG_TITLE) + '" ' +
'title="Share on Tumblr" ' +
'style="display:inline-block; overflow:hidden; width:61px; height:20px; ' +
'background:url(\'http://platform.tumblr.com/v1/share_2.png\') top left no-repeat transparent;" ' +
'data-text="' + title + BLOG_TITLE + '" data-url="' + url + '"></a>';
} else {
tumblr_btn = '<a href="http://www.tumblr.com/share" title="Share on Tumblr" ' +
'style="display:inline-block; overflow:hidden; width:61px; height:20px; ' +
'background:url(\'http://platform.tumblr.com/v1/share_2.png\') top left no-repeat transparent;" ' +
'data-text="' + title + BLOG_TITLE + '" data-url="' + url + '"></a>';
}
ameba_btn = '<a rel="nofollow" target="_blank" href="http://stat100.ameba.jp/blog/proxy.html?longurl=' + url + '&title=' + title + '&type=now">' +
'<img src="http://stat100.ameba.jp/common_style/img/common/btn/btn_share_now.gif" alt="なうで紹介"></a>';
mixi_btn = '<a rel="nofollow" target="_blank" href="http://stat100.ameba.jp/blog/proxy.html?longurl=' + url + '&type=mixi">' +
'<img src="http://stat100.ameba.jp/common_style/img/common/btn/btn_share_mixi.png" alt="mixiチェック"></a>';
gplus_btn = '<div class="g-plusone" size="medium" data-size="medium" data-count="true" href=' + url + '></div>';
facebook_btn = '<iframe src="http://www.facebook.com/plugins/like.php?href='+ encodeURIComponent(url) +
'&layout=button_count&show_faces=false&width=100&action=like&colorscheme=light&height=21" scrolling="no" ' +
'frameborder="0" style="border:none; overflow:hidden; width:100px; height:21px;" allowTransparency="true"></iframe> ';
twitter_follow_btn = '<a href="http://twitter.com/' + Twitter_ID + '" class="twitter-follow-button" data-show-count="false" data-width="140px" data-lang="ja">Follow @' + Twitter_ID + '</a>';
return [hatena_btn, twitter_btn, tumblr_btn, ameba_btn, mixi_btn, gplus_btn, facebook_btn, twitter_follow_btn].join(' ');
}
$(document).ready(function(){
var infos = [],
target_node;
$.getScript('http://b.st-hatena.com/js/bookmark_button.js');
$.getScript('http://platform.twitter.com/widgets.js');
$.getScript('http://platform.tumblr.com/v1/share.js');
$.getScript("http://apis.google.com/js/plusone.js",function(){{lang: 'ja'}});
if (location.href.match(/^.+\/entrylist[\-0-9]*\.html$/g )) {
$('.newentrytitle a')
.each(function (idx, // @param Number:
node) { // @param Node: each Element;
infos[idx] = [node.toString(), node.text()];
});
target_node = $('.updatetime');
} else {
$('.foot a:contains("記事URL")')
.each(function (idx, // @param Number:
node) { // @param Node: each Element;
infos[idx] = [node.toString(), $("div.entry h3.title").eq(idx).text()];
});
target_node = $('div.foot');
}
$.each(infos, function (idx, // Number:
elm) { // Array:
target_node.
eq(idx).
before(generate_button_text(elm[0], elm[1]));
});
});
}());
</script>
Google+1ボタンがDivタグでブロック要素となっており
IE8以降、Firefox、Chromeではきちんと表示されますが
IE7で開いた場合に改行されてしまうためCSSで以下の要素を追記します。
#___plusone_0,#___plusone_1,#___plusone_2,#___plusone_3,#___plusone_4,#___plusone_5,#___plusone_6,#___plusone_7,#___plusone_8,#___plusone_9{
*display: inline !important;
}ただ、IE7でブログを開くと他の部分での表示崩れが起きるため
出来ればFirefoxで見ていただくとありがたいところです(^^ゞ
また、Twitterのフォローボタンがはみ出して表示される場合、
「data-width」プロパティで収まるように幅を調整することができます。
（アカウント名が長いと難しいです）
参考：Twitterの新しい「フォローボタン」を詳しく見てみよう | マイコミジャーナル
以上で設置完了ですがAmebloのフリープラグインに貼り付けられる文字数は半角3800文字
という制限があるため、あまりたくさんのプラグインを設置できません。
そこで、Google codeを利用して外部からJavaScriptを読み込む方法を利用します。
Google codeで外部jsファイルを読み込む
Gmail等のGoogleアカウントがあれば無料で簡単に利用できます。1．プロジェクトを開設する
Link:Google Project Hosting
リンク先の「Create a new project」をクリック
Project name（プロジェクト名）、Project summary（概要）、Description（説明）
プロジェクト名は英語で入力、その他は日本語でOK
Version control system（バージョン管理）：subversion
Source code license（ライセンス）：GNU GPL v2
Project label(s)：例「JavaScript」「Ameblo」「Blog」などのキーワードを入力
以上6つの情報を入力し「Create project」をクリック
これで、Google codeのプロジェクトが開設されます。
2．jsファイルを作る
メモ帳などのテキストエディタで新規ファイルを作成します。
使用したいJavaScriptの<script></script>タグを消してコードを入力します。
ファイル名の拡張子を「.js」文字コードを「UTF-8」にして保存します。
これでjsファイルは完成です。
3．ファイルをアップロードする
Downloadsメニューの[New download]からアップロードします。
Summary、Descriptionを入力→Fileの参照から「.js」を選択
「Submit file」でアップロードできます。
4．アップされたファイルのURLをコピーする
ファイルをアップしたら、Downloadsメニューに一覧が表示されるのでファイル名をクリック
右クリックでファイルのURLをコピーします。
5．フリープラグインに登録する
<script type="text/javascript" src="コピーした.jsファイルのURL"></script>
またメニューの[Souce]→[Browse]から直接ソースコードを入力して
作成したFileからURLを指定することでJavascriptを利用することができます。
一つのファイルにまとめて無限に設置する
$(function(){
$.getScript("jsファイルのURL");
$.getScript("jsファイルのURL");
});こんな感じで記述してあげればフリープラグイン一行で済みます。
ただ、どれがどのスクリプトか管理しづらいため
ひとつひとつ分けて上げた方が分かりやすいかと思います。