I'm not aware of link designing strategies, so I am not sure why my link gets chopped off when someone clicks on from sources like Facebook etc.
I have a 'share feature' on my platform, which lets a user create a link to their listing and share it with people.
The link I generate for the listing in my backend has parameters, which reads the listing id and the type and displays content over HTML
Here's a sample link for a listing
https://www.fayvors.com/Share.html?hash=5eccccaa-7b8d-42bd-af8c-08d50da0c867?type=lessons/
However, when I share the link on facebook and click it, the browser redirects to a link that's cut off
https://www.fayvors.com/Share.html?hash=5eccccaa-7b8d-42bd-af8c-08d50da0c867%3Ftype%3Dlessons
I'm not aware of link designing principles, so I'm a bit lost here!
Thanks!
Your URL contains “special characters” (like a second question mark inside the query string), but you neglected to apply proper URL encoding when putting this URL as a parameter value into another URL:
javascript:window.location.replace('https://www.facebook.com/sharer/sharer.php?u='+window.location)
Use encodeURIComponent on the value you are concatenating to the sharer URL here.
Related
I've came across this page https://www.tumblr.com/examples/share/sharing-links-to-articles.html which shows a possible way to customly create a share URL for tumblr.
Simplified version of what they have:
Click to share
http://jsfiddle.net/m5ow6bhs/2/
This will take you to the log in page or straight to the share page if you're already logged in. However, if you change the http%3A%2F%2F part to a simple http:// it will now load to a "Not Found Page". http://jsfiddle.net/m5ow6bhs/3/ What the hell Tumblr?
Do you guys have any idea what's going on or what's the correct code to share something to Tumblr?
Cheers.
As with most share services, the URL should be passed as an encoded string. This supports the OPs comments about http%3A%2F%2F(encoded) and http:// (raw).
Tumblr provides variable transformations in the theme operators to handle encoding, but sadly it doesn't work with custom variables.
One quick solution is to drop the http:// part. Example: http://jsfiddle.net/L9jd8dhz/
I have discovered as of recently that the share URL needs to be updated as such:
https://www.tumblr.com/widgets/share/tool?shareSource=legacy&canonicalUrl=<-urlencode(share_url)->&posttype=link
The &posttype= seems to be a new requirement to make the share work correctly.
I am attempting to use the standard Facebook share button to share a deep link into my iframe page tab of the form:
https://www.facebook.com/YourPage?v=app_1234567890&app_data=any_string_here
where app_data content is a deep link relative path into my iframe page tab app content
(e.g. /path/to/page_that_I_shared_from).
Just to be clear, there is a Share button on my iframe app page, and I am trying to generate the link back to that page to be shared.
I place the absolute URL above into the data-href parameter per the Share Dialog documentation, and when I click the Share button, the url in the share dialog is of the form:
https://www.facebook.com/sharer/sharer.php?app_id=my_app_id&sdk=joey&u=url_encoded_version_of_the_absolute_url_above&display=popup
but when the post is rendered, the query string is stripped completely.
Note that if I use a non-Facebook URL, the query string is preserved.
I do notice that app_id parameter in the share dialog URL - perhaps the fact that this is coming from inside the page tab iframe makes a difference.
Initial testing with the feed dialog looks promising, but I'd like to use the share button since it provides more flexibility as to the destination of the post.
The final solution was to generate the link like so:
https://www.facebook.com/pages/<page id>/<page id>?id=<page_id>&sk=app_<FB_app_ id>&app_data=<deep link>
where deep_link is a relative URL with a query string that starts with a '?' and has the '&' characters replaced with '|' characters (poor man's encoding that I decode on the way in).
I saw several suggestions (mostly here on SO) to double or even triple encode the app_data URL - none of these worked, and usually they resulted in links that could not be posted by the sharer.php script.
I've been reading guides and examples for a long time (hours) but I can't manage. I tried to use all html meta tag like title, description, and og:property. Also tried to use the link sharer and also to create a new blank page with just the info I want to share to facebook in order to test. Also I tried to generate an random url in php so to have always a different url variable (the url to share and also the url of the main page containing the script). I also grabbed (url linter) a lot of time the url to clean the cache of facebook. It always give me the title of the site domain as title or the url itself as the shared title and description. I don't know what to do.
The main web site is from joomla. In the code of index of joomla I put a php include if the url has the variable "articolo" id. This incuded php page has regulat head body etc. So maybe I facebook check the main meta of joomla first? So now I tried to open a popup with just the page for sharing. Look here: link
It's possible that the title is locked in, meaning that after X number of likes Facebook doesn't allow you to change it anymore. Can you give us an example URL you're having issues with?
EDIT
Ok, now the link you provided shows some very interesting output. http://modernolatina.it/wjs/index.php?option=com_content&view=article&id=96&Itemid=258&autore=6&articolo=6
First, you webserver, instead of sending back a 200 code, is sending back a 500 code.
Secondly the HTML your webserver is sending back has two HTML tags (Do a view source on the content returned)
Fix up those two issues and I think the linter will be happier with your page.
Test your page here:
http://developers.facebook.com/tools/debug
I have seen when you visit a profile on FB and click on link provided in
Contact Information --> Website
Facebook first take you to url format mentioned below
http://www.facebook.com/l.php?u=http%3A%2F%2Fwww.nwaonfire.com%2F&h=BAQByDCFo
and then takes you to the site .
My question is why facebook does so, Iam asking because there is a place in my application where iam allowing users to enter website urls.
...and the reason for facebook using the mentioned link instead of linking directly to http://www.nwaonfire.com is that facebook is evil.
They want to know which links are popular, where their users are going and where the link came from.
I also see a format as http://www.facebook.com/l/BAQByDCFo/www.nwaonfire.com where the BAQByDCFo is a hash value.
URL encoding is done so that a second URL can be placed within the first's query string without breaking the original URL. For example, implying directory structure by using the "/" character or breaking out of name value pair by using "&". If you're going to be embedding a URL as a query string parameter, you must encode it first. How you do this will differ depending on the language you're working with but most web based frameworks have a native or library based function to easily do this.
I'm trying to implement a feature like that where a user inputs a url and when displaying that url I want to have a custom display (an embed object if it's a video from youtube, a thumbnail if it's an image link, title and excerpt of body if it's a normal link).
How can such a feature be realized?
There is a new idea called oEmbed that a few sites support (Flickr, Vimeo and a few others) that addresses this problem. oEmbed site
Otherwise, just check the site against a list of ones you pick and then pull out the relevant bits to construct an embed link.
I liked the idea of oEmbed a lot but unfortunately it doesn't has that much adoption yet.
oohEmbed tries to solve this issue by building oEmbed for many websites.
For the feature to work, it needs the server's interaction where I believe the following scenario is how it works
Assume that we have the site humanzz.com and that it provides such feature
A user enters a url on the humanzz.com's webpage and presses a button like facebooks' preview button
An AJAX call is made to a dedicated page on humanzz.com
humanzz.com does calls the remote website and gets its data
The AJAX call now returns the page's data (oEmbed JSON object)
This involves so much server's overhead.
I really wanted to do it using JavaScript as the server's role was only to bypass "Same Origin Policy"'s restrictions.
oohEmbed allows bypassing the server's step by specifying a callback parameter to oohEmbed so that the JSON object returned is passed to a callback function on your page.
An example illustrating this is as follows
Add a script tag dynamically to your page
< script type="text/javascript" src="http://oohembed.com/oohembed/?url=http%3A//www.amazon.com/Myths-Innovation-Scott-Berkun/dp/0596527055/&callback=myCallBack">< /script>
This would result in executing myCallback(oEmbedJSONObject) which is great.
The problem with that solution is you still have to have a fallback for websites that don't have oEmbed representations.
For the embedded things, I have been using auto_html ( https://github.com/dejan/auto_html) with great success (vimeo, youtube, images) and even added soundcloud myself. But I am still looking for a "thumbnail" generation with an image and text facebook-like.
I guess you have to construct it by yourself by manually parsing the kind of URL you get.
If it is an image url, well then you just have to rescale it and in case the user clicks on it, then handle that by opening the original one somehow.
If it is a link to some youtube video, then you have to take a look at how the embedding of Youtube videos works. You can just copy the code that is provided by Youtube itself, and then exchange the parts with the URL to the video with the URL you got from your user.
I did never implement something like that, but I assume it should work somehow like this.