ブログ（WordPress）等の最新記事をホームページに貼るつける方法として、

Google Feed APIを利用する方法がありましたが、2017年1月11日に廃止され、

頭を抱えた方は少なくないと思います。私もそうだったように・・・

そこで、代替としてGoogle Feed APIに似ている「jQuery」を利用した方法を

当ホムペに実装してみたので参考まで。

実装ページ：HCZ.JP

参考ページ：【jQuery】緊急案件：Google Feed API が廃止・・・

参考ページを元にカスタマイズした実装法です。詳しいプログラミングははしょります。

記述するスクリプトコード

<script src='//ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js'></script>
<script src="js/rss.js"></script>

※body内に記述しますが、お勧めはfooter。「js/rss.js」はjsのフォルダに

格納されているということで、任意に階層を決めてください。

次に表示させたい場所に下記を記述

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

ホームページ（html）に記述することはこれだけ。

ソースコードが非常にシンプルですね。

次にrss.jsファイルに表示させたいブログのフィードURLを記入します。

rss.jsは下記リンクをクリックしてダウンロードして下さい。

ダウンロードファイル → rss.zip

zip形式のフォルダを解凍すると、2つのファイルが入ってます。

rss.js　/　rss.css

rss.jsをテキストエディタ（TeraPadなど）で開き、下記を変更する。

url: ‘http://www.example.com/blog/feed’,

↓

url: ‘表示させたいフィードのURL’,

rss.cssは、中身を自分で作成したスタイルシートにコピペして削除。

好みでサイズやスタイルを調整してください。

※クロスドメインには非対応です。

以上で全ての実装作業は完了です。

更に最新版もご覧ください。

WordPress（ワードプレス）の投稿記事をホームページ（html）に自動貼り付け

Google Feed APIが廃止されてしまったここ数日、当ホームページに埋め込んである

ブログのフィード枠が空白のままでした。

で、代替になるものをググってみたら、設定・実装が簡単そうな「FeedWind」

がヒットしたので試してみた。

貼るだけで使える無料ブログパーツ「FeedWind（フィードウィンド）」です。

サイト：FeedWind（フィードウィンド）

その名の通り、「貼るだけで使える」もので、設定も超簡単。

個人・商用問わず、登録なしの無料でありながら利用規約もゆるい。

貼り付け例

設定例

・フレーム設定：W　416px　/　H　148px　/　スクロール間隔　10秒

　/　スクロールバー　表示する　

・タイトル設定：表示しない

・記事設定：表示内容　タイトル＋本文　/　記事へのリンク　表示する

　/　最大文字数（タイトル 55　本文120）　/　背景色　＃E1E1E1

並び替え　新しい順　/　区切り線　表示する　/　日付　表示する

貼り付けコードタイプは「<script type=”text/javascript”>」

追伸

設定後、「コードを取得」すると、貼り付けるコードがめっちゃ長いので、

ソースコードをシンプルにしたい方だと不向きかも。

因みに貼り付け例の取得コードはこんな感じ。

<!– start feedwind code –><script type=”text/javascript”>document.write(‘\x3Cscript type=”text/javascript” src=”‘ + (‘https:’ == document.location.protocol ? ‘https://’ : ‘http://’) + ‘feed.mikle.com/js/rssmikle.js”>\x3C/script>’);</script><script type=”text/javascript”>(function() {var params = {rssmikle_url: “https://www.hcz.jp/blog/?feed=rss2”,rssmikle_frame_width: “416”,rssmikle_frame_height: “148”,frame_height_by_article: “0”,rssmikle_target: “_blank”,rssmikle_font: “‘メイリオ’,’ＭＳ Ｐゴシック’,sans-serif”,rssmikle_font_size: “12”,rssmikle_border: “off”,responsive: “on”,rssmikle_css_url: “”,text_align: “left”,text_align2: “left”,corner: “off”,scrollbar: “on”,autoscroll: “on”,scrolldirection: “up”,scrollstep: “10”,mcspeed: “20”,sort: “New”,rssmikle_title: “off”,rssmikle_title_sentence: “”,rssmikle_title_link: “”,rssmikle_title_bgcolor: “#9ACD32”,rssmikle_title_color: “#FFFFFF”,rssmikle_title_bgimage: “”,rssmikle_item_bgcolor: “#E1E1E1”,rssmikle_item_bgimage: “”,rssmikle_item_title_length: “55”,rssmikle_item_title_color: “#404040”,rssmikle_item_border_bottom: “on”,rssmikle_item_description: “on”,item_link: “off”,rssmikle_item_description_length: “120”,rssmikle_item_description_color: “#404040”,rssmikle_item_date: “ja”,rssmikle_timezone: “Etc/GMT”,datetime_format: “”,item_description_style: “text+tn”,item_thumbnail: “full”,item_thumbnail_selection: “auto”,article_num: “15”,rssmikle_item_podcast: “off”,keyword_inc: “”,keyword_exc: “”};feedwind_show_widget_iframe(params);})();</script><div style=”font-size:10px; text-align:center; “><a href=”http://feed.mikle.com/” target=”_blank” style=”color:#CCCCCC;”>RSS Feed Widget</a><!–Please display the above link in your web page according to Terms of Service.–></div><!– end feedwind code –>

追記　2019年1月26日

2018年2月27日以降、登録不要のバージョン1には広告が表示されるようになりました。

広告なしのバージョン2では登録が必要になるとのこと。

※旧バージョン（V1）FeedWindをご利用中の皆さまへのお知らせ

↑上の「貼り付け例」はバージョン1だから、広告が表示されていることが確認できます。

広告なしでバージョン1と同じように表示させることも可能らしいが、

それらは有料版になるとのこと。

ん・・・残念です。

コード記述がシンプルな方法も過去記事に残してありますので、

お試しください。

HCZ BLOG
「Google Feed APIの代替にはシンプルな「jQuery」が絶対オススメ。」

ただし、こちらの貼り付け方法は、現状アイキャッチが表示されません。

アイキャッチも表示される設定方法はこちら↓

WordPress（ワードプレス）の投稿記事をホームページ（html）に自動貼り付け

DW Question Answer　のネタは何回目か忘れましたが、

こんなことも出来るので紹介しておきます。

質問を自動的にホームページに貼り付けする方法です。

※ Google Feed APIを利用します。

ジャバファイルをテキストエディター（TeraPad等）で作るのですが、

小難しい説明すると話が長くなるのですっとばして、

下記リンクをクリックして「rss-qa.js」をダウンロードして下さい。

ダウンロードファイル → rss-qa.zip

解凍した「rss-qa.js」ファイルをテキストエディター（TeraPad等）で開き、

5行目の example.com を「DW Question Answer」のトップページURLに変更し、

サーバーの好きな階層にアップロード。注）文字コードはUTF-8で保存

 var feed = new google.feeds.Feed("http://www.example.com/question/?feed=rss2");

8行目は貼り付けする質問数。36行目 (0, 70) は質問の文字数。

質問内容を貼り付ける場合、36行目の「title」を「contentSnippet」に変更する。

質問を貼り付けたいホームページに下記記述。

<script src="http://www.google.com/jsapi"></script>
<script src="ファイルをアップしたディレクトリ/rss-qa.js"></script>

記述場所はどこでもいいが、オススメはフッターの一番下あたりかな。

質問を表示する準備は以上。

次にホームページの表示したい場所に下記記述。

<div id="rss-qa"><span id="feed">Q & A</span></div>

スタイルシート(css)は参考まで

#rss-qa {
    font-size: 12px;
    margin: 0 -12px 0 -10px;
    width: 400px;
    height: 152px;
    padding: 0;
    overflow-y: scroll;
    letter-spacing: 0.04em;
    line-height: 16px;
}
#feed ul li {
    list-style: none;
    margin: 4px 0 8px -36px;
    padding: 0 12px 8px 30px;
    border-bottom: 1px solid #cccccc;
    line-height: 22px;
}

しまい

追伸

「Google Feed API」は2017年1月11日をもって廃止されました。

よって、こちらの方法をお試しください。

WordPress（ワードプレス）の投稿記事をホームページ（html）に自動貼り付け