johno / pixyll

A simple, beautiful Jekyll theme that's mobile first
http://pixyll.com
MIT License
2.05k stars 1.34k forks source link

Why does the pop-up window show "localhost" when attempting to share a blog post on Facebook? #423

Open nbro opened 4 years ago

nbro commented 4 years ago

I am trying to share on Facebook a recently written blog post. However, after I have clicked on the share button, I get the following pop-up window

localhost

Then I share the post, but the shared post (on Facebook) only shows "localhost". When I click on the shared post, I get redirected to

http://localhost:3000/blogging/2020/05/20/my-blog-post/#disqus_thread

Furthermore, note that I can share another of my posts on Facebook, so this issue is weird. Could this issue be due to the fact that I have just recently shared it?

It's been a while since I created a post, so maybe I forgot to do something.

nbro commented 4 years ago

Ok, I was clicking the wrong button to share on Facebook. I was using the button for Disqus. Anyway, I don't understand why we have this behaviour if we click on that button.

ashawley commented 4 years ago

I presume you uploaded the locally served files (jekyll serve) instead of the (jekyll build) files. The former contain references to "localhost" in the metadata used to share the page on Facebook, while the latter would contain the hosted location (assuming you set url correctly in your config).

If not, then it must be some defect with how the Facebook or Disqus code are interacting or some defect with how they're integrated in the theme.

nbro commented 4 years ago

@ashawley How do I distinguish between locally served files and non-locally served? Locally, when I am writing the blog posts, I indeed locally test if the post is being displayed smoothly, but I don't actually know which files you're talking about.

ashawley commented 4 years ago

The files are generated in the _site directory. I'm assuming that's what you upload your site with. Is that how you publish your site?

ashawley commented 4 years ago

The port localhost:3000 is strange, because Jekyll usually uses localhost:4000. My theory was based on it being the Jekyll files served locally, but that was an oversight on my part. I'm not sure what's going on here.

nbro commented 4 years ago

@ashawley I didn't upload any _site directory, actually. I only uploaded the _posts directory and other directories (_drafts, _includes, _layouts, _sass, css and `images).

ashawley commented 4 years ago

Yes, I don't think it has anything to do with how you built or uploaded the site.

I was able to reproduce the problem with the Disqus share to Facebook button. I couldn't figure out why it's doing that, though.

galeone commented 4 years ago

Hi, I confirm this behavior. It also happens to me (and it's annoying, especially when people answer to a disqus message -> I receive the email -> the email contains the local IP I used to develop and test the website locally)

ashawley commented 3 years ago

the email contains the local IP I used to develop and test the website locally)

That's a different type of problem. I noted that it is localhost:3000, which is similar to localhost:4000 that Jekyll uses, but an actual numerical IP address sounds even odder.

galeone commented 3 years ago

the email contains the local IP I used to develop and test the website locally)

That's a different type of problem. I noted that it is localhost:3000, which is similar to localhost:4000 that Jekyll uses, but an actual numerical IP address sounds even odder.

Yes it's really odd. Anyway, since I still have this problem (and so I guess all the people that comment on my blog have the same issue -> and this is awful since they can't reach the blog from the disus email), I attach some screenshot and some (I hope) helpful report.

So, for example, given the article: https://pgaleone.eu/tensorflow/bazel/abi/c++/2021/04/01/tensorflow-custom-ops-bazel-abi-compatibility/

I received the discus email that notifies me of some comment:

image

Every link that should point to my blog, points to http://127.0.0.1:4000/.

If I inspect with the developer tools the title link (Creating TensorFlow Custom Ops, Bazel, and ABI compatibility) in that email, I have this link:

<a href="http://disq.us/url?impression=74ac377c-947c-11eb-a96e-1292fcc87f23&amp;product=email&amp;object_type=thread&amp;variant=active&amp;forum_id=4662211&amp;utm_source=digest&amp;adjective=thread_title&amp;thread=8461061265&amp;verb=click&amp;event=activity&amp;threadrank=1&amp;user_id=228365963&amp;adverb=internal&amp;zone=digest&amp;url=http%3A%2F%2F127.0.0.1%3A4000%2Ftensorflow%2Fbazel%2Fabi%2Fc%2B%2B%2F2021%2F04%2F01%2Ftensorflow-custom-ops-bazel-abi-compatibility%2F%3A1rV5xCp3FM226NwtFszwc3Hx5v4&amp;object_id=&amp;experiment=new_notifications" style="color:#353a3d" target="_blank" data-saferedirecturl="https://www.google.com/url?q=http://disq.us/url?impression%3D74ac377c-947c-11eb-a96e-1292fcc87f23%26product%3Demail%26object_type%3Dthread%26variant%3Dactive%26forum_id%3D4662211%26utm_source%3Ddigest%26adjective%3Dthread_title%26thread%3D8461061265%26verb%3Dclick%26event%3Dactivity%26threadrank%3D1%26user_id%3D228365963%26adverb%3Dinternal%26zone%3Ddigest%26url%3Dhttp%253A%252F%252F127.0.0.1%253A4000%252Ftensorflow%252Fbazel%252Fabi%252Fc%252B%252B%252F2021%252F04%252F01%252Ftensorflow-custom-ops-bazel-abi-compatibility%252F%253A1rV5xCp3FM226NwtFszwc3Hx5v4%26object_id%3D%26experiment%3Dnew_notifications&amp;source=gmail&amp;ust=1618860065395000&amp;usg=AFQjCNGI8M9CAcerSdcZOBIg2_KCLrCi0w">
Creating TensorFlow Custom Ops, Bazel, and ABI compatibility
</a>

And that's the link:

http://disq.us/url?impression=74ac377c-947c-11eb-a96e-1292fcc87f23&amp;product=email&amp;object_type=thread&amp;variant=active&amp;forum_id=4662211&amp;utm_source=digest&amp;adjective=thread_title&amp;thread=8461061265&amp;verb=click&amp;event=activity&amp;threadrank=1&amp;user_id=228365963&amp;adverb=internal&amp;zone=digest&amp;url=http%3A%2F%2F127.0.0.1%3A4000%2Ftensorflow%2Fbazel%2Fabi%2Fc%2B%2B%2F2021%2F04%2F01%2Ftensorflow-custom-ops-bazel-abi-compatibility%2F%3A1rV5xCp3FM226NwtFszwc3Hx5v4&amp;object_id=&amp;experiment=new_notifications

The problem is in the "url" parameter that points to:

http%3A%2F%2F127.0.0.1%3A4000%2Ftensorflow%2Fbazel%2Fabi%2Fc%2B%2B%2F2021%2F04%2F01%2Ftensorflow-custom-ops-bazel-abi-compatibility%2F%3A

I have really no idea of what's going on.

ashawley commented 3 years ago

I wonder if this is the issue: Why are the wrong URLs detected for my discussions

Also, it seems like the embed code changed a long time ago:

https://blog.disqus.com/improve-your-disqus-integration-with-our-updated-embed-code

ashawley commented 3 years ago

If someone would be interested in updating the Disqus code snippet in Pixyll, see #439. It should probably be done, regardless, but we can see if that improves things or not for this issue.