Making a cool image feed with auto-scrolling. Your own news feed in PHP
RSS is a family of XML formats designed to describe news feeds, article announcements, changes in blogs, etc. Information from various sources presented in RSS format can be collected, processed and presented to the user in a form convenient for him by special programs - aggregators
Wikipedia
On many sites you will see an or button, which means that the site has an RSS feed available. This service is convenient for site readers, because with the help of Rss aggregators, for example, Yandex.Lenta or Kanban.ru, you can collect your own news feed and read news from different sites in one place or receive them to your e-mail using the Rss2Email service.
Read more about RSS, for example, in Computerra. In this article we'll talk
not about using RSS feeds and aggregators, but about how to quickly create a news feed on a website using the RSS.PHP and MySql program.Initial conditions So you have a website that has PHP support and the base works MySql data
(by the way, a very common combination). From the database in which your blog texts or news announcements are stored we will receive data for our feed. The feed will be built dynamically, directly upon request, so all you need is the appropriate script. You can write it yourself, but you can take a ready-made oneA little theory
| First, a little theory. For our feed we will use the RSS 2.0 format; for those who are interested, I direct you to the description of the format that you will find. And we will not use all the elements, but only those that we really cannot do without: | Element |
| Description | title |
| Channel title. | link |
| Link to the main page of the site. | description |
| Description of the channel. | language |
| The language in which the channel is written. For example, ru - Russian | copyright |
| Copyright | managingEditor Email |
| channel editor. | webMaster |
| Webmaster email. | pubDate |
| Date of publication of information in the channel. | lastBuildDate |
| Time of last channel change. | category |
| Determines the category to which the channel belongs. | Item |
The actual content of the channel. There must be at least one element.
| First, a little theory. For our feed we will use the RSS 2.0 format; for those who are interested, I direct you to the description of the format that you will find. And we will not use all the elements, but only those that we really cannot do without: | Element |
| Description | Item |
| Channel title. | Heading |
| Link to the main page of the site. | Link to full text |
| Time of last channel change. | annotation |
| Webmaster email. | Category |
Since RSS is a subset of XML, we should end up with something like this: If you change anything in the script, check it for compliance with the standard using the Feed Validator or RSS Validator services
Starting the program
The program consists of following files: rss.php - launch file, rss.inc - included file with a description of the class, conn.inc - file with a description of the database connection parameters.
To run the program, change the database connection data in the conn.inc file, change the feed parameters in the rss.php file and write to any convenient catalog on your web server, at least in the root. Don't forget to check the data structure MySql databases, for a program you can use, for example, this:
CREATE TABLE BLOG (ID int(11) NOT NULL default "0", title varchar(50) default NULL, description text default NULL, link varchar(200) default NULL, date date default NULL, category varchar(100) NOT NULL default "", ab varchar(10) NOT NULL default "", PRIMARY KEY (ID)) TYPE=MyISAM;
after that you will have a tape with the address
What's next?Now don’t forget to put a button in a visible place and add the code between the tags to the pages of your site:
so that browsers understand that you have a feed. And, of course, register the feed in search engine, for example, http://blogs.yandex.ru/add.xml and in the catalog http://blogs.yandex.ru/add-catalogue.xml
You can download the program for creating RSS feeds for free, Rss.php (3 Kb)
I Googled it for you. I have been looking for a long time for a plugin that will allow me to quickly and easily create such a simple effect, without gigantic amounts of code and cunning intricacies. And I found it and I'm very glad about it. In fact, I’m also writing this post for myself, as a bookmark so that I can look here the next time I need to make an image gallery with autoscrolling.
Writing html for the image feedThere's a classic here. We use a ul list and wrap it in a div. We will set a plugin on this div, so it needs an identifier. In my case it's a class.
It is important that the images are the same size. Otherwise it will not look so impressive. Therefore, you will have to strain and process them.
Preparing JavaScript for the Image CarouselYou need to connect jQuery. I think everyone knows how to do this. You also need to include the jcarousel Lite library. She does everything.
After loading the page, you need to set the plugin to our image feed and a miracle will happen!
$(function() ( $(".mycarousel").jCarouselLite(( auto: 2000, speed: 1000, circular: true, visible: 4 )); ));
This is all! Really. Nothing more is needed. No need to connect or configure themes. No need to make any controls or write additional code. You have standard code list of images and a single call to the plugin with parameters. This is how it should be. I'm delighted, to be honest.
ABOUT possible parameters and their meanings can be read in the original on the plugin page. Well, I’ll briefly tell you why.
Possible gallery optionsbtnPrev - identifier defining the "Back" button. This is necessary if you are doing scrolling control using buttons.
btnNext - identifier for the "Forward" button.
btnGo - you can navigate by element numbers. When you click on an element, the carousel should scroll to a specific item. Read more in the documentation.
mouseWheel - true/false value that determines whether the carousel will scroll when the mouse is scrolled. Requires mousewheel plugin.
auto - true/false value that determines whether the tape will spin by itself.
speed - scrolling speed in milliseconds.
easing - scrolling effect. You can create a bouncing effect. Requires the easing plugin.
vertical - maybe you need the pictures to rotate vertically?
circular - will the tape stop when it reaches the last picture or will it spin in a circle?
visible - how many elements are visible
start - which element to start with
scroll - how many elements to scroll through
beforeStart - callBack function, called before the animation starts
afterEnd - callBack function called at the end of the animation
The news feed is already for a long time is the most in a simple way receiving new information from any website or blog. Typically, a newsletter from a news feed includes the full or abbreviated text of the publication, headline, audio or video materials, presented in a standardized format.
1.FacioFacio is a jQuery plugin that displays last news from the specified Facebook page. The widget also has a Like button. Simply integrate the plugin into your website, specify the page address and display content from the social network on your website pages.
2. Feedify
Feedify – jQuery plugin for converting text into HTML newsfeed, like on Twitter and Facebook.
3. Social Feed
Social Feed is a jQuery plugin that displays a specific user's news feed from his accounts on several social networks.
4.MiniTwitter
MiniTwitter is a jQuery widget that allows you to relay comments from Twitter to your WordPress website or blog.
5. jFlickrFeed Plugin
jFlickrFeed Plugin makes it easy to pull content from Flickr and display it on your own site.
6. zTwitterFeed
zTwitterFeed plugin reads tweets certain users on Twitter. After which the entries are transformed into structured HTML code with built-in CSS classes.
7. zFlickrFeed
The zFlickrFeed plugin can retrieve photos from specific Flickr users. After which we receive structured HTML code with built-in CSS classes.
8. zLastFM
The zLastFM plugin retrieves information about favorite songs, recently listened songs, favorite albums, artists and songs from Last.FM profiles (API key required). After which the plugin produces structured HTML code with built-in CSS classes.
9. zWeatherFeed
The zWeatherFeed plugin relays information about current weather conditions from Yahoo! Weather. You can specify one or more geographic locations, use background images, reflecting weather conditions, as well as day and night design. You can also display information about the city and current temperature.
10. FeedEk
FeedEk is a jQuery plugin for parsing and displaying RSS and Atom feeds. FeedEk uses the Google Feed API to retrieve data. You can easily get the news feed of any domain without having to use any server-side scripts.
11. Ballboy.js
ballboy.js – jQuery plugin that retrieves custom works from the Dribbble service, and displays them on the site.
12. Yunero
Yunero is a new jQuery plugin for displaying a news feed from a Youtube channel. You can also specify a link to playlists from which you want to show videos. In addition, along with the widget, you can display a channel subscription form, which will increase the number of regular users.
13. Socialist
Socialist – plugin for displaying news feed from social networks, which combines all channels in one place. You can show a single news feed from Facebook, Twitter, LinkedIn, YouTube, Pinterest, Flickr, Tumblr, Craiglist RSS and other social networks.
14. jQuery Google Feed
Google Feed is a plugin that allows developers to mix different news feeds on client side. To do this, you just need to integrate the new API script from Google.
15. Fancy News
Fancy News is a jQuery plugin that allows you to create attractive news feeds. It's very easy to use and offers a lot of settings appearance. You can add an unlimited number of news items with thumbnails. If the publication is larger than the display area, scrolling is automatically added. It is also possible to upload your own RSS feed.
What do all information sites have in common? What is necessarily present on home page? If you were thinking about the news, you were right! Today we will figure out exactly how to make your own news feed with an admin panel and protection in PHP. I’ll say in advance that this is not a difficult task at all, but it won’t take two minutes either, so stock up on everything you need (beer, cola, juice, chips...) and go! First, let's think about the structure of the news feed. Of course, we will use mysql, but what would we do without it! The data will be stored in a mysql database, which we will call mynews. Which? I'll explain now. Let's place a table called news in the mynews database. And in the table - this is what:
News_id - MediumInt length 9 AutoIncrement, this will be the primary key.
Ntext - news text, type Text.
Ntitle - news title, type varchar, length 255
Ndate is a date, varchar, length 255
Nuser - and this is the name of the author of the news, varchar, length 255.
How to create all this? Read the previous texts on this site, everything is there necessary information. And from myself I can recommend an excellent, very convenient program Mysql-Front, in which all tables are created visually. But let's move on. Now let's figure out what scripts need to be written. I suggest writing the following: admin.php, createnews.php (this script will create the news), tnews.php (will display the news). You could write a script to delete news, but you can do this yourself after completing the exercise. So, let's begin. First, let's write the createnews.php script. It won't be very clear for now, but everything will fall into place after you look at the admin.php listing.
Listing 1. Createnews.php
"". addslashes($ntitle)."" // This line is needed to ensure that the quotes are displayed correctly in the title.
As you can see, varchar is used instead of a mysql date, it’s easier. Now, in order for everything in the considered script to fall into place, you need to write an admin panel. Let's write.
Listing 2. Admin.php
Adding news Adding news News title:
Your name:
Text
Obviously, a simple html form. So why create a PHP script? Because we didn’t think about safety at all. The security of the admin panel can be ensured by denying access to random users, not those who know the login and password. An attacker will be able to find out the password only then (and not earlier) when he gains access to the script, i.e. to the directory. Change admin.php as follows:
Listing 3. Modified admin.php
Adding news Adding news News title:
Your name:
Text
Let's take a look at the written script. At the very beginning, the current login and password are assigned to two variables, then the entered ones are checked. If the entered data contains " (empty), or is not equal to what is stored in the variables, the sad message " for ][aker] is displayed Invalid name user or password." Otherwise, "Authorization was successful" is displayed and goes html code. The input form is described at the very end.
That's it with the admin panel. Now let's move on to the script that will display the news feed.
Listing 4. tnews.php:
What should you pay attention to here? Firstly, upon request
$request = "SELECT ntext , ntitle , ndate , nuser FROM news ORDER BY ndate DESC LIMIT 15";
It says this: display news sorted by date, and show only the first 15 news on the page. mysql function _fetch_array($result) returns an array which is written to the $row variable. For those who don’t know what & nbsp it is, I say: it’s free space. All that remains to be done is to insert tnews into some ready-made page, for example like this:
Include("./tnews.php")
That's all I wanted to tell you. If you have any questions, feel free to ask them on our website.