Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Is there any way to have a proper thumbnail for twitter? #7

Closed
thodorisbais opened this issue Oct 20, 2017 · 25 comments
Closed

Is there any way to have a proper thumbnail for twitter? #7

thodorisbais opened this issue Oct 20, 2017 · 25 comments

Comments

@thodorisbais
Copy link

@thodorisbais thodorisbais commented Oct 20, 2017

Right now it is displayed like this, which I am not that fond of
screen shot 2017-10-20 at 21 55 25

@artemsheludko
Copy link
Owner

@artemsheludko artemsheludko commented Oct 29, 2017

To be honest, I do not know. I never thought about it. If I find a solution I will write to you.

@thodorisbais
Copy link
Author

@thodorisbais thodorisbais commented Oct 30, 2017

Yes, I believe it would be a great step for this project to also support such a feature.
Let me know if you need any help.

@artemsheludko
Copy link
Owner

@artemsheludko artemsheludko commented Oct 31, 2017

Okay, thanks!

@kentonh
Copy link
Contributor

@kentonh kentonh commented Nov 9, 2017

This should probably be done through Twitter cards and if that's being added, it might be good to add Facebook Open Graph data

@thodorisbais
Copy link
Author

@thodorisbais thodorisbais commented Nov 10, 2017

I will take a look until EOD and close the issue if it is the case!
Thanks a lot @kentonh anyways!

@thodorisbais
Copy link
Author

@thodorisbais thodorisbais commented Nov 11, 2017

Was a bit late (Friday hah), will do it today.

@thodorisbais
Copy link
Author

@thodorisbais thodorisbais commented Nov 11, 2017

Solution looks good, but how could we enhance it so that the image of the post is being displayed in the thumbnail? @kentonh
screen shot 2017-11-11 at 22 04 59

@kentonh
Copy link
Contributor

@kentonh kentonh commented Nov 11, 2017

I️ think I️ need to update the image url in the code. It’s working on my local fork, but it must be correct for file structure.

@thodorisbais
Copy link
Author

@thodorisbais thodorisbais commented Nov 11, 2017

@kentonh since I noticed it was merged, I thought it would be "plug'n'play", but of course, the project itself is mostly specific to Artem's details.
However, I'm still facing some trouble. Could you please help? https://github.com/toubou91/toubou91.github.io

@kentonh
Copy link
Contributor

@kentonh kentonh commented Nov 12, 2017

@artemsheludko I've made a new PR #12 to clean up the implementation.

@kentonh
Copy link
Contributor

@kentonh kentonh commented Nov 12, 2017

@toubou91 I've made a new PR that removes the need to edit _includes/head.html for your specific site implementation. Once merged, you should be able to update and all social graph and twitter card meta information will be determined via Jekyll's _config.yml file

@artemsheludko
Copy link
Owner

@artemsheludko artemsheludko commented Nov 12, 2017

@kentonh Thank you for your time. Good job!

@thodorisbais
Copy link
Author

@thodorisbais thodorisbais commented Nov 12, 2017

Gonna check in a bit, thanks a lot!

@thodorisbais
Copy link
Author

@thodorisbais thodorisbais commented Nov 12, 2017

@kentonh for facebook and linkedin it seems to work fine, but for twitter I keep having the same issue, as depicted above.

@thodorisbais
Copy link
Author

@thodorisbais thodorisbais commented Dec 11, 2017

Wow @artemsheludko , 29 days ago I left this repo with less than 90 forks, good job man 👍 .
Sorry for my inactivity guys, other stuff kept me away from testing this feature.
Hopefully, I will find some time during this weekend.

@artemsheludko
Copy link
Owner

@artemsheludko artemsheludko commented Dec 11, 2017

@toubou91 Thank you for your active participation in the project.

@thodorisbais
Copy link
Author

@thodorisbais thodorisbais commented Jan 8, 2018

Still the same. It doesn't work for twitter. I have merged the latest changes, but of course something might have gone wrong again. Could you please check?

@gutblog
Copy link
Contributor

@gutblog gutblog commented Feb 11, 2018

I think I just solved this issue with my pull request: #24

Example tweet with card: https://twitter.com/gutfeelingblog/status/962733501429592064

@thodorisbais
Copy link
Author

@thodorisbais thodorisbais commented Feb 25, 2018

I just synced my fork, but it still doesn't work for Twitter:

screen shot 2018-02-25 at 21 32 17

I mean, it only displays a card, instead of the post's image, as you showed in your last comment @gutblog

@gutblog
Copy link
Contributor

@gutblog gutblog commented Feb 25, 2018

@thodorisbais Please try your article's URL in https://cards-dev.twitter.com/validator and see if it shows you a valid card. AFAIK The validator will pull the most recent version of your site, so if you get a valid card using the validator, it should propagate to the rest of Twitter within a few minutes.

Otherwise, we might be able to help if you post the error from the Twitter validator, along with the final HTML meta tag snippet that it is reading in your site to try to construct the card.

@thodorisbais
Copy link
Author

@thodorisbais thodorisbais commented Feb 25, 2018

@gutblog the card is said to be properly validated from the site:

screen shot 2018-02-25 at 22 56 57

Am I configuring the post images in a wrong way maybe in my fork?

@gutblog
Copy link
Contributor

@gutblog gutblog commented Feb 25, 2018

@thodorisbais Your final, compiled code:

<meta name="twitter:image:src" content="/assets/img/git-logo.png">

Twitter images need to be absolute URLs if I am not mistaken (they must include your website's domain name). The culprit is your _config.yml file, which does not have your site's URL defined. Change your _config.yml line 6 from:

url: "" # the base hostname & protocol for your site, e.g. http://example.com

to

url: "https://thodorisbais.github.io" # the base hostname & protocol for your site, e.g. http://example.com

and your Twitter photo should start working!

@thodorisbais
Copy link
Author

@thodorisbais thodorisbais commented Feb 25, 2018

OH. MY. GAD.
We learned something today!
Many thanks @gutblog 😃
(Finally) closing (after 4 months 😆 )

@ricoms
Copy link

@ricoms ricoms commented Aug 5, 2020

I'm trying to solve this issue nowadays, and I can't find how. I included in head.hml:

<meta name="twitter:card" content="{{ '/assets/img/twitter-card.png' | relative_url }}" />

and the image is available at that local path, although testing on twitter-validator I get this:

INFO:  Page fetched successfully
INFO:  14 metatags were found
INFO:  twitter:card = /assets/img/twitter-card.png tag found
ERROR: Invalid card name (Card error)
@ricoms
Copy link

@ricoms ricoms commented Aug 5, 2020

I finally understood the problem, twitter:image only accepts absolute URL path to the image.

Here is the solution.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Linked pull requests

Successfully merging a pull request may close this issue.

None yet
5 participants