【コピペOK】Ameba(アメーバ)ブログでブログの広告を消しつつRSSを一覧表示する

【コピペOK】Ameba(アメーバ)ブログでブログの広告を消しつつRSSを一覧表示する

根強い人気のあるブログサイト「Ameba(アメーバ)」
1万人以上の芸能人・有名人ブログを読めるのはAmeba(アメーバ)だけ。
ブログやゲームなど、コミュニティを作るための様々な仕組みもあって便利なサイトです。

自分のWEBサイトは独自ドメインで持って、普段使いで更新や報告などはAmeba(アメーバ)でやる人も多いかと思います。

Ameba(アメーバ)で慣れている人は、その方が簡単ですよね。

そうすると「普段更新はAmeba(アメーバ)」だけど「自分のサイトにもAmeba(アメーバ)の更新情報を載せたい」となる訳ですw

普通にRSSで更新情報を引っ張ってくると、Ameba(アメーバ)の広告も表示されてしまいます(汗
そんな時、広告を消してRSSを表示することができます!

【コピペOK】Ameba(アメーバ)ブログでブログの広告を消しつつRSSを一覧表示する

feed.js

名前は自由に変えていただければと思います。ポイントは以下です。
5行目:表示させたいサイト側に何行までお知らせを表示するか決めます。
コツは表示させたい行+1をいれます。
21行目:表示いさせたい内容を決めます。htmlで書いてありますのでわかりやすいと思います。以下の例で書いてあるjsは、リンク先のページの「タイトル、内容、日付」が表示する内容になってます。
「entry.contentSnippet.substr(0,17)」の部分がポイント。引っ張ってくるRSSで表示する文字数を指定します。
「 entry.title.substr(0,26)」とすると、タイトル部分の文字数を制御できます。指定数より文字多い場合は「…」となって切れます。

google.load("feeds", "1");
function initialize() {
    var feed = new google.feeds.Feed("http://rssblog.ameba.jp/アメブロid/rss.html"); //←feedのURL
  // ↓削除するPR記事が一つ含まれるので1つ増やした数にする
    feed.setNumEntries(11);//10件表示
    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 pdate = new Date(entry.publishedDate);
                var strdate = (pdate.getMonth() + 1) + '月' + pdate.getDate() + '日&nbsp;' + pdate.getHours() + ':' + pdate.getMinutes() + ':' + pdate.getSeconds();
         
         // ここでPR記事全部表示させないif文
                if (entry.title.match(/.*PR:.*/mi) == null) {
                    var element = document.createElement('div');
                    element.setAttribute("class", "feed_content");
            
           // 以下でタイトルのリンク、タイトル名、記事本文、日付を表示
                    element.innerHTML += '<p><a class="feed_text" href="' + entry.link + '" target="_blank">' + entry.title + '</a></p><p>' + entry.contentSnippet.substr(0,17) + '...</p><p>' + strdate + '</p>';
                }
                container.appendChild(element);
            }
        }
    });
}
google.setOnLoadCallback(initialize);

BODYタグの前にscriptタグでjsを読み込みます

PHPで読み込みタグが書いてありますが、Wordpress(ワードプレス)で無く、普通のhtmlのサイトの場合はjsを置く場所を書いてください。

// googlefeed jsapi
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
// feed.jsを読み込む
<script type="text/javascript" src="<?php bloginfo('template_url'); ?>/js/feed.js"></script>

htmlに記載

表示させたい場所に以下のhtmlを書きます。

<div id="feed"></div>

今回のポイントと
紹介アイテム

Ameba(アメーバ)のRSSで広告を消すサービスを提供しているサイトあったみたいですが、サービスが終了して頼っていた人は慌てたらしいです。
ブログ運営で突然アカウントが止められたという事と要は同じですね。
なるべく外部サービスに頼らない方法でリスク回避を心掛けましょう!

あわせて読むと効果的な記事
【コピペOK】Wordpress(ワードプレス)投稿画像からランダムで指定数だけ画像表示する
【コピペOK】Wordpress(ワードプレス)投稿画像からランダムで指定数だけ画像表示する
投稿された記事でアップした画像を、右カラムにランダムで指定数だけ表示したい
2016-07-10 10:03
紹介アイテム 参考&Special Thanks

下記の記事を参考にさせていただいたり、コードをそのまま、あるいは改造して使用させていただきました。

amebaブログの広告を消しつつRSSを一覧表示(参考)

【コピペOK】Ameba(アメーバ)ブログでブログの広告を消しつつRSSを一覧表示する

ABOUTこの記事をかいた人

1998年からWEB関連の仕事に従事。角川グループのWEB会社に入社し、ディレクター、デザイナーとして経験を積む。2004年よりフリーランスとして活動し、2008年に法人を設立。サイトの制作だけでなく運用保守や紙媒体も行う。専門学校の非常勤講師も経験。