Introduction: Instructables on Your Website or Blog - UPDATED!

Picture of Instructables on Your Website or Blog - UPDATED!

This Instructable shows you how you can embed a list of links to your Instructables on your website, formatted just like on your profile page. They're updated automatically each time the page is loaded and are sortable by views, rating, recent and name. You can navigate through the pages of your Instructables by clicking the "Prev" and "Next" buttons, or by editing the "offset" in the URL.

Your profile page is fetched using PHP and the links and pictures scraped out of the html code from Instructables. These are then rearranged to look like the standard Instructables layout, your visitors clicking on them will take them straight to your Instructable.

All images are "hot linked", so there's no impact on your web server storage or bandwidth. All of this is done with the kind permission of Eric.

A list of some of the sites that have successfully installed this so far:
redtorope.com/instructables (mine)
gmjhowe.com/tutorials


A full list of users that have used it successfully will be added to the last step and updated when I learn of new uptakes.

Many thanks to gmjhowe for helping me write the HTML and CSS used to make the results the PHP finds look pretty and for taking great photos for this Ible.

I have previously fetched web pages with Perl; this is my first attempt with PHP. A list of resources in the last step shows the websites that I used to learn how to do this, all of these were invaluable.

Step 1: How It Works

Picture of How It Works
This step isn't important if you just want to use the code and be done with it, it's just for interest.

The code works in these steps:
  1. The PHP uses the $_GET function to get the information stored in the offset and sort variable in the URL, just like it does on Instructables.
  2. A URL for the Instructables page to be fetched is constructed from the variables $sort, $offset and $username. Depending on the user to be displayed, the sort method to be used and the number to offset by, it may look something like this: https://www.instructables.com/member/Jayefuu/?show=INSTRUCTABLES&sort=NAME&limit=15&offset=15
  3. The Instructables page constructed in step 2 is fetching using the PHP function curl() and stored in the variable $html.
  4. A list of links replicate the "sort by" function included in Instructables. Clicking these takes users to the same page, but changes the "sort=NAME" part of the URL.  The current sort method isn't a link, it's in bold.
  5. A regular expression is used to determine whether there is a next or previous button on the page fetched. These are then printed to the screen.
  6. One massive regular expression is used to find the 15 Instructables on the page. Their titles, URLS, title image thumbnails and featured status are stored in an array.
  7. A piece of code iterates through the array and prints html to the screen. This is what is displayed by your browser, not the PHP, which is executed on the server.

Step 2: Installation

Picture of Installation
The basic code to get this working can be inserted into almost any web page. To do this you'll need a basic knowledge of HTML and CSS. The chances are that if you've got your own webpage you know this much, the hard(er) bit, the PHP, is done for you.

A note to those who've never used PHP before:
Most people designing and maintaining their own web pages write it in HTML and CSS. Each page is updated by hand, and the content for that page always remains the same. This is known as a static web page. The use of a scripting language like PHP means that web pages can become dynamic, loading content that depends on inputs from the user. This is one such example of a dynamic web page, in that the Instructables fetched depend upon the options selected by the person visiting your website. Most people maintaining a website update their pages offline, view them offline in their browser, and then if they're happy with them they upload them to their server. When using PHP, you'll first need to install Apache, which lets you run PHP on your PC as localhost. I recommend getting XAMPP, which will let you load pages ending in .php. Without this, your web browser will just load a bunch of code, it'll look like junk.

Follow these steps to install it on your own website. It's probable that you'll need to edit the CSS to get it to look right.
  1. Download and extract the included files.
  2. index.php is the file containing the PHP to fetch the instructables. Merge it into a page of your website. If your website is static HTML (page.html), you'll need to rename it to be a PHP file (page.php). If this is your first foray into using PHP, W3 schools have some good tutorials which will let you understand enough to use this Instructable.
  3. Add the included CSS file to the headers of your web page and upload it to your web server.
  4. In the PHP, find the variable named $username and change it from "Jayefuu" to your username. Of course, I'm more than happy for you to display my Instructables on your site and send me lots of traffic, but that would defeat the point, right? If your username is not just plain text and has spaces or funny characters, visit your profile page on Instructables and copy and paste the last bit into the variable. An example is given for user "=SMART=" in the image for this step.
  5. At this point, if you upload your embedded Instructables page to your website, it should at least fetch you some data and display it. It may be really ugly, misaligned or have any number of weird bugs, but the data you need will be there. At this point it'll be up to you to tweak the CSS and HTML I've included to suit your website. I can't stress enough how important Firebug is. An extension to Firefox, it'll let you analyse your HTML and CSS and edit it IN BROWSER without re-uploading after each change. It makes it much easier to find mistakes and much quicker to find out what you need to do to correct them. I'm more than happy to help people out in the comments if they're having problems, but please install Firebug first and have a go.

Step 3: Installation - Wordpress

Picture of Installation - Wordpress
Installing for Wordpress is a little bit more complicated that for a normal website. A lot of the things done by Wordpress mess up how it works. If you have a blog hosted by wordpress, not on your own web server, you won't be able to get the next and previous buttons working, since they require modification of the wordpress installation files. If you do have your own hosting, then follow these steps and you should be able to get it working easily:
  1. Download the code attached to this step
  2. Upload the CSS file to your web server after changing the .txt extension to .css
  3. Add the plugin Exec-PHP to your plugins list. This lets you write pages or posts on Wordpress that include PHP.
  4. Add the code from the included file "post_modifications.txt" to the end of the file "post.php" in your Wordpress installation. It can be found in www.yourdomain.com/yourbloglocation/wp-includes/. Please make a backup copy first! Adding this code lets the Exec-PHP plugin use the $_GET function to fetch the variables from the URL of your page. Without this the navigation buttons won't work and you'll be stuck with one page. I tried using the Wordpress plugin Get-Getter, but I couldn't get it to work inside Exec-PHP, so I wrote my own function.
  5. Add the code from embed_ibles.txt to your page or post. Remember to change the URL of the CSS file to the correct location or the page will look like nonsense. You'll also need to hunt down the $username variable near the top of the code and change it from Jayefuu to your username.
I found that sometimes Wordpress's CSS classes overwrote those of the code I had written. Using the !important tag solved this. I used Firebug to look at what classes were being applied to each part.

While changing Wordpress' post.php file or writing this inside a page instead of a plugin may not be recommended, it works well for now. I didn't want to get into writing Wordpress Plugins just to release this ible, but it may be something that I will do in the future to make this more accessible to more people.

Step 4: Uptake, References & Requests

Picture of Uptake, References & Requests

Uptake:
A list of the places you can see the script in action:


References/Resources:
A list of the places that I visited to learn the extra PHP necessary to write this script.

- PHP scraping tutorial with Curl() (link)
- PHP regular expressions and web scraping (link)
- Thanks to NachoMahma for his encouragement and help looking through Instructables to work out how their HTML/CSS works.


Suggestions:
Got an idea of how it can be improved? Want help with it on your blog or website? Please leave a comment, I'll help if I can.

Comments

MillennialDIYer (author)2017-10-30

Can anyone confirm that this still works?

MichealW7 (author)2016-05-24

That was beautiful you shared the great post with us, I'm really glad to see this type of info thank you so much for sharing this positive and interested post between us doing excellent work keep it up. If here anyone interested to visit this site http://www.excellentacademichelp.com/thesis-writing/ to solve his or her problems which you are faced in your academic carrier then visit it's help you to solve your problem which you are faced in you academic carrier.

SFXC (author)2016-05-17

Can somebody please help me do this. I don't mind paying. I have tried to take this on but have hit a dead end....

SFXC (author)SFXC2016-05-17

I would like to add this to the blog on www.sfxc.co.uk

ForeprimeSeo (author)2016-04-04

Actually good tips, thanks.

ronaktoshniwal13 (author)2016-03-28

Wow this is a nice idea.

http://www.awesomehowto.com/

this is my website can you suggest what type of post I can show? anyone please suggest me and to this have filters to only post speficif posts?

Ingenerare (author)2016-02-29

it looks like non of the reference websites is working:

Some html/css/php geek that can help me out? I realy want to try this on my website: www.vincentverheggen.nl

Computothought (author)2011-12-30

In Wordpress 3.3. I had to add the unfilter plug-in for it to work. Since it is on a private server it will not be that big of deal.

zieak (author)2011-01-03

I finally got it working on my site. I have a self-hosted wordpress setup. I had to take the code from step 3.4 and put it into the page text (I put it at the beginning.)

I banged up some of the code in other places on my site so need to go fix that...

Thank you so much for this!

Jayefuu (author)zieak2011-09-18

Hi zieak. I visited your website, you need to update to the new code since HQ changed the HTML on profile pages. It's just a couple of lines around the regex to hunt the names/images.

Jayefuu (author)zieak2011-01-03

I added a link and a screen shot to the last step.

Jayefuu (author)zieak2011-01-03

Nice! Glad it works, thanks.

killerjackalope (author)2011-01-02

I wonder is there a decent way to pull the profile card, with all the info on it on to a site... Going to experiment but any suggestions or help would be awesome...

Jayefuu (author)killerjackalope2011-01-04

Would be pretty easy to be honest. You could snip some of the code out of my script if you wanted to do it yourself. Or wait til the weekend and I'll do it for you, it's a good idea and quite interesting :D

If you do do it yourself this page will help:
https://www.instructables.com/member/Jayefuu/statscard

killerjackalope (author)Jayefuu2011-01-04

Awesome, I'll have to take a crack at it, didn't know about that little page trick...

When's the next views count by the way? Not far from 1M now...

AngryRedhead (author)2010-12-16

I want it to work on Blogger. Baaaaaaah! Is there a way to run the script and have it spit out the HTML? It'll mean manually updating with each new Instructable, but it could be a real time saver for retrieving info. Or it could just be a stupid idea. :-P

Jayefuu (author)AngryRedhead2010-12-16

I think you'll probably have the same problem as jen7714. Since you don't pay for your hosting, blogger don't give you the power to do as much as someone that does host their blog on their own hosting. It could probably be made to work for blogger, I can't imagine why not, but I don't think you'll have the access or privileges required to do so on a .blogspot.com blog.

killerjackalope (author)Jayefuu2011-01-02

On a side note to that a huge number of free hosts will allow you to use various extra languages you just have to enable them on your profile, never used blogger personally though.

jen7714 (author)2010-12-08

Ahhh I was getting all excited about getting all my instructables on my blog but them another problem awaits. Apparently, worpress.com (the free one) doesn't allow plugins.

Any way to work around that?

Jayefuu (author)jen77142010-12-09

Oh no.

I can't think of a way around that, sorry. You could have a static version, but that wouldn't be as fun :)

jen7714 (author)Jayefuu2010-12-09

Blehh. :( But a static version might be better than nothing. Or I'll just link...

thedod (author)2010-12-09

In order to make it work, I had to install php5-curl: (sudo apt-get install php5-curl on ubuntu/debian), and it stil didn't work until I've added to php.ini the line extension=php_curl.so.
Works now, though :)

thedod (author)thedod2010-12-09

Spoke to soon: the video play button has src="/static/img/playVideo_huge.png" (i.e. on my own server) and comes out broken :(

Jayefuu (author)thedod2010-12-09

Videos! I forgot about videos! I don't have any so I didn't think to do it. Will update it tonight when I get home. It's a problem in the regular expression line that sorts all 15 ibles from the HTML.

Thanks.

Care to add a link to your site here?

thedod (author)Jayefuu2010-12-09

It's actually localhost, but when I do a facelift to http://zzzen.com I'm thinking of using this

Jayefuu (author)thedod2010-12-09

Ahhh brilliant. Glad you got it working locally. I forgot that I had to uncomment that line in php.ini.

NachoMahma (author)2010-12-08

.  Fantastic!


And you mentioned me! Woot!!

About This Instructable

5,329views

41favorites

License:

More by Jayefuu:Beech Tray for Salt & Pepper MillOmas Grünes Tomaten ChutneyDisabling Contactless Payment on Debit Cards
Add instructable to: