AddThis FaceBook sharing without webpage scraping - javascript

I have a web application that is built on Backbone JS framework, that is most URLs have a hashtag section in them. For example: www.abcd.com/xyz.shtml#/route1
the 'route1' is the name of a defined execution route which causes contents including the meta-tags of the page to be populated dynamically on-load by making a number of AJAX calls to the server. I'm not able to integrate AddThis Facebook-share because when FB scrapes the URL it doesn't execute the JS section defined by the 'route1' and thus none of the meta-tags are populated!
Can anyone suggest me a way to bypass this scraping process of FB and/or lets me supply the relevant parameters to FB and FB posts it directly without messing with the URL?
Many Thanks.

Related

Protecting iframe src using server side rendering

I have to display a third party site, say site X, upon successful authentication from my existing APIs, as it is, on my web site. But due to certain reasons, I cannot afford to use an iframe, which is the most obvious solution in this case, as that will expose the site X's URL when inspected in browser. So, I landed up on another idea to create a web app whose front end is written in AngularJS and use existing back end APIs written in C#. The application will basically have two pages, login and main page. Upon successful authentication from API on login page, user is navigated to main page. Now main page, I have to show another site. So, instead of using iframe on main page having source as site X, I will display an iframe with source Url as one of my API endpoint, say baseURL/data. So, this API will basically fetch the site X data and do something like server side rendering and return me an exact replica of site X which I will load in my webapp. When user will navigate on site X and route to any path, that route will be sent to same API and now the response will be replica of baseURL/data/route. Even though my API endpoint is now exposed instead of site X url in browser console, I am okay with this because that API is protected somehow and cannot be accessed as it is without proper authentication which I am doing in my case on login page.
I want to get more thoughts on this entire scenario and possible alternatives. Also, if anyone can suggest if/how it is possible to write such an API. I can think about changing AngularJS or C# as technologies in my project but definitely that's not the most go-to-solution for me. Any suggestions and thoughts are welcome!
Edit: I have created a site using a static site generator. I want my users to be able to access that site only if they are 'my users' i.e. authenticated by my APIs. But, that generator is not allowing me to integrate my API and neither I can get the static assets like .html, .css and .js files that I can host on my own server and integrate my authentication API. Hence, I had to think about a workaround like this.

How to dynamically render meta tags for social share button on a static site?

I have a static site where users can generate images and content in unlimited combinations. When the user is finished, permalink is generated to allow them to share their creation via Facebook/Twitter/GooglePlus/etc. I want their shared post to contain the user's image and content, but I discovered that the social media bots only parse HTML meta tags from my permalinks, and they do not evaluate any Javascript.
How can I make my user's content appear on the shared social media post? When the permalink is clicked, client side Javascript will evaluate the permalink's query params and render the user's content. I can render the user's content inside HTML meta tags too, which is used by Twitter and FB to populate a post's content, but the bots don't evaluate any javascript, so the meta tags are not rendered.
One possible solution that I have explored is pre-rendering. Perhaps my permalink can be the location of an HTML file on an AWS S3 bucket, which I can create as soon as the user shares their permalink. That HTML file on S3 can have the user-specific meta tags in it, and I can provide that to the social media bots. And when that file is accessed, I can have it redirect to my permalink. Does this seem reasonable? I can report back after trying this out.
Another solution is to use a pre-rendering service, like https://prerender.io/. It seems a bit bulky and black-boxed, but it might be more robust and reliable that my S3 solution above. Any ideas?
I am open to feedback and other solutions, and any suggestions would be great.
other relevant info:
This answer seems interesting, which involves activating the Facebook Javascript SDK:
https://stackoverflow.com/a/34178987/1884158
And I am aware of tools like Twitter's Card Validator and Facebooks Share Debugger, here:
https://cards-dev.twitter.com/validator
https://developers.facebook.com/tools/debug/
which will be useful for testing any solutions.
And if it helps, my site is a React app that is bundled in HTML/CSS/JS and rendered entirely on the client.
I haven't found a proper solution to this problem, but I did come up with a workaround/hack that involves setting up a separate service. Here is the service that I came up with: https://github.com/mapseed/sharing/blob/master/share.js
If our static site is hosted at example.com, we can spin up a server running at sharing.example.com that accepts requests and will either redirect the request from sharing.example.com/my/route to example.com/my/route. But if the request has a user-agent HTTP header matching a social media crawler, as we are doing here, then we return an html page containing just the meta tags, as we are doing here.
This approach has a couple of restrictions, however:
The links that we want to share on social media need point to our sharing.example.com subdomain. This will make it possible for our service to return an HTML page with the proper meta tags if the request is coming from a social media bot, or otherwise redirect the request to our example.com website otherwise.
In order to generate the content of our meta tags, our shareable links will have to have query params to pass all of the information to populate our meta tags. For example, our shareable link would look like this: sharing.example.com/post/my-post?title=my-title&desc=my-description. This means that our shareable links can get quite long. You can see how we extract the information from our query params and inject it into our HTML template with the meta tags here: https://github.com/mapseed/sharing/blob/master/share.js#L18-L27
If these restrictions are acceptable, then this solution works quite well. Note that there is also a downside for SEO, because the links that will be shared are coming from sharing.example.com, and not our example.com website.
Also, we will have to spin up an extra server to run this service. Although we should be able to migrate this implementation into a serverless architecture, like AWS Lambda.

Google crawler can't render the page properly

For the past months I have been developing my own "javascript client side framework for SPA(single page application)" and I just want to know if I'm on the right track or not.
My framework works similar to meteor or ember and others but I've noticed that google bot has difficulties rendering my page. so I want to review some of the rendering techniques that I have used in my framework.
When the user navigates to a url ex. http://mywebsite.com/profile/tomhanks the router parses the url and finds that there is a controller listening to string profile/[username] so it triggers that controller and passes username as a variable to the controller, then the controller requests a new page (or overlay) with a template id and then the template is placed in the page.
But the problem is that Google bot won't bother doing all of this and only sees the empty html page. And I know this from fetch as Google in the Google Webmaster Tools.
How do other framworks do it? How come Google can fetch those contents correctly?
Google crawler can't guess what to type in the URL. To help the bot you should create a sitemap with all possible URLs so that the crawler can visit them: Learn about sitemaps
This can also be of your interest: Making AJAX applications crawlable.

Same url for app, pagetab and freestanding site in authorized facebook-app?

I have a facebook app that requiers authorization, therefore I have to pass a redirect url along with the authentification-request.
My app is entierly front-end code.
If I wan't the standalone-version, I can just pass the window.location.href
Something like this won't work for the app-page, because it's iframes from different servers. Therefore I have to hardcode the app-url in this case.
The app is intended to be embedded on different app-pages, so I can't hardcode that. Apperntly I can get the facebook page-tab-link etc using the facebook api. Haven't looked in to the details yet though. Redirect back to page tab after user authenticates?
As facebook doesn't allow parameters, my plan is to add /pagetab/ or /app/ to the end of my url, and add that to the various urls in the settings of facebook. After that I will create different cases for the different url-endings.
Although this soultion sounds like a lot of work. Is there a better way to do this?
If your app wasn’t totally client-side, then you could find the info which page your app is embedded on in the signed_request parameter. But since Facebook POSTs that to the iframe on calling your app, there is no way of accessing it client-side.
As facebook doesn't allow parameters
Facebook allows for a parameter called app_data in the URL, which is passed on to your app. But again, this happens via POST on first page load.
If you were willing (and able to, regarding your platform) to make the little adjustment of having your apps HTML code generated by a server-side language (instead of it being purely static HTML pages), then you could easily evaluate the signed_request parameter, and have the page id written into a JavaScript variable, so that you can use it client-side from there.

How to access Facebook user ID from javascript within a fb:iframe?

I am writing a Facebook application that is a simple board game which I have implemented in javascript. Facebook only seems to let javascript applications run within an iframe so I am loading the page using <fb:iframe>. I just want to be able to tell the javascript the user's id so I can tell the user if it is his turn or not but I can not find documentation on accessing facebook data from within the fb:iframe. I am probably missing some basic conecpt as I do not understand the facebook API very well.
Facebook's API is very tough to follow, and the documentation is very poor. You're right about the Javascript... normal Javascript only works inside an iframe on Facebook, otherwise you're limited to a subset of filtered Javascript called FBJS. You can safely ignore anything about FBJS in the documentation, and focus on iframes.
Iframe loading
The first thing I would mention is that an <fb:iframe> tag actually gets rendered with a ton of stuff in the src attribute. So if you put a tag like this into your Facebook page: <fb:iframe src="http://example.com/page?x=y">, what it ends up becoming when it loads into a user's browser is more like this:
<iframe src="http://example.com/page?x=y&fb_sig_in_iframe=1&fb_sig_locale=en_US&fb_sig_in_new_facebook=1&fb_sig_time=1246340245.3338&fb_sig_added=1&fb_sig_profile_update_time=1242155811&fb_sig_expires=1246345200&fb_sig_user=000000001&fb_sig_session_key=2.d13uVGvWVL4hVAXELgxkZw__.3600.1246345200-000000001&fb_sig_ss=mZtFjaexyuyQdGnUz1zhYTA__&fb_sig_api_key=46899e6f07cef023b7fda4fg2e21bc58&fb_sig_app_id=22209322289&fb_sig=bbc165ebc699b12345678960fd043033">
Facebook adds a ton of stuff to the src. The parameter that tells you the user's Facebook id is fb_sig_user (which is 000000001 here). I'm assuming your app is set up as an "FBML app", since you probably wouldn't use an <fb:iframe> tag in an "Iframe app". Nonetheless, the rendering method is similar in both cases, and you get a bunch of extra stuff to your src document in an "Iframe app" as well.
This really only passes you the Facebook user id on the first load of the iframe, however. Subsequent operations within the iframe won't have access to that user id unless you pass it around explicitly.
Facebook Connect
If you want to interact with Facebook from within the iframe, that's where the Facebook Connect Javascript libraries comes in. The best instructions on setting up Facebook Connect is probably this wiki page, but it's still a bit murky. Facebook Connect can be used for both completely external sites, or just regular content inside an iframe. You fall into the latter category, so if you follow the instructions in that link and use the first line of code in step 2 (for the FeatureLoader), you should be ok.
Once you've included the FeatureLoader.js script and called FB.init, you should generally be up and running with FB Connect. You should be able to interact with the API from then on out. The users.getLoggedInUser() method will give you the current user id inside the iframe via Javascript.
Hope that helps.
Note that as of March 2011, FB is moving to POST requests to load iframes. It sends a form action with method="post" and target="iframe_canvas", plus an input type="hidden" with a "signed_request"
You cna use the facebook API to get the user ID by calling
Users.getLoggedInUser
You can access that value, then use echo() to add that to your HTML as a javascript variable, which will make it available to your Javascript code.
Try Env.user, it has the logged in user's ID.

Categories