freeCodeCamp: Quote Machine Tweet button doesn't work on CodePen due to Twitter's API

Describe your problem and how to reproduce it: The Tweet button on the Quote Machine project isn’t working due to twitter.com refusing to connect and a ERR_BLOCKED_BY_RESPONSE error. User story 10 in the instructions for this project states

I can tweet the current quote by clicking on the #tweet-quote a element. This a element should include the "twitter.com/intent/tweet" path in its href attribute to tweet the current quote.

So I did some digging in Twitter’s web intents documentation and found that web intents cannot be loaded inside an iframe (about halfway through Working with Web Intents section).

I looked into how CodePen renders its projects, and in both the editor and full views, it renders as an iframe. Since the user has no control over Twitter’s rules, or how CodePen renders the project, I don’t know how a tweet button could be successfully implemented in this project. Maybe posting to another social media site could be implemented instead?

Add a Link to the page with the problem:

Tell us about your browser and operating system:

Browser Name: Google Chrome
Browser Version: 86.0.4240.111
Operating System: MacOS Catalina (10.15.6)

If possible, add a screenshot here (you can drag and drop, png, jpg, gif, etc. in this box):

About this issue

Original URL
State: closed
Created 4 years ago
Reactions: 4
Comments: 15 (10 by maintainers)

Most upvoted comments

I think @moT01’s suggestion of adding a hint is a good approach here. Something like:

Note: If you are developing this on CodePen, the restrictions prevent the Twitter link from loading in the window. Add the target="_blank" attribute as a workaround.

naomi-lgbt on Oct 29, 2020

That makes sense. I agree that if switching to a Tumblr button would break all the current projects, then it is not a great idea. I hadn’t considered that aspect of it.

I tested the example project a few more ways and figured out a few things (both browsers are updated to the latest version and on default settings):

What works for me (and passes all the tests):

Firefox with target="_blank" works.
Firefox without target="_blank" shows " “Firefox can’t open this page” with a “Open Site in New Window” button that works.
Chrome with or without target="_blank" works if you right click the button and choose “Open Link in New Tab”
Chrome and Firefox with target="_top" (as long as you make sure your work is saved so you don’t lose it)

What doesn’t work for me:

Chrome with or without target="_blank" and regular button click (this is what I was using when I found this bug)

So it seems that this is only a problem for Chrome users, but there is still a workaround (right-click button or use target="_top"). I think adding a hint that the tweet button might not work on Chrome as expected could be helpful, although a good forum post explaining the issue would be another solution.

IamSurrett on Oct 29, 2020