Closed valleyofdawn closed 7 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.
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:
og:title
- The title of your object as it should appear within the graph, e.g., "The Rock". Perhaps add that as an additional input from the user in the share dialog.og:type
- Probably <meta property="og:type" content="website" />
og:image
- An image URL which should represent your object within the graph. The site icon (easy) or an thumbnail of the map (hard).og:url
- The canonical URL of your object that will be used as its permanent ID in the graph, e.g., "http://www.imdb.com/title/tt0117500/".I suggest also adding:
og:site_name
og:latitude
og:longitude
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>
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.
@valleyofdawn did you have a change to test the above link?
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...
I understand that
tcGvMv93IG
.A possible approach can be
http://israelhiking.osm.org.il/#/?thumb=tcGvMv93IG
, it returns the thumbnail image associated with the given key./#/?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" />
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.
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.
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...
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?
Alternatively, my above assumption is incorrect:
2 . The server side embeds the key within the HTML/JavaScript file it sends back to the client.
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.
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.
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...
I use https://sourceforge.net/projects/greenshot/ which makes it very simple:
It also has its own simple editor where you can annotate and crop the screenshot
If we are ever interested in creating a thumbnail of a track
or an animated gif of it
then we can take the OSM code that does it. The code uses the GD library. Its windows port project is on GitHub.
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
The trace line is a bit thin, so some additional magick commands are required to thicken it.
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.
This is what a post from Strava looks like:
In case we'd like to add Way and Surface distribution like this:
The Java code is available at the GitHub relation-analyzer repository
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.
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!
You can do it!
Seems I can. I need from you two things now:
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.
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
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.
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) Here is a screen shot I made of the site itself and I resized it: 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?
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.
I can't relate, but I trust your social media skills. Here is a more polished picture: I think that other data can be published via text and no in an image, but I need to recheck the FB API.
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 .
@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...
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.
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.
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.
Server can be tested in the following link: http://israelhiking.osm.org.il/api/images/sx9tb5QQx3 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.
What kind of database is it? Most SQL databases are able to store images as "blobs", just as Oruxmaps uses it.
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.
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
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.
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.
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.
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...
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...
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: בקרוב: שיתוף מסלולים הדור הבא.
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.
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.
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.
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?
Also a little more margin space would look better
An automatic thumbnail of tracks would be nice to have when posting to facebook.