search

SoftwareEngineeringDaily / sedaily-front-end

Web frontend for Software Engineering Daily
https://softwareengineeringdaily.github.io/
MIT License
79 stars 40 forks source link

Rendering Previews on Social Sharing #376

Closed crablar closed 6 years ago

crablar commented 6 years ago

What is required for this?

gmemstr commented 6 years ago

I believe these resources could help:

Twitter cards

How can I set a website image that will show as preview on Facebook?

TheHollidayInn commented 6 years ago

http://ogp.me/ https://github.com/declandewet/vue-meta

joshmorel commented 6 years ago

Great resources! I'll take this on as a continuation of the prerender work.

joshmorel commented 6 years ago

I've gotten Twitter cards to validate properly so far which is great. But before continuing, here is what I was thinking to implement custom meta for by router components. @crablar - let me know if you have other thoughts on what you were expecting.

There will also be a generic Summary card for the site with SED Title and Logo for any other route.

For Facebook they will all be Share Dialogs from what I can tell in reading the docs - but haven't done any testing around this.

joshmorel commented 6 years ago

I may have spoke to soon about using the Audio Player Card. There may be some complications due to audio player requirements - can't autoplay etc. I'd also need to get an approval before even being able to truly test how it will work within twitter.

@crablar , If this is something you even want perhaps it's best to get the summary cards working properly first.

crablar commented 6 years ago

Sounds good--are there some simple meta tags we are missing? The links aren't even expanding in Slack.

On Thu, Apr 5, 2018 at 8:51 AM, Josh Morel notifications@github.com wrote:

I may have spoke to soon about using the Audio Player Card. There may be some complications due to audio player requirements - can't autoplay etc. I'd also need to get an approval before even being able to truly test how it will work within twitter.

@crablar https://github.com/crablar , If this is something you even want perhaps it's best to get the summary cards working properly first.

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/SoftwareEngineeringDaily/sedaily-front-end/issues/376#issuecomment-378983940, or mute the thread https://github.com/notifications/unsubscribe-auth/ABOUEuHFDOR-OqeA0hruHLuubzG4ots4ks5tlj2IgaJpZM4TETeP .

-- Thanks, Jeff Meyerson Host of Software Engineering Daily http://www.softwareengineeringdaily.com/ jeff_meyerson on Skype 512-217-0273

joshmorel commented 6 years ago

With this PR the twitter cards and slack unfurling should work very similar to as with WordPress now.

The following meta tags were required (with example) for it to work similar to WordPress. Note that the data-vmid and data-vue-meta are vue related so only the content and one of either property (open graph) or name (twitter, others) are truly required for social sites.

<meta data-vmid="twitter:card" name="twitter:card" content="summary_large_image" data-vue-meta="true">
<meta data-vmid="og:title" property="og:title" content="High Volume Distributed Tracing with Ben Sigelman" data-vue-meta="true">
<meta data-vmid="og:url" property="og:url" content="https://sedaily-staging2.herokuapp.com/post/5a57a41934325b917b246280" data-vue-meta="true">
<meta data-vmid="og:description" property="og:description" content="You are requesting a car from a ridesharing service such as Lyft.  Your request hits the Lyft servers and begins trying to get you a car. It takes your geolocation, and passes the geolocation to a service that finds cars that are nearby, and puts all those cars into a list. The list of nearby cars is sent to another service, which sorts the list of cars by how close they are to you, and how hig..." data-vue-meta="true">
<meta data-vmid="og:image" property="og:image" content="https://softwareengineeringdaily.com/wp-content/uploads/2018/01/Lightstep2.png" data-vue-meta="true">

I added these as well, but I'm not sure exactly how they are used but perhaps for stats these are important:

<meta data-vmid="twitter:site" name="twitter:site" content="@software_daily" data-vue-meta="true">
<meta data-vmid="twitter:creator" name="twitter:creator" content="@the_prion" data-vue-meta="true">