search

IsraelHikingMap / Site

Israel Hiking Map has maps, route planning, and travel information for Israel. This repository holds the files needed for running the Israel Hiking Map site and apps.
https://israelhiking.osm.org.il/
Other
77 stars 31 forks source link

Posting tracks to Facebook #156

Closed valleyofdawn closed 7 years ago

valleyofdawn commented 8 years ago

An automatic thumbnail of tracks would be nice to have when posting to facebook.

HarelM commented 8 years ago

Can you please elaborate on the flow the user should be doing and what should be the end results? for example - the user should click the share button and then instead of clicking the "go" he will have a facebook icon which will open another browser tab with facebook "compose" message... I don't know how to continue this as I have very limited experience with facebook... Thanks.

zstadler commented 8 years ago

I suggest that the HTML page we return upon reference to a shared link will include links in the <head> section according to The Open Graph protocol.

In particular, the four required properties for every page are:

I suggest also adding:

For our reference, here are the relevant contents of the <head> section provided by GPSies.com for this trail. There are also non-Open Graph entries we could add.

<meta property="og:site_name" content="GPSies.com"/>
<meta property="og:type" content="activity" />
<meta property="og:url" content="http://www.gpsies.com/map.do?fileId=ozzsxalxiasfaupo" />   
<meta property="og:title" content="Mountainbike Tour מועצה אזורית ערבה תיכונה | ההר החלק ונחל זרחן | GPSies" />
<meta property="og:description" content="Strecke in מועצה אזורית ערבה תיכונה, מחוז הדרום, Israel. Mountainbike Tour, Länge 40.08 km (Rundkurs)." />
<meta name="title" content="Mountainbike Tour מועצה אזורית ערבה תיכונה | ההר החלק ונחל זרחן | GPSies" />
<meta name="description" content="Strecke in מועצה אזורית ערבה תיכונה, מחוז הדרום, Israel. Mountainbike Tour, Länge 40.08 km (Rundkurs)." />
<meta name="geo.position" content="30.9146458;35.0179134" />
<meta name="ICBM" content="30.9146458, 35.0179134" />       
<meta property="og:latitude" content="30.9146458"/>
<meta property="og:longitude" content="35.0179134"/>
<meta property="og:image" content="http://www.gpsies.com/renderMap.do?fileId=ozzsxalxiasfaupo" />
<link rel="image_src" type="image/png" href="http://www.gpsies.com/renderMap.do?fileId=ozzsxalxiasfaupo" />
<title>Mountainbike Tour מועצה אזורית ערבה תיכונה | ההר החלק ונחל זרחן | GPSies</title>
HarelM commented 8 years ago

I'm guessing most of it can be placed regardless whether or not I'm sharing a link. Some of it is related to the link I'm sharing and I think I can use javascript code to manipulate it. Can you check that if I the file I added can be shared in facebook like you want? http://israelhiking.osm.org.il/delete_me.html The file is just a copy-paste of the above information. Don't worry about the name, it won't delete anything it's just a name so that I'll delete this file eventually.

HarelM commented 8 years ago

@valleyofdawn did you have a change to test the above link?

HarelM commented 8 years ago

Current implementation only shows the IHM icon and not the shared route thumbnail. Unfortunately I couldn't make IIS receive the url parameter in order to create the relevant thumbnail. here's why: the link is something like: http://israelhiking.osm.org.il/**#/?s=tcGvMv93IG** the last part is client side data that is not sent to the server when the user comes to the above address. so the file served in this request is the index.html file and after that the javascript client side code starts acting and manipulating the page. facebook crawler and whatsapp do not run the javascript code so they only get the original index.html file. since the server does not have the url data it will always server the same index.html file. this is off course due to the fact that this is a single page application, but I'm not planning on changing that...

zstadler commented 8 years ago

I understand that

  1. The server side keeps all the data associated with the key, such as tcGvMv93IG.
  2. The server side embeds the key within the HTML/JavaScript file it sends back to the client.

A possible approach can be

  1. The thumbnail images are also saved on the server and associated with the key.
  2. When the server receives a thumbnail request URL, such as http://israelhiking.osm.org.il/#/?thumb=tcGvMv93IG, it returns the thumbnail image associated with the given key.
  3. The server embeds the appropriate thumbnail request URLs in the responses to all /#/?s= requests instead of the generic Israel OSM logo.

This is similar to how GPSies provide the thumbnail in the above example for http://www.gpsies.com/map.do?fileId=ozzsxalxiasfaupo

<meta property="og:image" content="http://www.gpsies.com/renderMap.do?fileId=ozzsxalxiasfaupo" />
<link rel="image_src" type="image/png" href="http://www.gpsies.com/renderMap.do?fileId=ozzsxalxiasfaupo" />
HarelM commented 8 years ago

Its not similar to GPSies - their client architecture is not build as SPA (single page application). Your logic is sound in case the server receives a call to /#/?thumb, unfortunately the server will never receive that call when facebook crawler or whatsapp will surf to /#/?s=... which is the shareable URL since they don't run the javascript code that should alter the open graph metadata in the html head tag. The GPSies is serving a full html with the relevant part changed using a template - might be ASP.Net MVC with Razor, PHP or any other server side technology. we don't :-( You can see that when you click on anything in their page the whole page refreshes including the navigation bar. This does not happen on our site, it does not get fully refreshed, the DOM elements are manipulated in order to create the relevant UI.

zstadler commented 8 years ago

Maybe I did not explain myself well enough.

I believe that if the <head> section of http://israelhiking.osm.org.il/#/?s=KieBlxrOnG includes

<meta property="og:image" content="http://IsraelHiking.osm.org.il/#/?thumb=KieBlxrOnG" />
<meta property="og:image:url" content="http://IsraelHiking.osm.org.il/#/?thumb=KieBlxrOnG" />
<meta property="og:image:secure_url" content="https://IsraelHiking.osm.org.il/#/?thumb=KieBlxrOnG" />

instead of 

<meta property="og:image" content="http://israelhiking.osm.org.il/content/images/favicons/android-chrome-192x192.png" />
<meta property="og:image:url" content="http://israelhiking.osm.org.il/content/images/favicons/android-chrome-192x192.png" />
<meta property="og:image:secure_url" content="https://israelhiking.osm.org.il/content/images/favicons/android-chrome-192x192.png" />

Facebook/WhatsApp will request http://IsraelHiking.osm.org.il/#/?thumb=KieBlxrOnG from the server regardless of the fact that the JavaScript will not be run.

HarelM commented 8 years ago

No, I fully understand you, it is I who have a hard time explaining myself. The response for every link request will return the same html from the server. The html that is returned no matter which parameter is passed after the s= is index.html. this file is static and fetched from the server. The server never gets the parameter value in the url and therefore can't change index.html accordingly. I hope I managed to explain myself this time...

zstadler commented 8 years ago

You mean that GPSies server receives the ?fileId=ozzsxalxiasfaupo parameter, and can act upon it, but the IsraelHiking server does not receive an equivalent ?thumb=KieBlxrOnG parameter?

zstadler commented 8 years ago

Alternatively, my above assumption is incorrect:

2 . The server side embeds the key within the HTML/JavaScript file it sends back to the client.

HarelM commented 8 years ago

Yes, gpsies server gets the url parameter after the ? and IHM server doesn't. The main difference is the # that is present in our site and is not in gpsies.

valleyofdawn commented 7 years ago

Another site that does facebook sharing well is Strava. I'd love to be able to share the new poi scheme without screengrabbing cropping cutting saving and uploading.

HarelM commented 7 years ago

If you find a facebook API that allows it then I might be able to add it, otherwise I don't think I'll spend my time to reduce a few clicks. besides, if you have OneNote, which most PC have today you could just use WinKey+S on win 7 and WinKey+Shift+S on Win 10 to reduce even more clicks...

zstadler commented 7 years ago

I use https://sourceforge.net/projects/greenshot/ which makes it very simple:

  1. Press PrintScreen
  2. Click-and-Drag the mouse
  3. Alternatively:
    • Save to clipboard and paדte somewhere
    • Save to file and attache it from the Screenshots directory

It also has its own simple editor where you can annotate and crop the screenshot

zstadler commented 7 years ago

If we are ever interested in creating a thumbnail of a track

1865334_icon

or an animated gif of it 1865334

then we can take the OSM code that does it. The code uses the GD library. Its windows port project is on GitHub.

zstadler commented 7 years ago

A non-animated option:

gdal_rasterize -tr 0.001 0.001 -init 256 -burn 0 -of BMP -ot Byte -l tracks foo.gpx foo.bmp

ImageMagick will then shrink/expand the image to fit within a desired size

magick convert foo.bmp -resize 256x256 -background white -compose Copy -gravity center -extent 256x256 foo.png

negevhighlandtrail

The trace line is a bit thin, so some additional magick commands are required to thicken it.

HarelM commented 7 years ago

I thought about it some more and although it looks "cool" it doesn't really help besides distinguishing between post as you can't really see anything but the line it self, no location, no near by cities etc. The name itself is a lot more informative assuming you give it a good name. This and the fact that our client side architecture doesn't support this at the moment make the effort of trying to implement it almost non appealing.

zstadler commented 7 years ago
  1. It was is meant to run on the server side, when the server creates the unique short URL and stores all the data for it.
  2. Potentially, ImageMagick can also add the background tiles.
valleyofdawn commented 7 years ago

This is what a post from Strava looks like:

image

zstadler commented 7 years ago

In case we'd like to add Way and Surface distribution like this:

2016-09-02 09_49_51-osm relation analyzer - -

The Java code is available at the GitHub relation-analyzer repository

HarelM commented 7 years ago

This is one of the options but from the list of limitations it doesn't look like it much of use to us - most of the markers on our map are HTML and will not be shown in this image: https://github.com/mapbox/leaflet-image The other and probably better options is a server side code, but I'm still not sure how to use it: https://github.com/aratcliffe/Leaflet.print

On a side note, below is how their share a route via e-mail look like which is disappointing, so I'm not sure how they made the facebook share look so good and left the e-mail sharing this ugly.

bottom line, it's very complicated. image

HarelM commented 7 years ago

I might have found the answer to this issue after digging deep into stack overflow: The following question describes a way to get the server to receive the relevant part of the path when facebook sends in the crawler: http://stackoverflow.com/questions/14880142/facebook-replaces-v-urls-by-escaped-fragment-when-sharing basically, is looks for the "!" and replace it with escaped_fragment_= which will send the missing parameter to the server. this will allow the server to respond with the right open-graph parameters including anything we want. The following post is about redirection of the relevant part: https://stuffishouldremember.wordpress.com/2014/02/02/yearofmoo-angularjs-seo-on-iis/ Bottom line, doable!

valleyofdawn commented 7 years ago

You can do it!

HarelM commented 7 years ago

Seems I can. I need from you two things now:

  1. What are the minimal requirements - what would be the basic post you would consider enough.
  2. What is your wet dream in terms of sharing a post - everything you ever thought might be good. I'll try to get to the minimal and work from there up to add more stuff. Need a mock up/screenshot/word document/whatever. Note that there aren't many things that you can share - mainly an image, header and text as far as I can tell.
valleyofdawn commented 7 years ago

I guess sharing can be of an area, a point or a course. At a minimum I would like it to emulate GPSies, with just a line, at a maximum I would like Facebook to emulate Strava, with some style changes. Show a section of the shared map, containing the entire course, with the course. Green and red dots at the start and end. Length and total elevation. Standard shared link thumbnail is 470px X 246px. The text can be Harel Mazor shared a course from the Israel Hiking Map. If just a POI, then maybe the coordinates. The text should change accordingly.

HarelM commented 7 years ago

Note that I'm currently not planning to change the behavior of share: The main definition of the share right now is "what you see is what you get". I think the way to share right now is easy and should not be any more complicated than it is now. Having said that, the post itself on face book can look a lot better and this is what I plan to change in this feature. I will emphasize what I need from you: two images to define how a facebook post will look like

  1. minimal requirements.
  2. maxinal requirements. The image itself can be made with paint/photoshop/whatever picture editor you like. I want to know how you would like it to look when you post it to facebook. for example, the image from strava can be the maximal.

The only thing I though might be missing in our current share ability is the option for a user to add a title to what he is sharing...

more screenshot from other site might also help us discuss what is good and what needs to be improved.

HarelM commented 7 years ago

I have an initial code that fetches the right tiles, uses the data in the database to draw the route on the tiles and just for test I write it to my local drive. Below is what I manged to create - note that the track is in black (1 px wide) temp Here is a screen shot I made of the site itself and I resized it: image Let's assume for a moment I can mimic what we have in the site. In Facebook it will be even smaller I think, which have very little information... It's fun to code it, but I don't think it's very useful. would you be happy if you had this image when sharing a post?

valleyofdawn commented 7 years ago

I don't think its meant to be informative. It's meant to be eye candy. Something that would make you curious enogh to click on it and go to the site. It also should make you think "why wouldn't I share my planned trip like this next time?". I would use a smaller map zoom. So that the entire track is shown with nice-looking margins in the confinement of the standard link thumbnail of FB. Make the trail thicker and start and end more prominent. Add a user name, track title, length and elevation.

HarelM commented 7 years ago

I can't relate, but I trust your social media skills. Here is a more polished picture: image I think that other data can be published via text and no in an image, but I need to recheck the FB API.

valleyofdawn commented 7 years ago

Looking good.

בתאריך 10 באוק׳ 2016 00:29,‏ "Harel M" notifications@github.com כתב:

I can't relate, but I trust your social media skills. Here is a more polished picture: [image: image] https://cloud.githubusercontent.com/assets/3269297/19223742/fb407e36-8e7f-11e6-8ba2-e432f5c04e37.png I think that other data can be published via text and no in an image, but I need to recheck the FB API.

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/IsraelHikingMap/Site/issues/156#issuecomment-252513923, or mute the thread https://github.com/notifications/unsubscribe-auth/AAqEMeUTHWQcYEMK1qDvsqfgWxRsgQH0ks5qyVyogaJpZM4H74zS .

HarelM commented 7 years ago

@valleyofdawn @zstadler Found the right tool for the job finally: allows to see how posts will be seen in facebook: https://developers.facebook.com/tools/debug/og/object/ The following link can be tested there to see how it will look: http://israelhiking.osm.org.il/#!/?s=sx9tb5QQx3 This is a short route I tried for debug. Note that this is not the regular share address as it contains a "!" after the "#". The site currently support this pre-released feature and you can test it to see if it gets good results before I fully integrate it. Please let me know if current functionality is somehow damaged - meaning that current links do not have the regular symbol. I have a feeling it does due to some test I made but I'm not sure... image

valleyofdawn commented 7 years ago

The graphics look great, but they should ideally occupy the whole width of the post, like in the strava and trailforks example. The text should focus on the user, not the site.

HarelM commented 7 years ago

I can't find a way to change the text from the facebook documentation, I'm not sure how Strava is doing it. I'll take care of the picture size - it's too small so facebook puts it in the side. I'm not sure the text should focus on the user and not the site, the user can write whatever he wants above the link. I'll update the picture generation and let you play with it again.

zstadler commented 7 years ago

It look like the text is taken from property="og:description". Since we don't have one, Facebook constructed it from from name="description".

The Warnings That Should Be Fixed also say:

The 'og:url' property should be explicitly provided, even if a value can be inferred from other tags.

HarelM commented 7 years ago

Server can be tested in the following link: http://israelhiking.osm.org.il/api/images/sx9tb5QQx3 image The problem is that creating the images takes too long for facebook, and I'm concerned that adding this data to the database will cause it to explode. the other option is to create an image and save it in the file system, which is not so great since the database and the file system are not linked... I'll continue thinking about it.

zstadler commented 7 years ago

What kind of database is it? Most SQL databases are able to store images as "blobs", just as Oruxmaps uses it.

HarelM commented 7 years ago

SQLite, the database itself is more than capable of doing it, but it's already 75 Mb and this is without any images, just small links with pure data on routes etc.

valleyofdawn commented 7 years ago

Wouldn't it save space and allow FB to process it faster if the image is exactly the size FB specifies? 470 x 246 px

https://havecamerawilltravel.com/photographer/images-photos-facebook-sizes-dimensions-types

HarelM commented 7 years ago

Probably, but I'll get a headache trying to write the code to create an image in that size that contains the relevant routes... Also according to facebook the size you mentioned will not get a full size image, I think: https://developers.facebook.com/docs/sharing/best-practices I'm not sure why but currently I'm trying to share the following address with a local file and it doesn't work: http://israelhiking.osm.org.il/test.html it has all the relevant tags but for some reason the share image is empty. So it might be it and not the time the site is taking to respond.

zstadler commented 7 years ago

We can use the Imagick command-line or API to resize the image before storing it in the DB.

Do we want a full-size image? If we're talking about full-size images, note that Facebook recommends having a 1.91:1 aspect ratio.

There is also a section about "Pre-caching images" where they also recommend

Use og:image:width and og:image:height Open Graph tags

Using these tags will specify the image dimensions to the crawler so that it can render the image immediately without having to asynchronously download and process it.

HarelM commented 7 years ago

I'm now able to see an image in their debugger, might be an issue with the image name or something, I'm not sure. There's no need to use Imagick, .Net has all its goodness built in (as far as I needed until now). The problem is that I want to keep the original images quality as best as I can without resize and moving to this resolution might damage the image, if nothing else help, I'll do it.

HarelM commented 7 years ago

P.S. using the above os:image:height etc doesn't help one bit. I'm getting tired of trying to workaround facebook bugs. a regular site with regular image doesn't seem to be working for some reason, might be the time the server sends back the response, I'm not sure, but those are static files... working with smaller images seem to have better results, I think that using the old smaller thumbnail might be the solution here although the larger image looks a lot better...

HarelM commented 7 years ago

resize to 600x315 does seem to help, but the outcome looks a bit 3D which I'm not sure is a good or bad thing, I'll add the reside code to the server and see if it works... image

HarelM commented 7 years ago

Resize code is up and running. @valleyofdawn can you please try it out the next time you share a route? In order to use it you'll need to add a "!" just after the "#" and the rest should work automatically. If this doesn't work I can create a test site as usual to make the process automatic, but I rather not if we can test it like that. You can even do a "preview" in the facebook group to test it - something like: בקרוב: שיתוף מסלולים הדור הבא.

HarelM commented 7 years ago

I have published the FB fix for sharing, let's see how this will work... I'll be closing this issue in a few days assuming no one will oppose.

valleyofdawn commented 7 years ago

Where do you try out the FB sharing from? A test site? The regular share icon does not produce an image. BTW the one you posted above is distorted, we need to have the original aspect ratio just right.

HarelM commented 7 years ago

You can try it out in the regular site - note that the link should now contain a "!". when sharing this link on Facebook it should generate an image of the route, if it doesn't let me know. Making this image in the required FB ratio requires a lot of work which I don't think I can invest. as you said, this is just for show, so I think it does captures the essence.

valleyofdawn commented 7 years ago

I've posted on our FB page. Let's see people's reactions. I think the map should be zoomed out more so that the place names are legible. Could you elaborate why creating an image that is not square but roughly 1x2 is complicated?

valleyofdawn commented 7 years ago

Also a little more margin space would look better