In-Page Related Content: Minimizing Cumulative Layout Shift (CLS)

Pre Load

If you are placing an In-Page Shareaholic App above the fold on a webpage, it is good practice to pre-size the app container canvas to eliminate CLS altogether by adding a few lines of CSS in your own site's local CSS stylesheet or in-line to pre-size the height -

In-Page Recommendations Container:

.shareaholic-canvas[data-app="recommendations"] {
   height: 530px;  // Customize height to match your app theme
}

If you have more than one theme of the same app type, you can target pre-sizing CSS code by App ID or App ID Name. App ID and App ID Name are unique for each In-Page App instance under a Site Profile.

For example, for the following In-Page container code:

<div class="shareaholic-canvas"
     data-app="recommendations"
     data-app-id-name="recommendations_post_below_content"
     data-app-id="12345"></div>

You can use the following:

.shareaholic-canvas[data-app-id="12345"] {
   height: 530px;  // Customize height to match your app theme
}

or

.shareaholic-canvas[data-app-id-name="recommendations_post_below_content"] {
   height: 530px;  // Customize height to match your app theme
}

Post Load

It is also possible to target the Related Posts Buttons container of each type. Note that these are available only once Shareaholic has loaded on the page -

Target In-Page Related Content / Recommendations:

.shr-recs-inpage {
   margin-top: 100px;
}

Target Recommendations Bar:

.shr-recs-bar {
   padding: 100px;
}