—»     —»   Простой способ добавления бесплатного новостного контента на свой сайт – Часть 2
  Раздел: RSS/Feeds   Нет комментариев  

Простой способ добавления бесплатного новостного контента на свой сайт – Часть 2



В первой части данного руководства мы дали вам подробную информацию о том, как применять RSS-кодинг (Really Simple Syndication) в целях публикации бесплатных новостей и ссылок на любом сайте.

Рекомендуем вам ознакомиться с первой частью, так как в ней рассказывается о RSS и освещаются процесс интеграции обычного модуля новостной ленты при помощи АПИ Google Feed.

Целью данного руководства является рассказать вам о том, как добавить больший по объемам новостной модуль, горизонтальную ленту новостей, а также ленту в формате списка.

Простой способ добавления бесплатного новостного контента на свой сайт – Часть 2

Давайте же приступим. Идея интеграции бесплатного новостного контента и ссылок в собственный веб-сайт или блог может заинтриговать, но вероятно вам захочется охватить большую область, нежели маленький модуль с 4-мя ссылками. Также, вы вероятно захотите единовременно интегрировать целый список новостей, нежели вручную копаться в RSS-кодинге, чтобы указать разные источники. Идеальным решением в данной ситуации будет лента новостей, предназначенная для нескольких источников.

Модуль вертикальной ленты новостей

Для того чтобы настроить ленту, скопируйте код, приведенный ниже, в головную секцию любой веб-страницы. Весь массив строк должен быть расположен после тэгов title и meta, прямо перед закрывающим тэгом head:

<style type="text/css">
@import url("http://www.google.com/uds/solutions/dynamicfeed/gfdynamicfeedcontrol.css");

#feedControl {
margin-top : 20px;
margin-left: auto;
margin-right: auto;
width : 440px;
font-size: 16px;
color: #9CADD0;
}

</style>

<script src="https://www.google.com/jsapi/" type="text/javascript"></script>
<script src="http://www.google.com/uds/solutions/dynamicfeed/gfdynamicfeedcontrol.js"
type="text/javascript"></script>

<script type="text/javascript">
function showControl() {
var feeds = [
{title:'CNN',
url:'http://rss.cnn.com/rss/edition_world.rss'},
{title:'NY Times',
url:'http://feeds.nytimes.com/nyt/rss/World'},
{title:'Reuters',
url:'http://feeds.reuters.com/Reuters/worldNews'}];

new GFdynamicFeedControl(feeds, 'feedControl',
{numResults : 6, stacked : true,
title: "World News"});
}
google.load("feeds", "1");
google.setonloadCallback(showControl);
</script>

В том месте в теле документа, где бы вы хотели отобразить новостную ленту, расположите следующую строку кода:

<div id="feedControl">Loading...</div>

Как и в случае с небольшой новостной лентой, о которой мы говорили в предыдущем посте, здесь присутствуют опции оформления. Например, выражение margin-left в разделе feedControl выставлено на auto, и это центрирует модуль в соответствующей области.

Если вы захотите сместить его влево, все, что вам потребуется, это изменить указанный параметр на 0px.

#feedControl {
margin-top : 20px;
margin-left: 0px;
margin-right: auto;
width : 440px;
font-size: 16px;
color: #9CADD0;
}

Три источника, которые входят в список, это: CNN, The New York Times и Reuters. Если вы захотите изменить любой из них, или использовать код АПИ Feed таким образом, чтобы оно охватывало все темы новостей, то просто замените существующие URL на желаемые.

Например, чтобы «заставить» источник The Times транслировать только тему Религии, вам нужно сделать следующее замещение:

http://feeds.nytimes.com/nyt/rss/World

поменять на:

http://feeds.nytimes.com/nyt/rss/NYRegion

Число отображаемых ссылок также может быть изменено. Для того чтобы изменить стандартное количество новостей (6) для каждого источника на 4, вам просто нужно будет изменить следующую строку:

{numResults : 4, stacked : true,

Когда страница будет загружена, модуль будет похож на этот:

Простой способ добавления бесплатного новостного контента на свой сайт – Часть 2

Модуль горизонтальной новостной ленты

Если у вас есть пространство в теле какой-нибудь страницы, то вы, вероятно, захотите сэкономить там как можно больше места, и при этом интегрировать горизонтальную новостную ленту. Пример такой ленты можно наблюдать на всех крупных новостных веб-сайтах, включая даже BBC.co.uk.

Для этого нам нужно будет изменить следующие строки кода в головной секции (в коде, который был приведен выше):

width : 650px;

{title:'', (remove the news source name from each of the designated areas)

new GFdynamicFeedControl(feeds, 'feedControl',
{horizontal : true,

Когда страница будет загружена на сервер после отмеченных изменений, вы сможете наблюдать горизонтальный модуль вроде этого:

Простой способ добавления бесплатного новостного контента на свой сайт – Часть 2

Новостная лента в виде списка

В качестве примера для более свободного стиля новостной ленты давайте взглянем на новостной модуль в виде списка. Он не ограничен никакими рамками, и текстовое наполнение адаптируется к любой веб-странице, и перенимает уже ранее указанный шрифт.

Для того чтобы начать, расположите следующий код в головную секцию, под тэгами title и meta, прямо перед закрывающим тэгом head:

<script type="text/javascript" src="http://www.google.com/jsapi"></script>

<script type="text/javascript">
google.load("feeds", "1")</script>

Далее, в раздел веб-страницы, где вам необходимо отображать новостной блок, добавьте следующий код:

<div id="feeddiv"></div>

<script type="text/javascript">

var feedcontainer=document.getElementById("feeddiv")
var feedurl="http://feeds.nytimes.com/nyt/rss/NYRegion"
var feedlimit=10
var rssoutput="<b>Latest New York Regional News:</b><br /><ul>"

function rssfeedsetup(){
var feedpointer=new google.feeds.Feed(feedurl)
feedpointer.setNumEntries(feedlimit)
feedpointer.load(displayfeed)
}

function displayfeed(result){
if (!result.error){
var thefeeds=result.feed.entries
for (var i=0; i<thefeeds.length; i++)
rssoutput+="<li><a href='" + thefeeds[i].link + "'>" + thefeeds[i].title + "</a></li>"
rssoutput+="</ul>"
feedcontainer.innerHTML=rssoutput
}
else
alert("Error fetching feeds!")
}

window.onload=function(){
rssfeedsetup()
}

</script>

Полученный новостной модуль после загрузки страницы на сервер должен выглядеть следующим образом:

Простой способ добавления бесплатного новостного контента на свой сайт – Часть 2

Вы можете оформить его различными элементами в следующих строках кода:

var feedurl="http://feeds.nytimes.com/nyt/rss/NYRegion"
var feedlimit=10
var rssoutput="Latest New York Regional News:

"

Завершение

Каждый из трех охваченных здесь типов новостных модулей позволит вам представить новостной контент своим читателям в свежей и привлекательной манере. Применяя вышеописанные методы, вы сможете без труда интегрировать новостные блоки в любые страницы, и настраивать их на отображение любой тематики новостей.
Обнаружили ошибку или мёртвую ссылку?
Выделите проблемный фрагмент мышкой и нажмите CTRL+ENTER.
В появившемся окне опишите проблему и отправьте уведомление Администрации ресурса.
Нужна органическая вечная ссылка из данной статьи? Постовой?
Подробности здесь
Вам понравился материал? Поблагодарить легко!
Будем весьма признательны, если поделитесь этой статьей в социальных сетях:

Опубликовал Design FactoRy   Прочитано (раз): 7646   |   Нет комментариев
Источник материала / оригинал статьи   Распечатать
Другие статьи и новости по теме:
Добавление комментария
Уважаемые пользователи!
При добавлении комментариев на сайт Вам следует учитывать следующее - все комментарии проверяются Администрацией на предмет отсутствия спама. При обнаружении признаков спама, в оставленном Вами комментарии, сам комментарий будет незамедлительно удалён, а Ваш IP-адрес будет забанен без предупреждения! Учётные записи пользователей, рассылающих спам, блокируются/удаляются без права последующего восстановления.

С уважением, Администрация сайта.
* = поля обязательны к заполнению
Полужирный Наклонный текст Подчеркнутый текст Зачеркнутый текст | Выравнивание по левому краю По центру Выравнивание по правому краю | Вставка смайликов Выбор цвета | Скрытый текст Вставка цитаты Преобразовать выбранный текст из транслитерации в кириллицу Вставка спойлера
Вопрос : Национальная денежная единица США
Подтверждение кода безопасности :

Включите эту картинку для отображения кода безопасности
обновить, если не виден код


Карта Череповца
Информация о банковских картах. Форумы, карты, статистика
maxikarta.ru


















Свежие шаблоны сайтов каждый день
С миру по нитке
«    Январь 2017    »
ПнВтСрЧтПтСбВс
 1
2345678
9101112131415
16171819202122
23242526272829
3031