Adding a URL hash into meta data for Facebook and Twitter share cards - facebook

I am looking to use a hash that is given in through a URL (www.example.com/index.html#myhash) and use it in the page's metadata that Facebook and Twitter can then retrieve to make a share card like this: https://dev.twitter.com/docs/cards/types/photo-card. Is this possible? Or would it be better to just use a PHP $_GET[] variable? I'm trying to keep the page static so the hash would be ideal, but I'm fairly sure I can't dynamically create the meta tag with JS because Twitter and Facebook will not execute that code. Thanks for help!

Correct, creating the meta elements client-side will not work because those crawlers don’t execute any client-side scripting code, they just look at the HTML code they get.
And the hash part of an URL is only of client-side importance, so it does not even get passed to the server when making an HTTP request – so generating those meta elements server-side based on the hash is also not possible.
And finally, changing the hash part of an URL does not make it a different URL – so this is not compatible with Facebook’s Open Graph philosophy, where the equation is one URL == one OG object.

Related

Typo3 Canonical URL in Plugin Pages

I have a typo3 Plugin (my own) which have lots of sub pages.
Now all Pages got their own canonical URL ... but I want that they only have the canonical from the page which contains the Plugin.
Is that possible?
Thanks in advance.
As far as the content changes with the parameters these parameters belong to the canonical URL.
You might not want your parameter specified pages indexed, but that needs other metatags than a non unique canonical url.
A canonical URL is used to have a unique URL for a page which can be accessed with multiple URLs. So Search engines know which URL to use and don't think of duplicate content.
If you really want to fool search engines with multiple content for the same URL you can of cause generate the base URL without all parameters and use it as canonical URL. Mind the value of config.linkVars. Just build your meta tag by hand using page.headerData.

Link query strings get cut off

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.

Get share/like count for different url/bogposts/articles

I am looking for a method to get share/like count for each of the blogposts/articles which I create on my website. Interested in Facebook, LinkedIn and Twitter but Facebook is the most important right now.
Lets take this website as an example: https://googleblog.blogspot.com/
I have found a method to find this out for each url, but that will make it a lot harder for me as I would need to do it manually for each URL.
This is the query I used to get data for a specific URL:
https://graph.facebook.com/v2.7/?id=https://googleblog.blogspot.no/
Is there any method to get data for each and every url which contains: "company name" or something like this?
Will appriciate all the help I can get here.
No, there is no “wildcard” for Open Graph object URLs.
You can however request data for multiple URLs in one go, using the ?ids=foo,bar syntax – https://developers.facebook.com/docs/graph-api/using-graph-api/#multiidlookup
This theoretically works for up to 50 ids in one request (although with the ids being URLs in this case, you might only be able to request less, due to URL length limitations.)

Format of External Links on Facebook

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.

How does facebook's Share a link feature work?

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.