This site automatically publishes the images of this set in my Flickr album, without any manual intervention on my part.
Ready to create your own? Here we go:
1 ° / Find a host
To host your site, you need a server.
If you want to use a free hosting, you can opt for Free, by following the indications of this article (How to create a free website at free.fr).
You can also opt for a hébergment paid for 10 or € 20 per year, for example at OVH at NFrance or 1 & 1.
Warning: you need the fopen function is activated on your server. Imperative to ask your provider if this feature is active on the accommodation you want to!
(if you have a free hosting on Free, this feature is enabled).
I will soon publish a way to circumvent this by changing the script, for those not on their server fopen (using cURL, for those who know).
It is not worth to take shelter with mysql database, you will not need in the case of the site that we create.
Your web space is functional? So go on …
2 ° / Equip yourself some free software
We will need three programs:
– A text editor to modify some files on the site.
The Windows notepad will do quite the case, or any other text editor of database you have on your computer.
– An FTP client to upload the files on your web server.
In this tutorial, we will use Filezilla, which is free and simple to use.
– A software to create your logo, for example Gimp or Inkscape.
It is not essential, but you’ll need if you want to create a logo for your site.
3 ° / Prepare files
1 – Download scripts
We will download the SimpleViewer FlickrViewer and which are free scripts that will be needed:
Download SimpleViewer 1.7
(watch, download this version and not another, otherwise it will not work).
Download FlickrViewer 1.1
2 – Preparation of files
– Unpack the downloaded archive (SimpleViewer and FlickrViewer) on your desktop for example.
– Open the folder SimpleViewer, and replace the file “index.html” with the file “index.html” that is contained in the archive FlickrViewer.
– Take the “flickrViewer.php” that is contained in the archive FlickrViewer and place it in the SimpleViewer.
There. SimpleViewer folder now contains everything we need.
We still have to set some preferences before sending it on the web server.
3 – Get a key to use the Flickr API
For your site to connect to Flickr, you need an API key.
Nothing complicated in there, just go to this address once you’ve logged into your Flickr account and follow these instructions:
Flickr needs to know who we are and for what purpose we wish to use from our Flickr site.
– We will complete the form by providing a name and an e-mail.
– Then, select “non-commercial use.
– In the “Describe the application you are planning to build, we will explain to Flickr what we want to make the API.
For example, copy the following:
Quote:
I need to have an API key to make use of the Flickr API with SimpleViewer and FlickrViewer (weeting.org / mark / flickrviewer /) on my website (address of your site here).
– We check the two boxes at the bottom to accept the terms of use, and valid.
– On the next page, a beautiful code looks: he is our precious key without which the site will not be able to access Flickr.
On the copy, and keeps carefully.
4 – Set Preferences
With Notepad or any text editor, open the file flickrViewer.php (which is now in the SimpleViewer).
We will now change a few things:
1 – Change the key:
Line 22, you have this:
Quote:
$ apikey = ‘b4bb27c883f06aa4575c6c346c402749’;
Replace b4bb27c883f06aa4575c6c346c402749 your API key obtained above.
Make sure you keep the quotes around the key.
2 – Change the identifier of the set
Your site will not display all photos in your Flickr album, but only those of a particular set (one set on Flickr is a category of your album).
For example, you can create a set “Best of”, containing your favorite photos, which will also be published on your site.
Info: On Flickr, a photo can be placed in several sets.
If you have not created a set in your Flickr account, go to Flickr, go to “Organize> Your Sets” and click “create a new set at the top of the screen.
Drag a thumbnail in the case of the image at the top, and choose a name for your set.
Recover indentify the set:
Going on the main page of the set we choose.
For example, in my case: Romania (best) – a photoset on Flickr
The identifier of the set is simply the numbers that are at the end of this address, namely 72157594533186826 in my case.
Search this identifier, and write it down.
Now back to our text editor:
Line 65, you have this:
Quote:
$ setId =’72057594052387557 ‘;
72057594052387557 replace the identifier set, we have noted in the previous step.
Make sure you keep the quotes around that figure.
3 – Change the address of the Flickr album
Line 74, we have this:
Quote:
$ userurl = ‘http://www.flickr.com/photos/markymoo/’;
Replace your ID markymoo by Flickr.
Make sure you keep the “/” final and apostrophes.
4 – Definition of the temporary file
FlickrViewer needs a place where it can create a temporary file to store information.
This allows the site to be faster: it will not need to question when Flickr will have the requested information in memory.
Line 83, we have this:
Quote:
$ cache = “/ tmp / flickr.xml”;
Some shared servers (= accounts of public accommodation), do not write in / tmp of the server, for security reasons.
We will therefore create a specific folder, which we will give rights to write to store this temporary file.
To do this:
1 – open the software filezilla
2 – enter in the top bar of the Filezilla FTP connection information provided by our host.
In the case “port”, to 21.
Then click on “fast”.
3 – Create a folder for the temporary file:
In the right box, we can explore our hosting space.
We will go into the folder that contains the site (for example the folder “www”, this depends on your host) and with a right click, choose “create a directory”.
Call this directory “tmp”.
4 – Give rights to write to this directory.
To allow the site to save temporary files in the directory you just created:
– Let’s do this right click on new folder “tmp”
– Click “File attributes”
– In “value”, enter 777
This will open all access rights on this file.
Then validate.
Now back to our text editor:
Line 83, we have this:
Quote:
$ cache = “/ tmp / flickr.xml”;
We will simply remove the first “/” symbol to denote the tmp folder that is not the server root, but in our personal files to us
This gives:
Quote:
$ cache = “tmp / flickr.xml”;
(we simply removed the first “/”.)
5 – Choose Preferences:
– Hours Cache:
Line 102, we have this:
Quote:
$ ttl = 43200;
This corresponds to the period during which photographs are stored in memory (in the temporary folder that you just created ), In seconds.
Over this period is long, unless your site will have to use Flickr to go look for information.
But also, less your site will be updated regularly.
43200 seconds is 12 hours is a good choice. But you can change this value (0 = nothing is stored in memory.
– Title of site:
Line 107, we have this:
Quote:
$ title = “My Favorite Photos”;
Replace with the title of your site, in keeping with the quotation marks around it.
– Link to Flickr:
Line 120, we have this:
Quote:
$ showImageLink = true;
If you let true, then a link to the Flickr page containing the image will be placed on your site.
If you do not want to replace true by false
– Title of images:
Line 132, we have this:
Quote:
$ showImageCaption = true;
Let true if you want to display the title of the image (taken from Flickr), or make false if you do not wish to.
– Translation of the link that points to the Flickr page:
If you chose to display the link to the photo on Flickr (see step “link to flickr”, line 286 Replace the text
“View full size …”
by: “View actual size” or “See my album on Flickr or whatever you want. This is the text that appears on this link.
– Configuration page:
In your text editor, open the index.html file:
Line 5, you have this:
Quote:
SimpleViewer / Flickr interface in PHP
Replace with the title of your page, it will appear in the top bar of the browser (do not delete the title tags, simply change the text between the tags).
For those knowledgeable in html:
If you want to add a logo, text, links … It is also here that it happens.
You can add your content (logo, text, links …) between the body tags. The part between the tags is the script display images.
You can change the placement of the viewer by changing the style sheet included in the file index.html.
6 – is sent on the server!
First record of the files that we modified.
With Filezilla, then send the contents of the SimpleViewer folder on your web server.
(In the right pane, view the folder of your website, and from the left window, drag the files in the folder SimpleViewer towards the right window).