Wordpress jQuery Carousel

Posted on January 5th, 2012 in Uncategorized | 1 Comment »

I insisted that I would blog today, or ‘Blog Thursday’ as I now need to remember! It’s been far too long since I last posted!

I’ve just got back from PHP London at the Doggetts pub, where Jakub Zalas (http://twitter.com/@jakub_zalas) gave a talk on Symfony2; it certainly looks like a nice framework but I’m already heading down the Zend route as that’s what we use at work! I would recommend checking it out though, if you haven’t already.

When searching for ideas on what I should blog about; I figured I’d consult ye olde Twitter! Thankfully, a couple of people asked questions; and even better that the questions are on the same topic of WordPress; something I’ve used quite a lot in my personal time as well as work.

Question 1:

The first question comes from @asforasafarina (thank you darling sister :p), “I would like to know how to put a jquery carrousel on my wordpress blog please! :) ”.

The reason Asfora has asked this, is because I was showing her the new website we have for work (http://www.webgains.com). As you can see, it has a nice pretty carousel and she was shocked when I told her the website uses Wordpress; this resulted in her wanted me to explain how she can put such an item on her own site.

To get you started, it’s probably easier to point you in the direction of fredhq.com; where you can download the ’roundabout’ jQuery plugin:

http://fredhq.com/projects/roundabout/

The download link is here:

https://github.com/fredhq/roundabout/zipball/master

So, how do you put it into your Wordpress blog? All you need to do is open up your theme editor, edit the HTML of where you want the carousel to go and put this HTML:

<!– assuming you places the jquery.roundaabout.js in the root of your website. –>
<script type=”text/javascript” src=”/jquery.roundabout.js”></script>
<ul id=”carousel”>
<li><span>Block 1</span></li>
<li><span>Block 2</span></li>
<li><span>Block 3</span></li>
<li><span>Block 4</span></li>
<li><span>Block 5</span></li>
</ul>
In all honesty, that’s it! Simple as! You will of course want some styling and the below should help you out:
<style>
ul {
list-style: none;
padding: 0;
margin: 0 auto;
width: 42em;
height: 24em;
}
li {
height: 20em;
width: 30em;
background-color: #ccc;
text-align: center;
cursor: pointer;
}
li.roundabout-in-focus {
cursor: default;
}
span {
display: block;
padding-top: 6em;
}
</style>
To see it in action you can visit:
http://fredhq.com/projects/roundabout/demos/standard

Obviously, you will need to put in a lot more work to style it to suit your site; but once you have the carousel in you are in a great position to customise it.

Anyway – that will have to be all as it’s quite late already and I can’t be bothered to type any more!
Share and Enjoy:
  • Digg
  • del.icio.us
  • Facebook
  • NewsVine
  • Reddit
  • StumbleUpon
  • Google Bookmarks
  • Yahoo! Buzz
  • Twitter
  • Technorati
  • Live
  • LinkedIn
  • MySpace
  • Share/Save/Bookmark

Building a Data Feed Driven Website (with @WebgainsUK Feeds)

Posted on October 19th, 2010 in PHP | 5 Comments »

Part 1: Webgains Data feed Introduction

Where I work (@WebgainsUK), we often have a lot of affiliates contact us that want help with regard to data feeds. Whilst a lot of these queries tend to be technical questions relating to an issue with the feed, or reporting a problem with a merchant’s feed; some of these requests are as technical as asking how to build a site using the data feeds, how to import feeds into the database, or asking how to build a price comparison site. Sadly, as much as Webgains try to help with these sorts of questions wherever possible, it’s simply not possible to offer the in-depth time-consuming answer required due to the nature of the task in hand.

Thankfully, there are tools out there such as Easy Content Units, which allows affiliates to insert content units into their site without requiring any knowledge of data feeds. A plus point of being a Webgains affiliate is that Webgains is partnered with Easy Content Units and as such get the service for free. However, having 3×3, 4×4 or other size grids of products powered by someone else’s website isn’t always what an affiliate wants – some folks want to do their own thing, and know how it works. Also, having products powered by Easy Content Units doesn’t do much for your SEO; you can’t index each individual product, you can’t have an in-built search, you can’t categorise your products, and you’re also relying on their server be up 100% of the time. Throw in a few other excuses for not wanting to use it, and you have a compelling reason why affiliates are asking how to build their own data driven website.

So with that in mind, I figured I’d have a go at providing a solution in the format of a guide, “Building a Data Feed Driven Website”. This guide will come in several parts, I have no idea how many parts it will be, and I have no idea if I will ever finish it. First things first though, let’s set out the objective.

Objective

To build a website that:
> is able to download data feeds from Webgains on a regular basis, so that the prices are always correct.
> can display 1 product per page for SEO reasons.
> has SEO friendly URLs
> can categorise products.
> has a neat search facility.
> has a voucher facility to accompany the products.
> can list the latest offers and promotions from merchants.

For now, that can be the ’simplistic’ objective – we can always add to it later if we desire. Notice how the requirement mentions ‘data feeds from Webgains’; the reason for this is that as a Webgains employee, I feel I have a duty to not help you promote other networks. If by reading my guide, you feel technically inclined to mash the code to allow you to download feeds from other networks then feel free, but don’t ask me how :-)

Tools/Resources/Knowledge Required

Basic understanding of affiliate marketing is a given; you should know what products you want to promote, you should know what a data feed is, you should know why you are reading this, and you should know what it is you want to achieve. It’s probably worth noting that you won’t get very far without a Webgains affiliate account. Signup to Webgains here.

Ultimately, you are going to need access to a server capable of running PHP5 & MySQL5. In terms of getting a server up and running with PHP5 and MySQL5, I’m afraid it is beyond the realm of this guide. However, if you have a spare computer laying around; may I suggest that you install Ubuntu. If you need help with that, Google this: “ubuntu LAMP server”. Failing that, you could always try a webhost like Fasthosts.

In addtion, you will need a decent text editor (Notepad++, or EditPlus[I use this]) and a willingness to learn. As this guide is meant to be a resource to those who already have a basic understanding of PHP & MySQL, you will have to ‘catch up’ where necessary. If possible, I’ll try to give, ‘beginners guide tips’ – but the ultimate goal is for you to reach the objective, so maybe a twitter account will be required so you can ask me questions: @bobbyjason.

Notes

Due to the nature of complexities of this project (it’s not such a small project after all), I’m going to code the site in sections of how to do each bit. I can’t promise that the final project will involve all the final bits being put together, as each section is meant to be a mini-guide in it’s own right. Again, throw any questions my way: @bobbyjason.

Getting Started

The most obvious place to start, is at the heart of the problem; data feeds. If you knew how to work with data feeds, and you knew how to load them into a database – you probably wouldn’t be reading this guide, so it is for that reason I have decided to start here. For the sake of brevity, I’m not going to explain in detail the difference between downloading a datafeed directly, and downloading a feed via a URL. In short, for our objective we want to download the feed via a URL as this will allow our website to be automated.

So, head over to the “Data feed url generator” and select the “xml” option, rather than “csv”. XML is a much more structured approach, and it makes life much easier where trying to find a problem when things go wrong – plus, I prefer working with XML and its MY guide! Select the “.gz” option – this is the only option that allows you to download a compressed feed immediatly. “.zip”, and “.tar.gz” required you to hang around a little – not so good. Select ONE of the programs, not all – but ONE. You can then select ‘All’ at the categories option, and select the ‘exended’ fields option. Finally, enter your username and password, and grab the URL – you should something that looks similar to this:

http://content.webgains.com/affiliates/datafeed.html?action=download&campaign=12345&username=username@website.com&password=password&format=xml&zipformat=gzip_notar&fields=extended&programs=1234&categories=all

If you have a URL like the one above (with the correct username and password), you should be able paste it into your browser and download a .gz compressed feed of the program you selected. Notice how you can replace the “programs” parameter with any other program ID to download a feed for a different program. Straight away you should be able to see the logic required here; we need to create a PHP script that can loop through each of the programs’ feeds that we wish to download, and enter the correct program ID. In psuedo form, here it is:

foreach program
….download feed for this program
end foreach

Of course, in reality we don’t want to just download the feed, we also want to take the data out of it and populate our database, but I figured baby steps would be best as not every one will understand that just yet. So let’s get sizzling. Glancing at the clock I can see that it is 18/10/2010 22:17 – this means that I am missing the last episode of The Inbetweeners which is rather upsetting. Thankfully we have 4OD in this modern world, so I’ll create this script and then head off to bed!

<?php /* lesson1.php */

error_reporting(E_ALL|E_STRICT);
ini_set('display_errors', true);

// Create an array of the programs that we want to download
$programs = array(4084, 116);

print "Starting...\n";

// PHP foreach loop.
foreach ($programs as $program_id)
{
 // Use the "sprintf" function to pass the correct values to the string.
 // Also, splitting up the string to avoid long lines of code.
 $feed_url = sprintf('http://content.webgains.com/affiliates/datafeed.html?'.
 'action=download&campaign=%s&username=%s&password=%s'.
 '&format=xml&zipformat=gzip_notar&fields=extended'.
 '&programs=%d&categories=all',
12345, 'USERNAME', 'PASSWORD',$program_id);

 // Set the path of where you would like to save the file.
 $file = '/home/chops/xml/guide/feeds/'.$program_id.'.xml';
 $compressed = $file.'.gz';

 // Download the file (requires function, 'curl_get_file_contents'
 $data = curl_get_file_contents($feed_url);

 // Open the file for writing, write, and close the file.
 $fp = fopen($compressed, 'w+');
 fwrite($fp, $data);
 fclose($fp);

 // Call the a UNIX command to unzip the file, and move it to our desired location.
 shell_exec("gunzip -c $compressed > $file");

}

print "Done.\n";

// Function to download a file.
function curl_get_file_contents($url)
{
 // Output something so we know it's working.
 print "Downloading '".$url."'\n";
 flush();

 $c = curl_init();
 curl_setopt($c, CURLOPT_RETURNTRANSFER, 1);
 curl_setopt($c, CURLOPT_URL, $url);
 curl_setopt($c, CURLOPT_CONNECTTIMEOUT, 5000);
 curl_setopt($c, CURLOPT_TIMEOUT, 10000);
 $contents = curl_exec($c);
 curl_close($c);

 return $contents;
}
?>

You can copy that code into a text document, save it as ‘lesson1.php’ (be sure to replace username, password and campaignid with your values!). You can call the script directly in a browser if you wish, personally I shall use the terminal. The files will be downloaded to the specified location. Note: If there are any PHP Gurus out there, you will notice that this code may not be the most complex, but I’m trying to keep it simple for those that may not be so familiar with PHP.

All the script does is:
> loop through our selected programs.
> downloads the compressed feed.
> extracts the compressed file with the name of {program_id}.xml

For now that will have to do, because I want to publish this blog post and go to bed. I hope it’s useful to somebody!

Coming up: How to parse the XML files and insert the products into a database.

Share and Enjoy:
  • Digg
  • del.icio.us
  • Facebook
  • NewsVine
  • Reddit
  • StumbleUpon
  • Google Bookmarks
  • Yahoo! Buzz
  • Twitter
  • Technorati
  • Live
  • LinkedIn
  • MySpace
  • Share/Save/Bookmark

Apple or Android / Apple or Microsoft

Posted on August 31st, 2010 in Advice / Tips | 2 Comments »

With it being over 6 months since my last blog post, I figured I’d stick another post in. This time I’m looking for your opinion on whether I should stick with my current setup (below) or move to a new setup!

My Current Setup (Got a problem with Dell? Well it’s never failed for me!)

Desktop: Dell Dimension 9200 Tower w/19″ Widescreen (Windows 7 Ultimate)
Laptop: Dell Inspiron 1545 w/15.6″ Widescreen (Windows 7 Ultimate)
Phone: Google Nexus One (Froyo AKA Anroid2.2)

I’ll start with my Dekstop: I bought it in June 2007 as I needed a “super-fast” computer for working with .NET and the Silverlight Framework in my new job – as it happens I decided to focus my ‘career’ down the PHP route, so I’ve never really utilsed the power. Naturally though, this meant that it was always meant to be a Windows-based PC, and it came with Vista (which I have since upgraded to Windows 7). I’ve played with Ubuntu before, and I like it – but I have too many applications that I cannot get to work correctly within it (Photoshop, Fireworks, Flash etc). So, I’m using Windows 7 – and it’s great (no, seriously, it is!)

It’s pretty much the same story with my laptop.

Roll forward to April 2009, and I bought my shiny Apple iPhone 3G – I gave my iPod Nano away, and loaded all my music onto the phone. The iPhone was Awesome, but that didn’t stop me buying a Google Nexus One (January 2010). Why? Because I love Google! After using both, I can definately say that the Android device offers much more than the iPhone 3G, and that I know I made the right decision.

I now use Dropbox to syncronise my Desktop with my Laptop, and also have the Dropbox App on my phone. So everything is perfect, it’s all good – but I want something new and shiny to play with, like an iPhone 4, and an MacBook Pro…

Can someone convince me that I’m being stupid, or persuade me enough to go out and buy one…?!

Share and Enjoy:
  • Digg
  • del.icio.us
  • Facebook
  • NewsVine
  • Reddit
  • StumbleUpon
  • Google Bookmarks
  • Yahoo! Buzz
  • Twitter
  • Technorati
  • Live
  • LinkedIn
  • MySpace
  • Share/Save/Bookmark

Testing Wordpress Plugin

Posted on February 25th, 2010 in Uncategorized | No Comments »



Subscribe to my Email Newsletter.

Share and Enjoy:
  • Digg
  • del.icio.us
  • Facebook
  • NewsVine
  • Reddit
  • StumbleUpon
  • Google Bookmarks
  • Yahoo! Buzz
  • Twitter
  • Technorati
  • Live
  • LinkedIn
  • MySpace
  • Share/Save/Bookmark

Apple Box – Nexus One Dock

Posted on February 4th, 2010 in Tutorials | No Comments »

What better way to make a Nexus One dock than ro recycle?

After selling my iPhone, I still had the box. It seemed silly to bin the box so I used to help make a dock for my Nexus One!

The two boxes

The two boxes

Nexus Fitting

Nexus Fitting

Cut a hole for the power cable

Cut a hole for the power cable

Stick it down!

Stick it down!

Cable attached - notice the angle of the nexus box- excellent!

Cable attached - notice the angle of the nexus box- excellent!

Hack away at the iPhone box...

Hack away at the iPhone box...

Stick the nexus card to the inner iPhone sleeve

Stick the nexus card to the inner iPhone sleeve

Shoved it into the outer iPhone sleeve

Shoved it into the outer iPhone sleeve

Pop the Nexus One into the DOCK!

Pop the Nexus One into the DOCK!

Beautiful, just... beautiful. Sorry for the smudge marks..

Beautiful, just... beautiful. Sorry for the smudge marks..

I love it..!

I love it..!

So there you have it…

…if you have a spare iPhone case laying around now you know what to do with it. :-)

Hope you love my craft skillz. as you can see; it’s probably better that I stick to my Affiliate Marketing & Programming – but I still refuse to pay shipping TWICE to have TWO Google Nexus Docks shipped to the UK !!

o_O

Share and Enjoy:
  • Digg
  • del.icio.us
  • Facebook
  • NewsVine
  • Reddit
  • StumbleUpon
  • Google Bookmarks
  • Yahoo! Buzz
  • Twitter
  • Technorati
  • Live
  • LinkedIn
  • MySpace
  • Share/Save/Bookmark