Subscribe form below each post

[nibl]

How do you automatically place the subscribe form below each post? Without having to manually add the shortcode to each post.

[cjeller1592]

Hey @nibl, there isn’t a way to do this automatically the moment but it fits in line with a feature request for automatic, blog-specific post signatures. Would that be something that’d help you in this case?

Post signatures

One writer mentioned wanting a way to add a signature to blog posts automatically, as seen on public blogs like bleakandpretty.writeas.com and mondaykickoff.com Right now you can do this by copy-and-pasting the same bit of text in each post, but I thought an automatic way of adding one could be interesting – it would save time, and let you update the signature anytime without going back through each post individually. What do you think? Would you use this feature if we had it? Would you want t…

[nibl]

The signature feature would probably do the trick.

In the meantime, I’m sure I have managed to do this with some JavaScript. But it’s a while ago and I don’t think I have that code anymore.

[nibl]

@cjeller1592, I have managed to insert the subscribe shortcode where I need it, but it’s not actually working because it’s not being interpreted correctly. If I use HTML entities then it shows the literal characters. If I include it as is, then it’s not displayed at all.

Is there a way?

// Add subscribe form to bottom of each post
var subDiv = document.createElement("div");
subDiv.style.textAlign = "center";
subDiv.innerHTML = "<div class='subscribe'><hr><h2>Get new posts by email</h2><p>Your address is <em>kept private</em>.</p><div id='subscribecode'><!--emailsub--></div></div>";
// Add to individual blog post page
var article = document.getElementById("post-body");
article.insertAdjacentHTML("afterend", subDiv.outerHTML);

[cjeller1592]

So the way to do this @nibl is to take the HTML that the shortcode produces and add it to the JavaScript. There are just a couple things to do in order to make it work. I’ll show you example code first & go through each step.

// Add subscribe form to bottom of each post
var subDiv = document.createElement("div");
subDiv.style.textAlign = "center";
var pathArray = window.location.pathname.split('/');
var x = pathArray[1];
subDiv.innerHTML = '<div class="subscribe"><hr><h2>Get new posts by email</h2><p>Your address is <em>kept private</em>.<form method="post" id="emailsub" action="/api/collections/alias/email/subscribe"><input type="hidden" name="slug" value="' + x + '"><input type="hidden" name="web" value="1"><div style="position: absolute; left: -5000px;"><input type="text" name="Dg7wrFlucFmpOduO9o6ZV8372s9NVpXZKaMgxXN" value=""></div><input type="email" name="email" placeholder="me@example.com"><input type="submit" id="subscribe-btn" value="Subscribe"></form></div>';
// Add to individual blog post page
var article = document.getElementById("post-body");
article.insertAdjacentHTML("afterend", subDiv.outerHTML);

So the subscribe form needs the slug of the post it’s embedded in for it to work. To do this, I use some JavaScript to grab the slug of the post the form is below:

var pathArray = window.location.pathname.split('/');
var x = pathArray[1];

The x variable might be different if your blog is not a top level domain (blog.com/post). If your blog is more like a https://write.as/blog/post, then change the x variable to the following:

var x = pathArray[2];

Next is the form itself. The only thing you need to change is the API endpoint for the submit action. All that’s needed is replacing your blog’s alias with the placeholder. Here’s an example with my blog:

action="/api/collections/cjeller/email/subscribe"

And after changing that you should be good to go! Here’s a test blog where I have this working:

Testing

Let me know if you run into any problems along the way. As always, I’d be happy to help.

[nibl]

Thanks @cjeller1592. Do you think this will work like the default subscribe where it detects that you are already a subscriber? Because if you try to subscribe when you are already subscribed, you get a 500 error (haven’t been able to try this on the test site you created, but that’s what happened on mine. I was able to reproduce it multiple times).

There is also the issue that it redirects to /subscribe. You get a 404 error if that does not exist. Is it necessary to redirect to that page?

[cjeller1592]

You’re welcome @nibl!

@nibl

There is also the issue that it redirects to /subscribe. You get a 404 error if that does not exist. Is it necessary to redirect to that page?

So this is where that little bit of JavaScript comes in handy to grab the slug of the post, because once the subscribe form is submitted, it redirects to the top of the post with the message that you subscribed. It should work now though.

@nibl

Do you think this will work like the default subscribe where it detects that you are already a subscriber?

It should because that detection happens server side. I don’t know why it isn’t working here.

But I think it’s best to build a solution for this @nibl than having to do this work around, because there are some things that we cannot replicate with the custom JS that help reduce spam subscriptions.

I’ll bump the post signatures topic in the meantime and see what people think about the feature as a whole. Once we have a better idea of the demand we can look into it further.

Post signatures

One writer mentioned wanting a way to add a signature to blog posts automatically, as seen on public blogs like bleakandpretty.writeas.com and mondaykickoff.com Right now you can do this by copy-and-pasting the same bit of text in each post, but I thought an automatic way of adding one could be interesting – it would save time, and let you update the signature anytime without going back through each post individually. What do you think? Would you use this feature if we had it? Would you want t…

[matt]

@nibl an update on this: you can now add consistent signatures to your posts! More info here:

Post signatures

Thanks again for everyone’s input on this! I’m happy to announce we’ve just released this feature. You can now find it in the Write.as add-on store for just $10 to enable it permanently. It’ll also be open to everyone in WriteFreely shortly – see writefreely#330. You’ll notice there’s now a “Post Signature” section on your blog’s Customize page, where you can enter Markdown, HTML, and shortcodes like our email subscription box (<!--emailsub-->) to add them to the end of every post. Here’s a qu…

[mike_hales]

A really simple minded query . . .

I’d like to add a subscribe link to my signature. I might also want to create a pinned subscribe page. What must I paste into the signature (or page)?

I have no skills (and no desire) to work in Javascript - or CSS for that matter (although I might have to tweak a bit of that somewhere, watch this space for help queries!). So if possible, an answer for dummies please Thanks.

Is there a comprehensive guide somewhere, on CSS as it might be applied in write.as (ie referring to specific elements of a write.as page or site)? So that a novice might just copy-paste the CSS?

[mike_hales]

OK, I found this Post signatures - #13 by matt and now have inserted the subscribe link in the signature. Thank you

Any guidance on the CSS query above?

[nigel]

CSS is… involved for write.as/freely. Themes — Write.as is a good place to start. Otherwise, Right Click on something and Inspect (at least in Firefox) will show you the item and relevant CSS lines.

[mike_hales]

Although it strikes me that there isn’t a huge amount of significant variation between most of the blog styles (and I don’t think I want to hack my own blog very much) that’s a good place to learn relevant CSS Thanks for the tip @nigel

[nigel]

The one I use is pretty comprehensive Gruvbox by CommentingOn.xyz