はてなブログの新着記事を外部サイトページに表示

f:id:hak00810:20210211234836j:plain

ブログの新着記事を外部サイトページに表示

コーポレートサイトなどのトップページで、ニュースの新着記事の日付・見出しを表示しているサイトありますよね。前から気になっていたので、調べてみました。

ブログが更新されると自動で新着記事が更新されます。

デモページ

準備

はてなブログのRSSを確認

https://hak00810.hatenadiary.org/rss

このブログのRSSをメモします。

help.hatenablog.com

Feed.phpをダウンロード

RSSやAtomフィードを読み込むための、便利なライブラリが参考サイトで紹介されているのでrss-phpをダウンロードします。

＜参考サイト＞
コードや解説がとてもわかりやすかったです。ありがとうございます。

kana-lier.com

ダウンロードしたZIPファイル＞rss-php-master ＞Feed.phpをindex.phpと同じ階層に置きます。

No Image画像を用意

index.phpの階層にimgフォルダを作成し、中にnoimage.pngを設置します。

プログラミング

index.phpを新規作成し、以下を記述します。
ほぼ参考サイト様のコードです。

＜index.php＞

<?php 
require_once "./Feed.php" ; //rss-phpライブラリを読み込みます
$feed = new Feed ;
$url = "https://hak00810.hatenadiary.org/rss"; //RSSのURLを入力する
$rss = $feed->loadRss( $url ) ;
$num = 5;//表示させたい件数
$i=0;
$desW = 30;//詳細の文字数を制限します。制限しないときは0にします。
if ( $desW != 0){
  $desW = ($desW*2)+2;
}
foreach( $rss->item as $item )
{
  if($i>=$num){
  }
  else{
    $title = $item->title ;	// タイトル
    $link = $item->link ; // リンク
    $timestamp = strtotime( $item->pubDate ) ; // 更新日時
    $description = $item->description ; // 詳細
    $description = str_replace("▼続きを読む","",$description);
    //↑ 続きを読むなど、決まった文章が詳細にはいっている場合に、それを除外する
    $description = strip_tags($description);
    if ( $desW != 0){
      $description = mb_strimwidth($description, 0, $desW, "…",'utf-8');
    }
    //
    $thumbnail = trim($now_url,"/") . "./img/noimage.png";//画像がない場合の指定
    if( preg_match_all('/<img([\s\S]+?)>/is', $item->description, $matches) ){
      foreach( $matches[0] as $img ){
        if ($img === reset($matches[0])) {//最初の画像にマッチしたもの
          if( preg_match('/src=[\'"](.+?jpe?g)[\'"]/', $img, $m) ){
            $thumbnail = $m[1];
          }
        }
      }
    }
  ?>
<head>
<meta charset="UTF-8">
<title>News feed-php</title>
<style>
  div,dl,dt,dd,p {
    margin: 0;
    padding: 0;
    line-height: 1.4;
    font-family:
      "Hiragino Kaku Gothic ProN",
      Meiryo,
      sans-serif;
  }
  img {
    border: none;
    vertical-align: bottom;/*画像を文字のディセンダにあわせる*/
}
  #news {
    width: 600px;
    margin: 0 auto;
  }
  dl {
    overflow: hidden;
  }
  dt {
    float: left;
    padding: 0 10px 0 0;
  }
  .image {
    width: 200px;
    height: 140px;
    overflow: hidden;
  }
  .image>img {
    width: 200px;
  }
  .text {
    margin-bottom: 20px;
  }
</style>
</head>
<body>
<div id="news">
<dl>
<dt><?php echo date( "Y.m.d", $timestamp); ?></dt>
<dd><a href="<?php echo $link; ?>" target="_blank"><?php echo $title; ?></a></dd>
</dl>
<p class="image"><img src="<?php print $thumbnail; ?>" alt="<?php print $item->title; ?>"></p>
<p class="text"><?php echo $description; ?></p>
</div>
</body>
  <?php
    $i++;
  }
}
?>

ポイント

" "内に表示したいRSSのURLを入力します。

$url = "https://hak00810.hatenadiary.org/rss"; //RSSのURLを入力する

->の右の要素名をRSS/XMLのタグと一致させます。

$title = $item->title ; // タイトル
$link = $item->link ; // リンク
$timestamp = strtotime( $item->pubDate ) ; // 更新日時
$description = $item->description ; // 詳細

＜RSS/XML＞
https://hak00810.hatenadiary.org/rss

<item>
<title>WordPressでサイト100選をつくる</title>
<link>https://hak00810.hatenadiary.org/entry/2020/06/23/005146</link>
<description>&lt;p&gt;&lt;span itemscope itemtype=&quot;http://schema.org/Photograph&quot;&gt;&lt;img src=&quot;https://cdn-ak.f.st-hatena.com/images/fotolife/h/hak00810/20200623/20200623005056.jpg&quot; alt=&quot;f:id:hak00810:20200623005056j:plain&quot; title=&quot;f:id:hak00810:20200623005056j:plain&quot; class=&quot;hatena-fotolife&quot; itemprop=&quot;image&quot;&gt;&lt;/span&gt;&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;前回の記事「&lt;a href=&quot;https://hak00810.hatenadiary.org/entry/2020/06/22/022655&quot;&gt;MAMPを使用してWordPressのローカル環境をつくる&lt;/a&gt;」を利用してサイト100選をつくりました。&lt;/li&gt;
&lt;/ul&gt;&lt;p&gt;&lt;a href=&quot;http://hak00810.wp.xdomain.jp/&quot; class=&quot;btn&quot;&gt;デモページ&lt;/a&gt;&lt;br /&gt;
&lt;/p&gt;
（以下略）