Create your own inline related posts popup to engage readers...

473 views

Inline related posts are not new. They are related posts that show up in your article while visitors scrolling on your website. It’s a good way to reduce your bounce rate, but it’s not the best. Today you’ll discover a new way to show your related posts: I call it inline related posts popup (or floating bar).

inline related posts popup

You can see my inline related posts popup it in action, by scrolling this whole blog. On mobile device, when you read to a paragraph that I suggest a related post, a floating bar will show up. It will hide if you keep scrolling, until another shows up. If you are on desktop, it will show as a small popup at the bottom of screen.

inline related posts popup 2-min

Why I developed this inline related posts popup?

In the past, I’ve tried many related posts plugins. Some shows related posts at the end of the blog as a list (or even a popup), but nowadays readers won’t have much patience to reach that point. Some shows related posts inline, right below a paragraph, but that not only distract the reader, but alse break the structure of your article.

So I think the best way to show related posts must cover these points :

1 – It must notice readers that this is a related posts to this paragraph.
2 – It won’t distract them or break the structure of your blog.
3 – They can reach the related posts easily, wherever they are.

Because I couldn’t find any related posts plugin that suit my needs like that, so I decided to code my own. Now you can have it, then engage your visitors to read more, and more. Whenever they are, in the middle, or at the end of your blog. Let’s get started!

Create your own inline related posts popup – Step 1 – Create a shortcode that turn your url into a popup or floating bar.

First, we will create a shortcode that enables you to transform an url within your article into a nice popup or floating bar. Just put the below code in your theme functions.php.

function fususu_inline_related_posts_popup($att) {
    extract(shortcode_atts(array(
        'url' => '',
    ), $att));
    $note = 'Just a related post, keep it in your mind...';    
    $id = url_to_postid($url);
    
    if (get_post_status($id) == 'publish' and $id !== 0) { //check if the url exists as a post in your blog
        $name = get_the_title($id);
        $url = get_permalink($id);
        $count_key = 'post_views_count';
        $count = get_post_meta($id, $count_key, true);
        $img = get_the_post_thumbnail_url($id, 'small');
        return '
        <div class="irpp-position-'.$id.'"></div>
        <div class="irpp-content-'.$id.'">
        <a data-view="'.$count.'" class="irpp-link" title="'.$name.'" target="_blank" href="'.$url.'?utm_source=irp">
        <div class="irpp-thumbnail"><img class="logo-post" alt="" src="'.$img.'"></div>
        <div class="irpp-text">
        <div class="irpp-suggest">'.$note.'</div>
        <div class="irpp-title"><i class="fa fa-external-link"></i> '.$name.'</div>
        </div>
        </a>
        </div>
        <script>
        (function($) {
        $(window).scroll(function() {
       var hT = $(".irpp-position-'.$id.'").offset().top,
           hH = $(".irpp-position-'.$id.'").outerHeight(),
           wH = $(window).height(),
           wS = $(this).scrollTop();
       if (wS > (hT+hH-wH) && (hT > wS) && (wS+wH > hT+hH)){
          $(".irpp-content-'.$id.'").fadeIn(1000);
       } else {
          $(".irpp-content-'.$id.'").fadeOut(1000);
       }
      });
       })(jQuery);
     </script>
    '; } else {        
      $slug = trim(parse_url($url, PHP_URL_PATH), '/');
      return '      
      <div class="irpp-position-'.$slug.'"></div>
    <div class="irpp-content-'.$slug.'">
    <a data-view="'.$count.'" class="irpp-link" title="'.$slug.'" target="_blank" href="'.$url.'?utm_source=irp">
    <div class="irpp-thumbnail"><div class="irpp-thumbnail"><img class="logo-post" alt="" src="https://yoursite.com/a_defaut_image_may_be_your_logo.jpg"></div>
    <div class="irpp-text">
    <div class="irpp-suggest">'.$note.'</div>
    <div class="irpp-title"><i class="fa fa-external-link"></i>'.$url.'</div>
    </div>
    </a>
    </div>
    <script>
    (function($) {
    $(window).scroll(function() {
   var hT = $(".irpp-position-'.$slug.'").offset().top,
       hH = $(".irpp-position-'.$slug.'").outerHeight(),
       wH = $(window).height(),
       wS = $(this).scrollTop();
   if (wS > (hT+hH-wH) && (hT > wS) && (wS+wH > hT+hH)){
      $(".irpp-content-'.$slug.'").fadeIn(1000);
   } else {
      $(".irpp-content-'.$slug.'").fadeOut(1000);
   }
  });
   })(jQuery);
 </script>
      ';
    }; 
}
add_shortcode('irpp', 'fususu_inline_related_posts_popup');

Now just open one of your posts, and use this shortcode.

[irpp url="your_url"]

The code will check if your_url is one of your post, it will show thubmnail, title and link to that post. If not, it will show your default image, and the url itself. You can put as many shortcodes as you like. Of course, to make it floating like mine, we need a “little” CSS.

Create your own inline related posts popup – Step 2 – Make it looks better by a little CSS

.irpp-thumbnail .logo-post {
    zoom: 0.7;
}

.irpp-title,
.irpp-suggest {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: 0.9em;
}

div[class*='irpp-content-'] {
    position: fixed;
    left: 30%;
    bottom: 0px;
    width: 40%;
    display: none;
    background-color: rgba(0, 0, 0, 0.8);
    z-index: 999;
    padding: 0px 0 0 10px;
    ;
    border-radius: 10px 10px 0 0;
}

div[class*='irpp-content-'] a {
    color: white !important;
    font-size: 0.9em;
}

.irpp-suggest {
    color: white;
    font-size: 0.9em;
    color: lightgray;
}

.irpp-thumbnail {
    float: left;
    margin-right: 10px;
    max-width: 80px;
}

@media screen and (max-width:1024px) {
    div[class*='irpp-content-'] {
        left: 0px;
        bottom: 0px;
        width: 100%;
        padding: 5px;
        border-radius: 0px;
    }

    .irpp-thumbnail {
        max-width: 60px;
        margin-top: 3px;
    }

    .irpp-text {
        width: 90%;
    }
}

Now just put some irpp shortcodes in your post, then scrolling from to the end to see the miracle.

But it’s not finish yet. Your lazy readers normally won’t scroll back to see the related posts that has shown to them, so we need a list of related posts at the end.

How to get all irpp link within your post? And put it at the end? Thanks to Javascript!

inline related posts popup 2-min

Create your own inline related posts popup – Step 3 – Make a list of your related posts within your post and show it at the bottom.

First we need a div to fill the links that will be gathered by Javascript later. Put it in your single.php template, a proper position should be right above the comments sections.


    <div style="font-weight:bold;font-size:1em;display:none;" id="awesome">
     <p>You're awesome to reach here! Now what?</p>
	 <div id="read-more-posts" style="display:none;">
                        <div id="read-more-post" class="more-post" style="font-size: 0.9em!important;">
                        </div>
                    </div>	         
     </div>

Now put this javascript at the footer to check if there are irpp links in the posts then gather them at the bottom.


<script>
/* list all irpp link and remove duplicate if have one */
if (jQuery('.irpp-link').length > 0) {
    if (jQuery("#read-more-posts")[0]) {
        document.getElementById('awesome').style.display = 'block';
        var morep = document.getElementById('read-more-posts');
        morep.style.display = 'block';
        var more = document.getElementById('read-more-post');
        var i = 0;
        var links = [];
        jQuery('.irpp-link').each(function() {
            var href = jQuery(this).attr('href');
            var title = jQuery(this).attr('title');
            var views = jQuery(this).attr('data-view');
            links[i] = ' ' + title + ' ( ' + views + ' views)
'; i++; }) // remove duplicates url if have one var uLinks = []; jQuery.each(links, function(i, el) { if (jQuery.inArray(el, uLinks) === -1) uLinks.push(el); }); //show the links at the ends for (let i = 0; i < uLinks.length; i++) { more.innerHTML += uLinks[i]; } } } </script>

Note: Of course, with this method, you must setup your own related posts within each posts. But believe me, that’s worth! Because no one, or no plugin, can detect perfect related post better then you, as the author!

That’s how I made my own inline related posts popup, now is yours, totally free! Just try and let me know if it works on your site!

TREASURE CHEST

!!!



You can wait for to get the hidden content, or just share to see it now. Sharing is the key to succeed!

UNLOCK NOW!



Have a good day!

FuSuSu wrote 14/10/2019. Updated 14/10/2019. In .

P.s. To motivate me, you can just google this keyword inline related posts popup, find my blog there then comment the position. Thank you so much!

Leave a Reply

Your email address will not be published. Required fields are marked *