Introduction: Display Your Instructables on a Wordpress or PHP Based Page

Ever want to have a listing of your Instrucatbles on a webpage like what is displayed on your profile? I tried several WordPress plugins but came up with nothing so I wrote/came up with a solution.

(UPDATE)

I have written a Plugin for WordPress to do this http://wordpress.org/plugins/instructables/. I have a new instructable for that located here https://www.instructables.com/id/Instructables-Wordpress-Plugin/I would love feedback from you guys.


In this Instructable I show you how to accomplish this in WordPress and in a simple php based page. You can see a working example here http://mrb.mickred.com/redbeard-on-instructables-com/

Step 1: Checklist

I know it's a short list but seriously you don't need much.

You will need the following:
A WordPress site with the "Exec-PHP" plugin installed, simple PHP page or other content manager that allows php code.
An Instructables profile with at least one Instructable written, note your username.

Step 2: In Wordpress

As stated before you will need the Exec-PHP plugin installed on WordPress for this to work.

Create a new Page then click "Text" as shown in the image below.

Paste in the following code then change "MrRedBeard" to your username in the $url variable.

<?php
$url = "https://www.instructables.com/member/MrRedBeard/rss.xml?show=instructable";
$feed = simplexml_load_file($url);
   $feed_array = array();
   foreach($feed->channel->item as $item)
   {
      echo "<div style='float:left; width:200px; height:300px; margin-right:15px; text-align:center;'>";
         echo "<a href='" . $item->link . "' target='_blank'>";
         if(strpos($item->imageThumb,"com"))
         {
            echo "<img src='" . $item->imageThumb . "' />";
         }
         else
         {
            echo "<img src='https://www.instructables.com" . $item->imageThumb . "' />";
         }
      echo "<br />" . $item->title . "</a></div>";
   }
echo "<div style='clear: both;'>&nbsp;</div>"
?>

Page built using this Instructable <a href="https://www.instructables.com/id/Display-your-Instructables-on-a-Wordpress-or-PHP-b/" target="_blank">https://www.instructables.com/id/Display-your-Instructables-on-a-Wordpress-or-PHP-b/</a>

Step 3: Simple PHP Page

You can either add the code to an existing page (minus <?php ...this... ?>) or create an entirely new php file using a simple text editor. Change "MrRedBeard" in the $url variable to your username. Once created you can upload this file to your website.

<?php
$url = "https://www.instructables.com/member/MrRedBeard/rss.xml?show=instructable";
$feed = simplexml_load_file($url);
   $feed_array = array();
   foreach($feed->channel->item as $item)
   {
      echo "<div style='float:left; width:200px; height:300px; margin-right:15px; text-align:center;'>";
         echo "<a href='" . $item->link . "' target='_blank'>";
         if(strpos($item->imageThumb,"com"))
         {
            echo "<img src='" . $item->imageThumb . "' />";
         }
         else
         {
            echo "<img src='https://www.instructables.com" . $item->imageThumb . "' />";
         }
      echo "<br />" . $item->title . "</a></div>";
   }
echo "<div style='clear: both;'>&nbsp;</div>"
?>

Page built using this Instructable <a href="https://www.instructables.com/id/Display-your-Instructables-on-a-Wordpress-or-PHP-b/" target="_blank">https://www.instructables.com/id/Display-your-Instructables-on-a-Wordpress-or-PHP-b/</a>

Step 4: Customizations

There more items you can display from the rss feed.  You can add to the code by using $item->"item name" like you see in the below code and referencing the rss feed like in the image below.

There are also other feeds like
https://www.instructables.com/member/MrRedBeard/rss.xml?show=comments
https://www.instructables.com/member/MrRedBeard/rss.xml?show=good (favorites)
https://www.instructables.com/member/MrRedBeard/rss.xml?show=subscriptions (new instructables from your followers)

<?php
$url = "https://www.instructables.com/member/MrRedBeard/rss.xml?show=instructable";
$feed = simplexml_load_file($url);
   $feed_array = array();
   foreach($feed->channel->item as $item)
   {
      echo "<div style='float:left; width:200px; height:300px; margin-right:15px; text-align:center;'>";
         echo "<a href='" . $item->link . "' target='_blank'>";
         if(strpos($item->imageThumb,"com"))
         {
            echo "<img src='" . $item->imageThumb . "' />";
         }
         else
         {
            echo "<img src='https://www.instructables.com" . $item->imageThumb . "' />";
         }
      echo "<br />" . $item->title . "</a></div>";
   }
echo "<div style='clear: both;'>&nbsp;</div>"
?>

Page built using this Instructable <a href="https://www.instructables.com/id/Display-your-Instructables-on-a-Wordpress-or-PHP-b/" target="_blank">https://www.instructables.com/id/Display-your-Instructables-on-a-Wordpress-or-PHP-b/</a>

Step 5: Questions

I hope you find this Instructable helpful. If you need any help just post your question or issue in the comments section and I'll do my best to help you out. 

Updates
First update. If you just published an Instructable it will not show up immediately. Not sure why this is but I will try and note the delay time once it starts to appear. (About 15 minutes after publishing I noticed it showed up)

Second update. Some image paths differ from others, I added code to check for this. I also noticed that the layout looked funny with long titles so I changed the layout a bit.

Comments

author
DeandrasCrafts made it! (author)2014-05-03

MrRedBeard helped me create a page for my instructables! It looks amazing and I am so thankful he posted this and was particularly helpful in helping me get it to work! Thank you so much sir! =)

To Post on Instructables.jpg
author
Baloydi Lloydi made it! (author)2015-03-16

Great stuff and I learned from this

author
DeandrasCrafts made it! (author)2014-04-29

Hi! I am sending you a private message to help me create this....

Thanks so much in advance!

author
MrRedBeard made it! (author)MrRedBeard2014-04-29

Sure! What do you need help with specifically? I have created several ways to consume the RSS feeds and display them on another site.

author
MrRedBeard made it! (author)2013-11-30

Just made another update to the instructable to correct some annoyances.

author
MrRedBeard made it! (author)2013-11-28

Made a correction added height to the div tag so that the layout wouldn't break.

About This Instructable

4,255views

70favorites

License:

Bio: http://twitter.com/Mr_Red_Beard
More by MrRedBeard:Translate Songs to Be Played on Arduinoc# Edge DetectionView State Key Generator
Add instructable to: