Launching my Web Business Goes Bust: Struggles with Security & the Dreaded “fb:app_id hasn’t been included in the meta tags” Facebook Message


I am a new website designer. This past year I fell in love with the WordPress content management system (CMS). It began with building a website for my partner to help him launch his newly published book. I spent hours watching YouTube “how-to” videos, scanning Google, and reading books on html & css. Then I went to WordPress Camp in Asheville, NC and I knew I was hooked. It’s mind blowing to me that I could love tech with such passion. I never thought of myself as a web designer and now all I do is read about web design and development.

 

Security & Managed WordPress Hosting

Recently I took on two web design projects. I spent a lot of time not only in the creative process, but also learning best practices for web design. In fact, I spent several weeks reading everything I could about website security. I wanted my customers to have the best security and support I could afford. I migrated my built out websites from Hostgator to managed WordPress hosting with SiteGround. My clients and I would be assured of website backups (thank the goddess!), theme/plugin updates, and security support. In this process, I chose to make all of my sites more secure by adding SSL certificates to each site.

Woohoo….I felt like a real web designer now. Look at me working the security angle! SSL gives me some serious street cred, right? Well….

 

My Business Website Launch Goes Bust

Yep.  My business website launch on Facebook went bust.  It sure did. After months of building up my WordPress skills, I built out my own website to advertise my WordPress web design services.  I had already launched my website projects and felt ready to advertise myself on the biggest platform I could access.  Facebook. I wrote out my introductory post, linked my site, and hit submit.  I immediately felt like throwing up, but I also felt really proud at getting my career launched.
I was so proud I couldn’t wait to see how my post was received.  I checked the post and lo and behold, my link had been scraped from the site.  What?  I knew that I had linked my site. What was going on?  My friend, who wanted to support my launch, wrote her own Facebook testimonial to advertise my services.  My link was there, but when you clicked on it Facebook took people to a screen that looked like this:
imageedit_2_5185427997

Oh. My. Goodness.  What the heck was that message?  For my super secure site???  That’s not what you want to see when you link to a web designer’s website.  I was beside myself. I immediately deleted all my posts and went to work researching the problem.

 

“fb:app_id hasn’t been included in the meta tags”

After some quick research, I found the Facebook Debugger page.  When I loaded in my site, I got this amazingly ridiculous message:

fb:app_id hasn’t been included in the meta tags. Specify the app ID so that stories shared to Facebook will be properly attributed to the app. Alternatively, app_id can be set in url when open the share dialog.
Now, talk about getting humble real quick.  I saw that message and I freaked out.  What did that mean?  I mean, seriously, how was I supposed to find an answer when I couldn’t understand the problem?  Fairly quickly I recovered and set to work scraping Google for answers.  I set up my Facebook developers page, set up a Facebook app for my webpage.  I followed this tutorial to get that done.
All was good, right?  No, it wasn’t.  Now when I used the debugger tool the warning changed to an internal error occurred while linting the url.  What the heck is linting??? Let me tell you, or let me let Wikipedia tell you:

lint was the name originally given to a particular program that flagged some suspicious and non-portable constructs (likely to be bugs) in C language source code. The term is now applied generically to tools that flag suspicious usage in software written in any computer language.

 

Stack Overflow

I felt pretty desperate at the point.  So I turned to the Stack Overflow community.  I created an account, crafted what I thought was a pretty clear question, and waited for a response.  My first response?  “I’m voting to close this question as off-topic because it is not a programming question.”
Seriously.  Not only had I totally embarrassed myself on Facebook among my friends, I was now exposing myself as completely inept in front of my perceived peers.  Honestly, I was ready for a massive earthquake to blessedly swallow me into the earth.
But here’s the thing, that person was right.  Thankfully, I have a friend in the field who was letting me bounce ideas off of her.  When I told her about my StackOverflow post she concurred with the author.  It wasn’t really a programming issue.  The person who wanted to close my post did respond again with some ideas, so I was grateful.  However, I still had no solution.

 

Using the SSL Insecure Content Fixer & Better, Search, Replace plugins

After several hours wading through this process I finally hit on a clue.  I kept trying to load my site into Facebook.  Over, and over, and over again.  I’m sure I looked like a maniac, holding my 5th cup of coffee in one hand and having my eyeballs bugged out on the monitor.   Finally, I tried accessing my site from a different computer and what I found, once I pressed through the Facebook security warning, was that my link would open but the user would see another security warning about images on the site.  DING DING DING.
Images.  Ok.  Then i realized that maybe this had to do with migrating my fully built out website to https status.  I reached out to the amazing support at SiteGround and they made sure that all of my pages were set to display my secure https status.  When I inquired as to why the lock wasn’t showing up on my page they directed me towards this lovely tool:  Why No Padlock?  This tool helped me see that while my site was secure, some of the images embedded were not.
Upon the advice of SiteGround support, I installed SSL Insecure Content Fixer and went with the simple setting so as to have the least impact on my site.  This helped some of the images but not all. So I installed the Better, Search, Replace plugin to fix the other images.
By the way, I also found a lot of the images by opening my site with Firefox, and going to: Tools -> Page Info -> Media This showed me every image/js/css call on this page. Finding these specific images allowed me to use the Better, Search, Replace plugin to make the changes.
Finally at 1am, 12 hours after my website launch debacle I loaded my site into Facebook and it loaded correctly!  BA BAM!  Success!  I felt like Rocky who had just climbed the steps and was prancing around in celebration!  I woke up my partner to tell him I fixed it.  He smiled and went back to sleep.  No worries.  I felt like a techie bad ass.  Well, a newbie techie bad ass.
Finally, I collapsed into bed.

 

Lesson Learned About Secure Sites & Insecure Images

My tech friend summarized it like this: It’s a flag when you have a secure site that embeds non secure objects/images.  So there you go.  I plan to continue writing about my trials and tribulations as a web designer and future web developer. I can see that the struggles are real and make you incredibly crazy.  However, I never stopped fighting through this.  I just knew there was an answer!  I knew that I could solve this problem.  And it was so so so very satisfying when I realized the solution.
But this was not an individual effort.  I couldn’t have done this without the guidance of a friend, and the support of the online tech community.
Building websites.  Working together.   Solving problems. I love this career!  Now onto the  next project…

Leave a Comment