How to open all external links in an iframe, automatically?

Discussion in 'WordPress' started by Lorelei, Jan 23, 2011.

  1. #1
    does anyone know of a script that will allow me to open any external links (or at least those within the loop) in an iframe, like photoshoplady.com has, when you click on a certain tut, or digg.com?

    As I am using wordpress, it would need to be something automated, and not just the regular html iframe code, which i'll have to build for each and every link.

    I'd really appreciate any piece of advice, i just brushed over all the plugins in wordpress, nothing that will do the job.
     
    Lorelei, Jan 23, 2011 IP
  2. Dodger

    Dodger Peon

    Messages:
    1,494
    Likes Received:
    60
    Best Answers:
    0
    Trophy Points:
    0
    #2
    It is fairly simple to do. Well, maybe moderately hard.

    You need to define a Post Category for the tut and create single-categoryname.php theme file for it, where all of your tuts will use this special single template when you select that category.

    The basic single-categoryname.php file will look something like this:

    
    <?php 
    /*
     * Single Post template for the Tuts category
     *
     */
    
    	if (have_posts()) {
    		while (have_posts()) { 
    			the_post();
    			$story_title = the_title( '', '', false );
    			$story_tag_list = get_the_tag_list('', ', ', '');
    			$story_description = get_the_excerpt();
    			$post_url = get_permalink( $post->ID );
    			$target_url = get_post_meta( $post->ID, 'target_url', true);
    		}
    	}
    	else {
    		$story_title = 'Tut Item Not Found';
    		$story_description = 'The tutorial you requested could not be found.';
    		$target_url = bloginfo( 'home_url' ) . '/categoryname';
    	}
    	
    ?>
    
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    <head>
    	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    
    	<title><?php echo $story_title; ?></title>
    	<meta name="description" content="<?php echo $story_description; ?>">
    	<meta name="keywords" content="<?php echo $story_keywords; ?>" />
    
    	<!-- <link href="http://yourdomain.com/favicon.ico" rel="shortcut icon" type="image/x-icon" /> -->
    	
    	<link rel="stylesheet" href="<?php bloginfo('template_directory'); ?>/css/tutframe.css" type="text/css" media="screen" />
    </head>
    
    <body>
    	<div id="bar" class="m">
    
    	    <div id="info">
    			<a class="user" href="<?php bloginfo('url'); ?>"><img src="<?php bloginfo('template_directory'); ?>/images/bar-logo.png" width="82" height="31" /></a> 	
    			<?php if(is_user_logged_in()) : ?>
    			&nbsp;|&nbsp;<a class="icon edit" href="<?php bloginfo('wpurl') ?>/wp-admin/post.php?post=<?php echo $post->ID; ?>&action=edit">Edit</a>
    			<?php endif; ?>
    			
    		</div>
    
    	    <div id="tools">
    	    	<a class="icon fb" href="http://www.facebook.com/share.php?v=4&src=bm&u=<?php echo $post_url; ?>&t=<?php echo $story_title; ?>" target="_blank"><span class="m ico"></span>Post on Facebook<span class="m spc"></span></a>
    	    	<a class="icon email" href="mailto:?subject=<?php echo $story_title; ?>&body=I found this on YourDomain and thought you would like it! <?php echo $post_url ?>"><span class="m ico"></span>Email to Friend<span class="m spc"></span></a>
    			
    
    	    </div>
    
    	</div>
    
    	
    	<iframe frameborder="0"  src="<?php echo $target_url; ?>" noresize="noresize" name="targetFrame" id="targetFrame" ></iframe>
    	
    
    <?php
    
    
    
    </body>
    </html>
    
    
    Code (markup):
    When you make a post, and if you look closely at the code above, you will need to add a meta option called 'target_url'. This will signal the template to insert that page into your iFrame.

    The CSS file will set a fixed box at the top of the page that does not scroll and scrollable iFrame below it:

    #bar{width:100%;min-width:950px;height:31px;overflow:hidden;z-index:100;position:absolute;top:0;left:0;}
    iframe#targetFrame{width:100%;height:100%;z-index:10;}
    
    
    Code (markup):
    These are just the basics. Obviously there is much more that can be done to refine and improve upon it. It is not something that you can just throw together and will require somebody to design and implement it for you.

    It will require some javascript also. For instance, the X that closes the bar is handled via javascript.

    I would like to say that this is not theoretical. I have done this before and you can see it in action on this news roundup page. Click on any news item to see it go into action.

    If you need something custom built for your needs, I am available for the next couple of weeks.
     
    Dodger, Jan 23, 2011 IP
  3. gregman

    gregman Peon

    Messages:
    104
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #3
    this is really tuff especially for those who don't know bit more about coding.. is there any wealthy plugin like that which does the job automatically?
     
    gregman, Aug 26, 2011 IP