How Do I Make Facebook Comments Load with Turbolinks?

I installed Facebook’s Comments plug-in on my site and found that it worked immediately except for one problem. To get it to show on a page, the page had to be reloaded because of Turbolinks. I was able to fix this using Coffeescript with the help of this Stack Overflow post.

Here’s I fixed it:

(1) Created a new file assets/javascripts/fb_turbolinks_fix.js.coffee (replace the values in italics based on the Connect URL Facebook provides you in its code):

$ ->
loadFacebookSDK()
bindFacebookEvents() unless window.fbEventsBound

bindFacebookEvents = ->
$(document)
.on(‘page:fetch’, saveFacebookRoot)
.on(‘page:change’, restoreFacebookRoot)
.on(‘page:load’, ->
FB.XFBML.parse()
)
@fbEventsBound = true

saveFacebookRoot = ->
if $(‘#fb-root’).length
@fbRoot = $(‘#fb-root’).detach()

restoreFacebookRoot = ->
if @fbRoot?
if $(‘#fb-root’).length
$(‘#fb-root’).replaceWith @fbRoot
else
$(‘body’).append @fbRoot

loadFacebookSDK = ->
window.fbAsyncInit = initializeFacebookSDK
$.getScript(“//connect.facebook.net/en_US/sdk.js”)

initializeFacebookSDK = ->
FB.init
appId : # put your app ID
autoLogAppEvents : true
xfbml : true
version: ‘v5.0’

(2) In application.js make sure to include the file (before Turbolinks):

//= require fb_turbolinks_fix

(3) In your view, include this:

<div id="fb-root"></div>
<div class="fb-comments" data-href="https://developers.facebook.com/docs/plugins/comments#configurator" data-width="" data-numposts="5"></div>

How Do I Add a WordPress Blog to My Rails App?

I wanted to have a robust blog for my Rails app, but I didn’t want to spend too much time on it. Initially I created a simple model (Articles) and added TinyMCE in it, but I ran into some challenges in how photos were displaying, and other styling aspects. I could’ve spent more time on it, but it was starting into eating into the time I was spending on developing enhancements to the app itself.

You can easily create a WordPress instance and map it to a subdomain. For example, blog.foo.com.

The problem with that, as discussed by SEO experts, Moz.com, is that it can hurt your search engine optimization efforts (SEO). Instead, it’s better to use a subdirectory like: foo.com/blog.

I was able to set-up my blog this way with the help of Dipesh Batheja’s article.

Here’s the exact steps I took:

(1) Added the domain (foo.com) to a WordPress hosting account on Siteground (my host)

(2) Using cPanel on Siteground, I created a subdomain, ‘blog’ for my domain (so I now could use blog.foo.com)

(3) In cPanel, I used “Let’s Encrypt” to add an SSL certificate to my subdomain (now I could use httpS://blog.foo.com)

(4) Installed WordPress (in cPanel) to my subdomain

(5) I went to my DNS records and added two A records – http://www.blog.foo.com, and blog.foo.com, each pointing to the IP address of my domain on Siteground. After the DNS propagated, I could go to the URL https://blog.foo.com and see my WordPress instance.

(6) In my Rails app, I added the Rack Reverse Proxy gem to my gemfile:

gem "rack-reverse-proxy", require: "rack/reverse_proxy"

(7) ‘bundle update’ to get the gem installed

(8) In config/application.rb, I added this:

config.middleware.insert(0, Rack::ReverseProxy) do 
  reverse_proxy_options force_ssl: true, replace_response_host: true

   reverse_proxy(/^\/blog(\/.*)$/, 'https://blog.foo.com$1', opts = { preserve_host: true })
end

(9) In routes.rb, I added this route:

get "/blog", to: redirect('https://www.foo.com/blog/', status: 301)

(10) In WordPress, in General Settings, I set:

WordPress Address (URL): https://www.foo.com/blog

Site Address (URL): https://www.foo.com/blog

Now, every time someone goes to foo.com/blog, they’re redirected to my WordPress blog, and my SEO isn’t hurt.

Skipping to the End of Data in Rails Console

I used to get stuck in the Rails console when I had a query that returned a lot of data. I would just keep hitting the button to go to the next page which took a long time depending on the data returned.

I finally learned that if I just enter q, then I can skip past all of that.

Such a time saver, I should’ve figured this out much sooner.

Upgrading Ruby on Windows with Chocolatey

I need to add an updated version of Ruby so I could use Ruby on Rails 6. I found an easy way to do this using Chocolatey. Chocolatey offers a free version for personal use.

I’ve used Railinstaller in the past to help, but it seemed that their stacks were a little outdated when I looked (and they didn’t have anything beyond Ruby 2.3).

That’s OK because using Chocolatey was super simple.

  1. Install Chocolatey
  2. You should now be able to run ‘choco install ruby’ or ‘choco upgrade ruby’ depending on what you want to do (Ruby chocolatey page)

Since I’m running URU, I just needed to add the bin path to it, and now I can switch between Ruby versions easily.

Using Lists in TinyMCE

I’m using TinyMCE in one of my Rails apps and I had trouble today pasting in text with bullets.  TinyMCE injects paragraphs <p> in the code, so the HTML ended up looking this.

ScreenHunter 212

That ended up with the text for the bullet point being on a different line (above) the text for that bullet point.

This probably isn’t the proper way to do it, but I ended up going to the second item in the list and clicking enter.  This created a new line that wasn’t preceded with the <p>.  After that I clicked enter and created new lines in the code for each of the bullet points.

On my toolbar I don’t have the option to add lists which made it more difficult.  In the future, I may try to add plugins to handle this to see if it makes it easier.

Password Protect Staging

I wanted to password protect my staging environment on Heroku.  Here’s a simple way to do it.

In your application controller, enter:

if Rails.application.secrets.auth
  http_basic_authenticate_with \
  name: Rails.application.secrets.auth_name,
  password: Rails.application.secrets.auth_pass
end
Then in your environment variables in Heroku (for your staging app), enter these variables:
AUTH = true
AUTH_NAME = <user name you want to use>
AUTH_PASS = <password you want to use>

Free Quick Start Tools When Building Websites

When I’m creating a site there’s certain things that I need to create each time.

Here’s a list of some of my favorite tools – each free:

Name Generator

Namelix – enter a term (or terms) and this AI powered tool gives you name suggestions.  I usually add additional search criteria to only suggest to names with available domains

Privacy Policy

Shopify Privacy Policy Generator – create a privacy policy for your site

 

Terms of Use

Shopify Terms and Conditions Generator – creates terms geared more towards sites that sell products or services

Termly – can create terms geared towards SaaS products (paid and free options)

 

Cookie Warning/GDPR

Cookie Consent by Insites – makes it easy to create a warning to all site visitors that you use cookies

Design

BEE Free – use their tool to create responsive email designs