Trouble with Tweet Intent

[nickforneris]

Hello All,

I have passed the Random Quote Project, but would really like to figure out why my tweet link gets the “Twitter.com is blocked - twitter.com refused to connect” error.

Code below:

const quoteBox =
	"position-absolute top-50 start-50 translate-middle p-5 bg-white w-100 text-center shadow ";
const buttons = "position-absolute bottom-0 start-50 translate-middle-x p-5";
const buttonStyle = "btn btn-primary m-2";
const authorCenter = "text-center";

class Quote extends React.Component {
	constructor(props) {
		super(props);
		this.state = {
			data: [],
			quote: "",
			author: ""
		};
		this.random = this.random.bind(this);
		this.handleClick = this.handleClick.bind(this);
	}

	componentDidMount() {
		fetch(
			"https://gist.githubusercontent.com/nasrulhazim/54b659e43b1035215cd0ba1d4577ee80/raw/e3c6895ce42069f0ee7e991229064f167fe8ccdc/quotes.json"
		)
			.then((response) => response.json())
			.then((data) =>
				this.setState({ data: data.quotes }, () => {
					this.handleClick();
				})
			);
	}

	random() {
		const randomIndex = Math.floor(Math.random() * this.state.data.length);
		return this.state.data[randomIndex];
	}

	handleClick() {
		const random = this.random();
		this.setState({
			quote: random.quote,
			author: random.author
		});
	}

	render() {
		return (
			<section>
				<div id={"quote-box"}>
					<div className={quoteBox}>
						{" "}
						{/*Container for quotes*/}
						<div id={"text"}>
							<h4>"{this.state.quote}"</h4>
						</div>
						<div id={"author"} className={authorCenter}>
							<cite>- {this.state.author}</cite>
						</div>
					</div>
					<div className={buttons}>
						<button
							id={"new-quote"}
							onClick={this.handleClick}
							className={buttonStyle}
						>
							New Quote
						</button>
						<a
							className={buttonStyle}
							id={"tweet-quote"}
							href={`https://twitter.com/intent/tweet?text=${this.state.quote}`}
							target={`_blank`}
						>
							<i className="fab fa-twitter"></i>
						</a>
					</div>
				</div>
			</section>
		);
	}
}

ReactDOM.render(<Quote />, document.getElementById("app"));

[nickforneris]

Works on my phone’s browser …??

[MatchaCrisp]

You can hover over the button in your react app and see the rendered link for each quote. Comparing that to a legitimate link probably will help you.

It can also be a browser issue. Or depending on how you are rendering your project, on the environment (codepen or self-hosted github pages etc). There is an issue opened on Github that seems relevant in that case: Quote Machine Tweet button doesn't work on CodePen due to Twitter's API · Issue #40089 · freeCodeCamp/freeCodeCamp · GitHub

From your code snippet it does not look like anything is wrong.

[lasjorg]

As said it’s a restriction.

Web Intents

Web Intents cannot be loaded inside an iframe.

For all Codepen Views, except the Debug view, your code is inside an iframe. You can remove target="_blank" from the link to have it work. But it will not open up in a new tab.

[nickforneris]

Thanks for the reply - I took a look at the Github link you replied with.