ブログの記事一覧をウェブサイトに貼る方法 | アメブロ,livedoorブログ,WordPress.comブログ,Blogger,はてなブログ,FC2ブログ,jugem

      2016/04/09

この記事の所要時間: 1026

ウェブサイトにブログの一覧を貼る方法です・・・

【HTML版】
サンプル:ブログ記事一覧表示サンプル(HTMLバージョン)

【PHP版】
サンプル:ブログ記事一覧表示サンプル(PHPバージョン)

まずは、見てください。
答えを先に見せました。
古畑任三郎テクニック(笑)※わかる人だけわかって

こういう風に表示したい時、Webサービスとかブログパーツとかいろいろありますが、PHPを利用できるサーバーならチャチャっと入れられる方法です。

まずは、サンプルファイル・・・です。
ファイルのダウンロードは下記です!

▼ ウェブサイトにブログの記事一覧表示サンプル

今回の記事ではこれを使用しているため、このダウンロードファイルが無いと「何言ってんの?」という箇所があるかもしれませんのでご注意下さい。

スポンサーリンク

HTML版とPHP版の違い

HTML版のサンプルは index.html
PHP 版のサンプルは index.php
となっています。
この二つの違いは実装方式です。
PHP版は require_once で blog〜.phpを呼び出して一緒に排出していますが、HTML版は iframe で内部ウィンドウの中に blog〜.php を表示しています。

どちらがいいかと言えばPHP版の方がページ内のテキストになるためSEOには有効でしょう…が、そんなことで決めるのではなく PHPに出来るのか…出来ないならiframeで表示するかってだけです。
サンプルはindex.phpとindex.htmlになってますが、どこにでも入れられるように用意しました。それだけです。

ブログサービスによる記述の違いについて

今回、私が持てる全てのブログサービスに対して表示するコード書いてみました。
何が違うかというと、データの格納場所が違うんです。今回扱ったブログだけで言えばそのくらいです。

アメブロは 一件のデータの date timestamp にタイム値が入っていますのでそれを日付に変換し表示してます。

livedoorブログは一件のデータの dc というデータの中の date に日付を格納していますので取り出してフォーマット変えて表示してます。

大きく言えばこの二つの方式以外ありませんでした。

ここで扱っていないブログサービスに対してもこのどちらかであると思われますのでためしてみる価値大です。

具体的な設置方法とカスタマイズの勘どころ

今回、表示部分に blog_〜.php と
表示サンプルとして index.php 及び index.html を用意してますが
中身をテキストエディタで見ていただくとわかりますが、こんなにシンプルなはずはありません。
※ブログ何個出しとんねん!というのは抜きで。

また、ブログの記事一件ずつのリストも ul からの liタグで出したいとも限りませんので、その辺りの変更方法と注意点を書きたいと思います。

設置について

設置についてはダウンロードしたファイルを解凍し任意のサーバーにアップロードして使用します。
アップロード後、必要なファイルを残しディレクトリのパーミッションをカッコの通りに設定する必要があります。

bloglist(設置するディレクトリ 名前は任意)
│ blog_ameblo.php ※アメブロを利用する場合必要
│ blog_blogger.php ※bloggerを利用する場合必要
│ blog_fc2.php ※FC2ブログを利用する場合必要
│ blog_hatena.php ※はてなブログを利用する場合必要
│ blog_livedoor.php ※livedoorブログを利用する場合必要
│ blog_wordpress.php ※WordPress.comを利用する場合必要
│ blog_jugem.php ※JUGEMを利用する場合必要
│ index.html ← HTML版サンプル
│ index.php ← PHP版サンプル

├─cache (777)
├─images (755)
│ new.gif

└─magpierss (755)
※今回詳細に触れません

RSSファイルを取得して解析してくれるのを「magpierss」というモジュールがやってくれてます。
感謝して使わせていただきます!!
アメブロ用のソースはこちらです。

    < ?php /* ---------- 初期設定 ----------- */ // アメブロのアカウント $ameblo_account = "taman777"; // 取得したいRSSのurl $blog_rss_url = "http://rssblog.ameba.jp/$ameblo_account/rss20.xml"; // 取得表示したい件数 $post_count = 5; // 記事タイトル表示文字数(バイト数ではありません) $title_length = 20; // 記事表示文字数(バイト数ではありません) $description_length = 20; // キャッシュを使用するかどうか $cache_flg = true; // trueは使用する falseは使用しない(常にHTTPリクエスト発行する) // キャッシュを使用する(HTTPリクエストを行わない)秒数 $cache_sec = 3600; // 3600秒 = 30分 // キャシュを保存するディレクトリ // 指定するディレクトリは パーミッションを 707 か 777 に設定してください $cache_dir = "./cache"; // magpierss のモジュールを読込み require_once("./magpierss/rss_fetch.inc"); // キャッシュ期間を指定する この指定数値(単位は秒)だけキャッシュを利用 // その間はHTTPリクエストを行いません。 define("MAGPIE_CACHE_ON", $cache_flg); define("MAGPIE_CACHE_AGE", $cache_sec); // キャッシュを保存するディレクトリを指定 define("MAGPIE_CACHE_DIR", $cache_dir); // エンコードを UTF-8 に指定 define("MAGPIE_OUTPUT_ENCODING", "UTF-8"); // RSSを取得する $rss = fetch_rss($blog_rss_url); $cnt = 0; foreach ($rss->items as $item) { // リンクアドレス $url = mb_convert_encoding($item['link'],"UTF-8","auto"); // タイトル $title = mb_substr(mb_convert_encoding($item['title'],"UTF-8","auto"), 0, $title_length); // 記事内容 $description = mb_substr(strip_tags(mb_convert_encoding($item['description'],"UTF-8","auto")), 0, $description_length); // 日付 $date = date("Y/m/d", intval($item['date_timestamp'])); // PR除く if (preg_match("/^PR:.+$/", $title) != 0) continue; /* ----- この下のHTMLを変更するとフォーマットを変更できます ----- */ echo < << END
  • $date $title $description END; /* ----- この上のHTMLを変更するとフォーマットを変更できます ----- */ // 設定件数取得したら終了 if ($cnt == $post_count - 1) { break; } $cnt ++; } ?>

※< ?php となってしまうのは <?php に全置換してください。

index.php, index.html のカスタマイズ

【HTML版】の実装はこうです。
※アメブロの表示部分

アメーバブログの記事一覧


これだけです。
iframeの枠を書いたりなくしたり、幅を設定したり
<iframe>にidをつけたりしてcssにて装飾してください。

【PHP版】の実装はこうです。
※livedoorブログの表示部分
※<?php ではなく < ?phpとなってしまう場合がありますので適宜修正してください。

livedoorブログの記事一覧

< ?php require_once('blog_livedoor.php'); ?>

この場合はdivで囲んだりいろいろ出来ます・・・。

両者ともリストの内容は blog_~.php の方で変更します。

blog_~.php の編集について

まず、それぞれアカウントの部分を変更する必要があります。
初期は私のアカウント「taman777」になっていますのでこの部分を変更してください。
今回用意したブログサービス向けにはそれで動作すると思いますが、それ以外や動作しない場合は各サービスのRSS取得URLを確認してください。
確認方法はサイトの中に「RSS」っていうリンクを探すか、ソースを確認して「application/rss+xml」のような記述を確認してください。

下記の例は僕が好きな「宮原学」さんのブログ(Jugem)のRSSです。


たとえばこのJugemブログを表示したい場合は前述の「アメブロ用」をカスタマイズしてみます。

/* ---------- 初期設定 ----------- */
// アメブロのアカウント
$ameblo_account = "taman777";

// 取得したいRSSのurl
$blog_rss_url = "http://rssblog.ameba.jp/$ameblo_account/rss20.xml";

の部分を

/* ---------- 初期設定 ----------- */
// Jugemのアカウント
$jugem_account = "manabie";

// 取得したいRSSのurl
$blog_rss_url = "http://$jugem_account.jugem.jp/?mode=rss";

に変更。

そして、下記部分

    // 日付
    $date = date("Y/m/d", intval($item['date_timestamp']));

こちらを

    // 日付
    $date = date("Y/m/d", strtotime($item['dc']['date']));

に変更すればOKです。
※こちらもサンプルに追加してみました。宮原さん、拝借してます。CD購入するのでお許しを・・・

すべてに共通しているのはサンプルは <ul></ul>で表示しているということです。
ですので<dt><dd>等で表示したい場合などあるでしょうから下記部分を修正してください。

※各ファイル1行目

    < ?php ~~~

※各ファイル最終行

?>
< /ul>

この部分は通常のリストタグの開始終了になりますので適宜変更してください。

そしてその中身<li>部分

わかりやすいように各ファイル内に下記のコメントを挿入しています。

/* ----- この下のHTMLを変更するとフォーマットを変更できます ----- */
echo < << END
  • $date $title $description END; /* ----- この上のHTMLを変更するとフォーマットを変更できます ----- */
  • 読んだ通りなのですが、<li>から</li>までの間を適宜、変更します。
    繰り返しとなる部分です。1行1行色を交互に出したい場合などはちょうど中で
    $cnt という変数を使用していますので・・・たとえば

    /* ----- この下のHTMLを変更するとフォーマットを変更できます ----- */
    $style = ($cnt % 2 == 0 ? "even" : "odd");
    echo < << END
    
  • $date $title $description END; /* ----- この上のHTMLを変更するとフォーマットを変更できます ----- */
  • のようにすれば良いと思います。
    ※evenは偶数行の背景色スタイルをoddは奇数行の背景色スタイルを記述するといいです。

    いろいろ応用は効かせられると思います。
    そうそう、中身に使用している変数は下記の通りです。

    $url : WordPressでいうところのパーマリンク、記事のURLです。
    $date : 公開日です。 日時にする場合は

        // 日付
        $date = date("Y/m/d", intval($item['date_timestamp']));
    

    っていうところを

        // 日付
        $date = date("Y/m/d H:i:s", intval($item['date_timestamp']));
    

    ってすると 2014/01/20 23:30:01 という感じになります。

    $title : 記事のタイトルです。
    $description : 記事内容です。

    表示件数と $titleと$descriptionに関しては各ファイルの初期設定で文字数を調整できます。

    // 取得表示したい件数
    $post_count = 5;
    
    // 記事タイトル文字数(バイト数ではありません)
    $title_length = 20;
    
    // 記事表示文字数(バイト数ではありません)
    $description_length = 20;
    

    この部分をそれぞれ変更すれば良いです。

    とりあえず説明は以上です。
    わからないことがあれば、質問受け付けます!!!
    繁盛期なので返信遅くなったらごめんなさい。

    誰かのお役に立てていれば幸いです!

    もう一度、サンプルのダウンロードリンクを掲載します。
    今回はFacebookの「いいね!」をいただかなくてもダウンロード出来るようにします!

    ▼ ウェブサイトにブログの記事一覧表示サンプル

    気に入ったら是非Facebook株式会社ジーティーアイ に「いいね!」ください。


    ダウンロードページはこのブログのメニューに移動しました。
    株式会社ジーティーアイ Facebookページに「いいね!」を押してくださるとダウンロードコンテンツを含むブログの重要更新がお知らせされます!是非「いいね!」してくださいね!

    よろしくお願いいたします!

    • B!

     - 雑記 , , , , , , , , , , , , , , , ,

    %d人のブロガーが「いいね」をつけました。