Universal Comments - HL Vanilla Community
<main> <article class="userContent"> <h2 data-id="vanilla-comments">Vanilla Comments</h2><div class="blockquote"><div class="blockquote-content"><p class="blockquote-line">If you are using WordPress, check out our <a href="https://success.vanillaforums.com/kb/articles/48-integrations-overview" rel="nofollow noreferrer ugc">how to integrate comments with WordPress</a>.</p></div></div><p>Also known as blog comments or article comments, Vanilla comments allow you to add a commenting system to your blog posts or articles that will seamlessly integrate into your Vanilla community. Comments made on content on your website will create threaded discussions in your community and any comment made on the forum discussion will be reflected back under the content on your website.</p><h2 data-id="what-are-universal-comments">What are Universal Comments?</h2><p>We made Comment integration easy with WordPress (<a href="https://success.vanillaforums.com/kb/articles/48-integrations-overview" rel="nofollow noreferrer ugc">learn more about that here</a>), but we have also made it possible to add comments to <strong><em>any</em></strong> site where you can identify unique content. Universal Comments is a way to do that.</p><h2 data-id="how-to-use-universal-comments">How to use Universal Comments</h2><p>All you need to do to leverage your Vanilla Community for comments is to follow these easy steps:</p><h4 data-id="embedding">Embedding</h4><ol><li>In your Vanilla Community Dashboard under Settings, click on <strong>Embedding</strong>.</li><li>At the top of the page you will see a toggle with the label <strong>Embed My Forum.</strong> Switch it to ON.</li><li>Click on <strong>Universal Comments Embed</strong>. </li><li>Copy the embed code.</li><li>Before leaving the Vanilla Dashboard, click on <strong>Security</strong> in the left hand menu. </li><li>In the box next to <strong>Trusted Domains</strong>, add the domain name where you will be embedding comments. This will give permission to browsers to display content from your forum in a site under another domain.</li><li>Go to your site. Paste the code into the document or script that generates the page where you want the comments to reside, under the blog posts or articles.</li></ol><h4 data-id="configuring-the-embed-code">Configuring the Embed Code</h4><p>The anatomy of the embed code.</p><pre class="code codeBlock" spellcheck="false" tabindex="0"><div id="vanilla-comments"></div> <script type="text/javascript"> /*** Required Settings: Edit BEFORE pasting into your web page ***/ var vanilla_forum_url = 'https://dev.vanilla.localhost/'; // The full http url & path to your vanilla forum var vanilla_identifier = 'your-content-identifier'; // Your unique identifier for the content being commented on /*** Optional Settings: Ignore if you like ***/ // var vanilla_discussion_id = ''; // Attach this page of comments to a specific Vanilla DiscussionID. // var vanilla_category_id = ''; // Create this discussion in a specific Vanilla CategoryID. /*** DON'T EDIT BELOW THIS LINE ***/ (function() { var vanilla = document.createElement('script'); vanilla.type = 'text/javascript'; var timestamp = new Date().getTime(); vanilla.src = vanilla_forum_url + '/js/embed.js'; (document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(vanilla); })(); </script> <noscript> Please enable JavaScript to view the <a href="http://vanillaforums.com/?ref_noscript"> comments powered by Vanilla. </a> </noscript> <div class="vanilla-credit"> <a class="vanilla-anchor" href="http://vanillaforums.com"> Comments by <span class="vanilla-logo">Vanilla</span> </a> </div> </pre><ol><li><code class="code codeInline" spellcheck="false" tabindex="0"><div id="vanilla-comments"></div></code> : This is HTML element into which the comments will be injected by Javascript.</li><li><code class="code codeInline" spellcheck="false" tabindex="0">var vanilla_forum_url</code> : Full path to your vanilla community. Make sure it is <code class="code codeInline" spellcheck="false" tabindex="0">https</code>.</li><li><code class="code codeInline" spellcheck="false" tabindex="0">var vanilla_identifier</code> : This value (a mixed string or number, no longer than 32 characters) identifies the current page that will link all the comments on this page to one unique discussion in the forum. This could be, for example, in Magento you have a productid, in Concrete5 there is the PageId, in MODX it’s the Resource ID, and so on. This value is stored in the Discussion table of the community as a ForeignID to link a Vanilla DiscussionID to your blog/article/page etc. But, if you like you explicitly specify a Vanilla Discussion ID.</li><li><code class="code codeInline" spellcheck="false" tabindex="0">var vanilla_discussion_id</code> : (Optional) You may want to explicitly embed a specific Discussion from your community into the page. This would cause all your comments to appear in one Discussion thread.</li><li><code class="code codeInline" spellcheck="false" tabindex="0">var vanilla_category_id</code> : (Optional, but recommended) Specify the Category on the Vanilla Community that you want the comments to appear in.</li><li>Other parameters that are available are: <ol><li><code class="code codeInline" spellcheck="false" tabindex="0">vanilla_title</code> : Pass the title of the article or blog as a parameter.</li><li><code class="code codeInline" spellcheck="false" tabindex="0">vanilla_embed_locale</code> : Pass a two letter language variable if you have Vanilla's multilingual plugin turned on.</li></ol></li></ol><h2 data-id="sample-code">Sample Code</h2><p>Here is a sample blog page with the blogID, and Title taken from elements on the page and passed as parameters to the Vanilla Community:</p><pre class="code codeBlock" spellcheck="false" tabindex="0"><html> <head> <title>Embed Comments</title> <meta charset="UTF-8"> <link rel="canonical" href="https://dev.vanilla.localhost/kb/articles/32-embedding-comments"> <link href="./static-assets/shared.min.css?h=602d566a" rel="stylesheet" type="text/css"> </head> <body id='blog-post32'> <header> <h1 id="post-title">Embed Comments</h1> </header> <div class="content"> <h2>This is a blog post!</h2> <p> Lorem flipsum dolor sit amet, consectetur adipiscing elit. Sed varius condimentum mi sed accumsan. Aenean mollis dictum blandit. Nam convallis tellus eros, id ornare ante sagittis ut. Donec consectetur at enim at semper. Nullam id maximus felis, sit amet posuere velit. Proin quam sapien, sodales sed purus nec, bibendum hendrerit enim. Nam urna nunc, tempor eget nisi sed, sagittis viverra nunc. Donec posuere dapibus tortor, in volutpat tellus venenatis nec. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nulla ut odio est. Nunc eget nibh blandit nibh lacinia tincidunt at ut lectus. </p> <div id="vanilla-comments"></div> </div> <script type="text/javascript"> /*** Required Settings: Edit BEFORE pasting into your web page ***/ var vanilla_forum_url = 'https://dev.vanilla.localhost'; // The full http url & path to your vanilla forum var vanilla_identifier = document.getElementsByTagName("body")[0].id; // Your unique identifier for the content being commented on /*** Optional Settings: Ignore if you like ***/ var vanilla_category_id = '8'; // Create this discussion in a specific Vanilla CategoryID. var vanilla_title = document.getElementById('post-title').innerHTML; /*** DON'T EDIT BELOW THIS LINE ***/ (function() { var vanilla = document.createElement('script'); vanilla.type = 'text/javascript'; var timestamp = new Date().getTime(); vanilla.src = vanilla_forum_url + '/js/embed.js'; (document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(vanilla); })(); </script> <div class="vanilla-credit"><a class="vanilla-anchor" href="http://vanillaforums.com">Comments by <span class="vanilla-logo">Vanilla</span></a></div> </body> </html> </pre><h2 data-id="additional-settings">Additional Settings</h2><p>There are some additional settings you may wish to also review . These are documented on the embed page in your Vanilla Dashboard:</p><ul><li>Configure Comment Counts code to show the number of comments you have.</li><li>Decide how many comments you wish to appear per page</li><li>Under Advanced Settings add your trusted domains.</li></ul><h2 data-id="troubleshooting">Troubleshooting</h2><p>Often you will not get error messages when Universal Comment Embedding goes wrong. It will simply not work. Here are a few symptoms, causes and solutions:</p><h3 data-id="no-comment-form-loads">No comment form loads</h3><p>The loading gif appears for a while and disappears or doesn't appear at all. No comment or form appears. Could be one or more of the following: </p><ol><li><strong>You did not set the embedding to on in the Dashboard of your forum.</strong> To fix, go to Dashboard : Settings : Embed and toggle "Embed My Forum" to On.</li><li><strong>You have the wrong URL in the embed code for your target Forum.</strong> To be sure, look in the developer console of a browser. If you find "GET <a href="https://google.com/js/embed.js" rel="nofollow noreferrer ugc">https://[some-wrong-domain.com]/js/embed.js</a> net::ERR_ABORTED 404". To fix, update the URL you have put in the embed code as <code class="code codeInline" spellcheck="false" tabindex="0">var vanilla_forum_url</code> to point to the correct URL.</li><li><strong>You have not added your blog domain to the "Trusted Domains".</strong> To be sure, look in the developer console of a browser. If you find something like "Refused to frame '<a href="https://paddykelly.vanillastaging.com/'" rel="nofollow noreferrer ugc">https://[your-forum].com/'</a> because an ancestor violates the following Content Security Policy directive: "frame-ancestors 'self' sso.vanilla.localhost *.vanillastaging.com.". To fix, go to Dashboard : Settings : Security and put the <strong><em>domain name </em></strong>of your blog in the Trusted Domains box. Do not put the address, just the domain name (e.g. success.vanillaforums.com, or *.vanillaforums.com <strong>not</strong> https://success.vanillaforums.com).</li><li><strong>You didn't put the proper scheme (HTTPS) in the forum address in the embed code.</strong> To be sure, look in the developer console of a browser. If you find something like "Mixed Content: The page at '<a href="https://comments-embed.vanilla.localhost/'" rel="nofollow noreferrer ugc">https://[your-blog-domain.com]/'</a> was loaded over HTTPS, but requested an insecure script '<a href="http://paddykelly.vanillastaging.com/js/embed.js'." rel="nofollow noreferrer ugc">http://[your-forum-domain.com]/js/embed.js'.</a> This request has been blocked; the content must be served over HTTPS." Our hosted forums are always served over HTTPS. To fix, update the URL you have put in the embed code as <code class="code codeInline" spellcheck="false" tabindex="0">var vanilla_forum_url</code> to http<strong>s</strong>://.</li><li><strong>You are trying to embed in a blog page that does not have a secure scheme (HTTPS).</strong> To be sure, look in the developer console of a browser. If you find something like "Refused to frame '<a href="https://[your-forum].com/'" rel="nofollow noreferrer ugc">https://[your-forum].com/'</a> because an ancestor violates the following Content Security Policy directive: "frame-ancestors 'self' sso.vanilla.localhost *.vanillastaging.com." Our hosted forums are always served over HTTPS. Since your blog page is trying to embed secure content, it has to be secure as well. To fix, type your blog address in the address bar with https://.</li></ol><h3 data-id="entire-forum-is-embedded">Entire forum is embedded</h3><p>If you are attempting to only embed comments and the entire forum is embedded it can mean the following things:</p><ol><li><strong>You are utilizing the incorrect code.</strong> Within the Embedding section of the dashboard there are two sections with code you can copy; one being Universal Comments and the other Universal Forum. Make sure you have copied the correct code.</li><li><strong>You have inserted the correct code, but the embed.js script cannot access it.</strong> This causes the embed.js script to be run without being configured properly and defaults to a full forum embed. It can occur in some website configurations utilizing Lifecycle Hooks as the external variables could be purged upon build. Server Side Rendering could also cause a similar effect.</li></ol><h2 data-id="user-experience">User Experience</h2><p>Universal Comments are an extension of a Vanilla forum. Every comment on a blog post will also create a matching comment on the affiliated Discussion on the forum.</p><p>Just like on the forum, users cannot comment on a blog post if they are not logged in. There is no "Anonymous" commenting on Vanilla forums. If the user does not have a session they will see a comment box with button that says "Comment as...".</p><div class="embedExternal embedImage display-large float-none"> <div class="embedExternal-content"> <a class="embedImage-link" href="https://user-images.githubusercontent.com/2651070/140770948-5ce433ac-683b-42f4-a670-ae12d807840b.png" rel="nofollow noreferrer noopener ugc" target="_blank"> <img class="embedImage-img" src="https://user-images.githubusercontent.com/2651070/140770948-5ce433ac-683b-42f4-a670-ae12d807840b.png" alt="Screen Shot 2021-11-08 at 10 14 47 AM" height="" width="858" loading="lazy" data-display-size="large" data-float="none"></img></a> </div> </div> <p><br></p><p>When the user clicks on the "Comment As" button, they will be brought to either:</p><p>The Vanilla Forum sign in page of their forum (if not using SSO):</p><div class="embedExternal embedImage display-large float-none"> <div class="embedExternal-content"> <a class="embedImage-link" href="https://user-images.githubusercontent.com/2651070/140771409-d750d481-afea-4410-a58c-4a9c36573ff8.png" rel="nofollow noreferrer noopener ugc" target="_blank"> <img class="embedImage-img" src="https://user-images.githubusercontent.com/2651070/140771409-d750d481-afea-4410-a58c-4a9c36573ff8.png" alt="Screen Shot 2021-11-08 at 10 28 13 AM" height="" width="665" loading="lazy" data-display-size="large" data-float="none"></img></a> </div> </div> <p><br></p><p>Or to the SSO sign in page (if using SSO):</p><div class="embedExternal embedImage display-medium float-none"> <div class="embedExternal-content"> <a class="embedImage-link" href="https://user-images.githubusercontent.com/2651070/140771190-9f01551b-8a70-4bae-bf09-d8aff8545c92.png" rel="nofollow noreferrer noopener ugc" target="_blank"> <img class="embedImage-img" src="https://user-images.githubusercontent.com/2651070/140771190-9f01551b-8a70-4bae-bf09-d8aff8545c92.png" alt="Screen Shot 2021-11-08 at 10 23 52 AM" height="" width="357" loading="lazy" data-display-size="medium" data-float="none"></img></a> </div> </div> <p><br></p><p>In either case, when they have completed the sign in (or registration process) they will be redirected back to the blog page in a "signed-in" state.</p><div class="embedExternal embedImage display-large float-none"> <div class="embedExternal-content"> <a class="embedImage-link" href="https://user-images.githubusercontent.com/2651070/140771217-d7ab0e0e-9192-494a-8ad7-50a76d663151.png" rel="nofollow noreferrer noopener ugc" target="_blank"> <img class="embedImage-img" src="https://user-images.githubusercontent.com/2651070/140771217-d7ab0e0e-9192-494a-8ad7-50a76d663151.png" alt="Screen Shot 2021-11-08 at 10 22 53 AM" height="" width="865" loading="lazy" data-display-size="large" data-float="none"></img></a> </div> </div> <p>They can then leave their comment on the blog, which will be copied over to the affiliated discussion on the forum.</p> </article> </main>