loading

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.
<p>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! =)</p>
<p>Great stuff and I learned from this</p>
<p>Hi! I am sending you a private message to help me create this....</p><p>Thanks so much in advance!</p>
Sure! What do you need help with specifically? I have created several ways to consume the RSS feeds and display them on another site.
Just made another update to the instructable to correct some annoyances.
Made a correction added height to the div tag so that the layout wouldn't break.

About This Instructable

4,235views

70favorites

License:

Bio: http://twitter.com/Mr_Red_Beard
More by MrRedBeard:c# Edge Detection View State Key Generator Convert Decimal to Binary and Vice Versa 
Add instructable to: