ホームページにブログの記事を新着表示させる方法　【webの森-365】

Home 　＞　ホームページにブログの記事を新着表示させる方法

ホームページにブログの記事を新着表示させる方法

｜ご利用規約｜（１）スクリプトのダウンロード｜（２）サンプルPHPとcssファイルセットのダウンロード｜（３）SSI、PHPファイルと、スタイルシートの調整について｜（４）PHPに直接入れる方法｜

ホームページに、ブログの記事を自動で新着表示させることができれば、読者のためにもサービスになり、簡単に新鮮なサイトを維持することができます。　見本はこちらです

ブログの利点はいろいろありますが、その中でも特徴的なのが「RSS」といって、ネットの世界に共通の形式で出力される信号のようなものを配信できることです。このRSSを自動で取得できるスクリプトをサイトに埋め込むと、あなたが書いたブログの新着日記が自動でホームページに表示されます。多少のタイムラグがありますが、手動でＨＴＭＬに新着表示を出している手間からすると雲泥の差。
新着日記を表示させて、訪問者に楽しんで貰ってもいいですし、サイトからのお知らせのような、更新案内に使ってもイイデスね。
このページで見本のソースを置いておきますので、使ってみて下さい。

条件としては、PHPとSSIが使えるサーバーであること。私の使っている方法は、SSIでphpファイルを読み込んでいますが、SSIが使えなくても直接PHPに書いてしまっても大丈夫です。

＜このページの見本セットのご利用規約＞

スクリプトと見本ファイルを使用して損害が生じても、「webの森」管理人は一切の責任を負いかねます。自己責任でご利用ください。
スクリプトの再配布・販売はしないでください。
利用者個人の責任において改造は自由に行えます。
このスクリプトを使って、他人に堂々と言えないようなサイト制作をしないでください。（例えば関係ないブログの記事を読み込んで意味のないHTMLを量産するなど）ホームページを作るのには小手先のテクニックだけの"ずる"をしてはいけません。
「世間様に有意義と思われるコンテンツを作りましょう。でないとペナルティがありますよ・・・」とGoogleWebマスターヘルプでも書かれています。ブログの記事を読み込みたい場合は、引用元を正々堂々と表記しましょう。
参考になった方は、 webの森へのリンクまたは、ブログの記事でこのページを紹介いただけると嬉しいです。リンクしていただいたらブログへのコメントでお知らせください。
感想などはブログ「モモンガの森」へ。設置代行依頼はこちらのメールフォームにて。

▲PageTop

magpierss-0.61.tar.gz

（１）スクリプトのダウンロード

MagpieRSS: RSS for PHP 　へ行って、magpierss-0.61.tar.gz　をダウンロードしてきます
解凍したフォルダの中から、下記のファイルを、新着表示させたいHTMLと同じ階層にFTPでアップロードします。

rss_cache.inc
rss_fetch.inc
rss_parse.inc
rss_utils.inc
　extlib をフォルダと中のファイル全部
同じ階層に　cache　というフォルダを作ります。
http://www.spencernetwork.org/ 　へ行って、漢字コード変換からjcode_1.34.zipをダウンロード、
解凍したフォルダの中の下記のjcode.phpsをjcode.phpに名前変更して同じ階層にアップロード
同フォルダ内のcode_table.ucs2jisも同じ階層にアップロード

▲PageTop

（２）サンプルPHPとcssファイルセットのダウンロード

私がよく使っているphpとcssのファイルをサンプルセットにしてあります。これを元にして書き替えれば簡単に設置できると思います。

RSStest.zip 　をダウンロードしてください。解凍するとフォルダの中に以下のファイルがあります

blogn.php	ブログンプラス用	対象ブログにあったPHPファイルを使って下さい
blogspot.php	Bloger（グーグルブログ）用
fc2.php	FC2ブログ用
mt.php	MovableType用
wp.php	WordPress用
seesaa.php	seesaaブログ用
test.shtml	必要な部分だけをindex.shtmlに組み入れてください
news.css	新着表示部分のスタイルシート

新着表示をさせたいページを、index.htmlとします。ファイルの拡張子を.shtmlに別名保存します（※1）。その中の新着表示を出したい部分に、test.shtmlの中のソース　から　までをコピーペーストします。
（見本ブログの中から、やりやすいものを使って下さい。文字コードはshift-jisで作ってあるので、文字コードを選択＆変換できるエディタで開いて作業してください　Macの場合はmi　WindowsではK2エディタなど）
（※1）SSIコマンドを含んだ HTMLファイルの識別子は「.shtml」となります。サーバーが対応していないと使えません。
読み込みたいブログのphpファイルをテキストエディタで開き、ブログのRSSのアドレスを書き替えます。

（例）WordPressの場合
wp.phpを開いて、$urlの行の'から'の間に、RSSのアドレスを入れます
$url = 'http://○○○.com/feed/';

該当ブログがない場合は、どれを使ってもかまいません。ブログのRSSのアドレスがあっていれば、読み込みできるはずです。
ブログのRSSのアドレスがわからない場合は、ブラウザから、表示メニュー　＞ソース
で、ソースを表示すると、<head>の中に下記のような一行が見つかるので、それをコピーして入れてみて下さい。RSS1.0が良いか、2.0が良いかatomが良いかはテストしてみてください。

（例）
<link rel="alternate" type="application/rss+xml" title="ツキノワグマ事件簿 (RSS 2.0)" href="http://tukinowaguma.net/feed/" />
PHPファイルと、index.shtmlの中のSSIで読み込みさせているファイルの名前を同じにします。

（例）

のとき、アップロードするphpファイルも同じ名前に
★.php
読み込みたいブログのphpファイル、スタイルシート、test.shtmlを組み込んだ、index.shtmlを同じ階層にアップロードします

上記を全部実行すると構造は下記のようになります。

public_html / index.shtml （トップページ　test.shtmlが入る）
　　　　　│　　 *.php　（該当ブログのphpファイル）
　　　　　│　　jcode.php
　　　　　│　　code_table.ucs2jis
　　　　　│　　rss_cache.inc
　　　　　│　　rss_fetch.inc
　　　　　│　　rss_parse.inc
　　　　　│　　rss_utils.inc
　　　　　│　　news.css
　　　　　│
　　　　　├ extlib / Snoopy.class.inc
　　　　　│
　　　　　└ cache （このディレクトリは自分で作る）

http://ドメイン/index.shtml　で、表示させてRSSが取得できていれば成功です。
サーバーの設定によりますが、サーバー上から元のindex.htmlを消して、http://ドメイン/でアクセスするとindex.shtmlの方が表示されます。（表示されない場合は、.htaccessで設定するかサーバー管理者に依頼してください。
※SSIはサーバーに不可がかかるので表示が遅くなることがあります。
文字化けする場合、下記を参考にしてください。

▲PageTop

（３）SSI、PHPファイルと、スタイルシートの調整について

*.phpファイルの中の文字変換について
表示させたいブログの文字コードを調べます。文字のコンバートは以下のようになっているので、

1　が　EUC-JP
2　が　Shift_JIS
3　が　ISO-2022-JP(JIS)
4　が　UTF-8

例えば、ブログがWordPressのブログ（UTF-8）で、自分のサイトがShift_JISの場合、
JcodeConvertの指定は、4, 2　とります。
（例）$title = JcodeConvert($title, 4, 2);
文字化けする場合は、ここの数字を変えてみてください。

スタイルシートでは、幅と高さを固定して、スクロールで、全部の新着記事を表示できるようにしてあります。お好みの形に書き替えてください。

#blognews {	これが新着部分のスタイル
height: 200px;	高さ200px
width: 600px;	幅600px
overflow: auto;	スクロールは自動
text-align: left;	文字を左揃えにしています
border: 1px solid #CCCCCC;	新着部分を1pxのグレーの実線で囲み
margin: 0px auto 40px;	boxを真ん中に　下にマージン40px
}

ブログによって、RSSの発行の形が違うので、日付が反映されないもの、本文を全部取り出せるもの、写真まで含めて取り出せるもの、本文の冒頭部分のみ取り出せるもの・・・様々です。
PHPやSSIが使えるサーバーでも、私が実験したところ、うまく動かないサーバーもありました。SSIを読み込むとサーバーに負担がかかるので動作が遅くなることもあります。いつまでも読み込み中・・になってタイムアウトしてしまうようです。私がいくつか実験した中では、さくらレンタルサーバーが一番さくさく動きました。さくらの共有プランスタンダード以上（月500円）おすすめです。
自分が管理しているブログを一覧新着させてみました。こんな感じになります。　新着件数が何件表示されるのかは、ブログの方のRSS発行の仕様によります。そちらを変更するのが困難な場合、たとえば新着５件のみ表示させたければ、スタイルシートの方で、新着枠を固定して、はみ出した部分は非表示にする・・とういう対処療法が簡単です・・（というかそれ以上高度なことできないので（汗））。
その他のカスタマイズは、このページの末尾にあるnJOYさんの改訂版も参考になると思います。

▲PageTop

（４）PHPに直接入れる方法

元ファイルindex.htmlをindex.phpに別名保存します。
一行目に、文字コード宣言を入れます

<?php echo '<?xml version="1.0" encoding="Shift_JIS"?>'; ?>

Shift_JISの部分は、HTMLに合わせて変更してください

新着表示したい部分に、下記のソースを入れます

<div id="blognews">
<div class="title">ブログ　
<a href="http://tukinowaguma.net/" target="_blank">新着情報</a>
　（wordPressの新着テスト）ツキノワグマ事件簿</div>
<div class="space">

<?php
require_once 'rss_fetch.inc';
require_once 'code_table.ucs2jis';
require_once 'jcode.php';
$url = 'http://tukinowaguma.net/feed/';
$rss = fetch_rss($url);
$title = $rss->channel['title'];
//JcodeConvert($str, $from, $to)
//0:PASS�i��ϊ��j1:EUC-JP 2:Shift_JIS 3:ISO-2022-JP(JIS) 4:UTF-8
$title = JcodeConvert($title, 4, 2);
foreach ($rss->items as $item ) {
$title = $item[title];
$title = JcodeConvert($title, 4, 2);
$url = $item[link];
$itemday = date('Y/n/j',strtotime(substr($item['dc']['date'],0,10)));
$itemday = JcodeConvert($itemday, 4, 2);
echo "<p class=\"midasi\"><a href=\"$url\" target=\"_blank\">$title</a>\n";
echo "<span class=\"date\">${itemday}</span></p>\n";

}

</div>
</div>

（１）から（３）を参考に必要箇所を書き替えてください。
スタイルシートnews.cssを追加してください
http://ドメイン/index.phpで、正しく表示されていれば成功です。あとは（２）の8番のように、スラッシュ以下が省略された場合、表示される優先順位をindex.phpの方に変えれば完了です。

＜下記のサイトを参考にさせていただきました。ありがとうございます＞

▲PageTop

長野県駒ヶ根・ホームページ制作・SEO対策リニューアル

Home

web実績

イラスト

RSS新着表示

SEO対策

プロフィール

ブログ

森の365日