Whether you're using our iframe or JS implementation we have a solution for direct links to a post with Live Center.
But first, let's analyze our options...
-
Direct linking through JS implementation
Using this implementation, you have more control over where you want to put the linked or highlighted post. You would also get to explore one of Live Center's many convenience functions and more. For more information on how to implement Live Center through JS read it here. -
Direct linking as an extension
If you are only interested in our iframe, this implementation suits you best. We inject the linked post at the top and it's as easy as plug and play.
☝️ Direct linking through JS implementation
First, we start off with our good ol' script to run our feed.
NcPosts.start({
channelId: testmathilde,
container: document.getElementById("master-container"),
showMoreElement: document.getElementById("load-more"),
tenantKey: 22317
});
You need your Channel ID and Tenant Key here very important! Here are some notes on how you'll find these properties
Second, we need a function that handles the URL so you could share the post and the rendering script. Don't fret, it's all perfectly coupled puzzle pieces 🙌
URL handler script: Here is a sample of a URL handler.
This handles the URL of a post, as you can see, you can format the URL based on your needs and requirements. (You can make your own or just copy this script)
var EventsUrlHandling = (function () {
function EventsUrlHandling() {}
EventsUrlHandling.createPostUrlSearch = function (postId) {
return "?p=lc-" + postId;
};
EventsUrlHandling.getUrlVars = function () {
var params = {};
if (location.search) {
var parts = location.search.substring(1).split('&');
for (var i = 0; i < parts.length; i++) {
var nv = parts[i].split('=');
if (!nv[0]) continue;
params[nv[0]] = nv[1] || true;
}
}
return params;
};
EventsUrlHandling.getLinkedPostIdFromUrl = function () {
try {
var str = EventsUrlHandling.getUrlVars().p;
//the format of our URL, you can change it if you want: ?p=lc-{postId]-{channelId}
if (str && str.substring(0, 3) === "lc-") {
var parsed = parseInt(str.split('-')[1]);
if (!isNaN(parsed)) {
return parsed;
}
}
} catch (e) {
console.log('error')
}
return null;
};
EventsUrlHandling.channelId = null;
return EventsUrlHandling;
}());
Rendering script: Here is a sample of a post renderer in Live Center.
We are trying to render a link element in the timestamp containing the post URL. (Again, you can make your own else, you can just copy this one)
var PostIdRenderer = (function () {
function PostIdRenderer() {
PostIdRenderer.prototype.shouldRun = function () {
return true;
}
PostIdRenderer.prototype.updateElement = function (state, postData, element, container) {
if (state.executed || postData._pinned)
return;
state.executed = true;
const node = document.createElement("div");
//this scripting is NcHtml, pretty straightforward!
node.appendChild(NcHtml.create("a", {
_onclick: () => {
EventsUrlHandling.createPostUrlSearch(postData.id)
},
href: window.location.search.split('?')[0] + EventsUrlHandling.createPostUrlSearch(postData.id),
_html: 'link', //this is innerHtml
style: 'margin-left: 5px;'
}));
var header = container.getElementsByClassName("ncpost-timestamp")[0];
header.appendChild(node);
return null;
};
}
return PostIdRenderer;
}());
And if we would put it together in your HTML file, it would result in this. Go ahead and try! 😀
<link href="https://livecenter.norkon.net/scripts/ncposts/ncposts-6.1.1.min.css" rel="stylesheet" />
<body class="lc-default-theme" style="background: #eee; position: relative;">
<div class="lc-feed-container">
// we need a container element for the linked post. You can place it wherever you want
<div id="linked-post"></div>
<div id="master-container"></div>
<div style="text-align: center">
<button class="lc-load-more" id="lc-load-more">Load more</button>
</div>
</div>
<script src="https://livecenter.norkon.net/scripts/ncposts/ncposts-6.1.1.min.js"></script>
<script>
[INSERT THE URL HANDLER SCRIPT]
[INSERT THE RENDERER SCRIPT]
var feedControl = NcPosts.start({
channelId: 22317,
container: document.getElementById("master-container"),
showMoreElement: document.getElementById("load-more"),
tenantKey: "testmathilde",
//YOU HAVE TO DECLARE THAT YOU ARE ADDING AN EXTRA RENDERER
extraPostRenderers: [new PostIdRenderer()]
});
const requestedPostId = EventsUrlHandling.getLinkedPostIdFromUrl();
//Request the specified post
feedControl.bulletinProvider.getBulletin(requestedPostId, feedControl.channelId).then(function (d) {
//Create a post to control the rendering of a post.
var linkedPost = feedControl.listManager.postFactory(requestedPostId);
//Update the post with the content received
linkedPost.update(d);
//Insert the linked post where you see fit
document.getElementById("linked-post").appendChild(linkedPost.postContainer);
});
</script>
</body>
✌️ Direct linking as an extension
This is a perfect solution if you don't wanna go through all the scripting and all. Still this script can be modified by yourself and mold it based on your requirements.
Where will you paste it? https://livecenter.norkon.net/LiveCenter/#!/Extensions/
- Add new extension
- Select public Library and paste the script below into the JavaScript text area
[INSERT THE URL HANDLER SCRIPT]
[INSERT THE RENDERER SCRIPT]
NcPosts.hookOptionsAfterDefaults(function (options) {
EventsUrlHandling.channelId = options.channelId;
//Check if there's a post to be highlighted
const requestedPostId = EventsUrlHandling.getLinkedPostIdFromUrl();
if (requestedPostId) {
options.linkedPostId = requestedPostId;
options.postLinked = (postData, post, container) => {
container.appendChild(NcHtml.create("div", {
_onclick: () => {
window.history.pushState({}, document.title, "?")
container.parentElement.removeChild(container);
},
_html: 'Close <svg width="18" height="18" viewBox="0 0 24 24" fill="#ccc"><path d="M19,6.41L17.59,5L12,10.59L6.41,5L5,6.41L10.59,12L5,17.59L6.41,19L12,13.41L17.59,19L19,17.59L13.41,12L19,6.41Z" /></svg>',
class: 'ncpost-linked-close',
style: 'display: flex; align-items: center; justify-content: center; cursor: pointer'
}));
};
}
options.postRenderers.push(new PostIdRenderer());
});