Got a javascript updating description meta tag with a variable
$('meta[name=description]').attr('content',sharewhatever);
But the problem is that facebook cache is still going to have the old description if that page was shared before. Is there any way to deal with it without server side coding?
As far as I know, any client side manipulation will not work as FB crawls your page when you try to share a page to grab the meta description. Hence, it would only find the meta tags/content that were loaded with the page. So, your best bet is to set appropriate meta content server side.
Related
I am developing a single page application and each page should have different open graph meta tags.
It seems that tools like react-helmet just use Javascript functions like element.setAttribute to update the meta tags as you transition between pages.
My question is: does this work without server side rendering? Because in this case you would have a "default" set of meta tags and then when the page is loaded the client-side routing would determine what page you were actually on and then the Javascript would set the proper meta tags in the onPageLoad handler.
That is, if you inspect the source for the page, the meta tags would be just the default, but if some crawler instead waited for the page to load and then inspected the new meta tags, they would see the proper values.
I don't use server side rendering. Is it a waste of time to use something like react-helmet without server side rendering? If I link my page on Slack or Discord will it simply inspect the source to determine the meta tags or does it wait for the page to load and then grab the newer meta tags that were set via Javascript?
I figured I'd ask rather than test first because developing this functionality and pushing to production is a decent amount of work if this isn't even supported and someone already knows that.
try implementing http://prerender.io/ - this will detect crawlers, cache the appropriate sites and serve the appropriate sites.
I'm looking to get some data from a Facebook page of a restaurant, but I'm kinda stuck. I want to load some divs from the facebook page of the restaurant, then get the ID's of the divs, since they contain some information i would like to use. Ive tried using the .load function from jQuery, but no luck. Of all the answers I've seen, they all include a url that's something like somefile.html. Is it possible to load the divs ids and some innerHTML from a live page like Facebook? Are they somehow downloading the html to a file then using that? Keep in mind I know nothing about PHP, so any solutions? Thanks!
The right way to do it would be though Facebooks graph API, take a look at this site and see if it offers the information you need https://developers.facebook.com/docs/graph-api/reference/page/
NOTE
As comments have pointed out, "web scraping" is FORBIDDEN on Facebook.com by Facebook policy. http://www.facebook.com/apps/site_scraping_tos_terms.php
Technically, I don't think this is possible with Facebook and just JavaScript.
In general, using just JavaScript, one solution would be to load the (external) site like FaceBook into an Iframe, and then grab all the DIVs and search the DOM that's loaded into the iFrame. However, I believe FaceBook (and other sites) set something called "CORS Request Headers" which prevent the page from loading into an iFrame -- also, as far as I know, this cannot be hacked around except to use another language to pull the HTML as a file (like with PHP).
Sources:
Facebook Forbids iFrames
JavaScript, Load Page in iFrame
I have been reading up on here about how to hide the source URL in an iFrame using Javascript and Jquery, but for some reason, I haven't found a solution that works so far with Wordpress.
So short and sweet, I am trying to hide a URL for competition reasons, I'm about to launch a new web page using an iFrame to display content from another website that I subscribe to and pay quite a bit of money for their services. So I don't want my competition to know about them and copy what I do.
What would be the best way that I could mask the HTML source link in the iFrame? I use the latest version of Wordpress to host my site.
Alternatively, I am open to more advanced solutions.
Thanks in advance.
I'm not stealing anything. I'm a businessman who pays taxes and I pay $1400 per year for the web service that I use and I don't want my competitors STEALING MY set up
Ok I'll take you at face value. As has been pointed out in comments, it's impossible to do this with plain HTML or Javascript. It simply can not be done. There is no way to prevent a user of a browser from seeing the URI's that are contacted. Period.
That being said you could:
Retrieve the HTML from the 3rd party with your web server using something like CURL in PHP.
Take the result of the above and send it out on a URL of your choosing.
Create HTML with an <iframe> or whatever else you want to display the content from the 3rd party and point it at your new URL on your web server.
The above is not trivial to do correctly and will require some knowledge and work on your part. One issue with the above method will be: passing along javascript, images, css, etc... correctly so that they appear to come from your server.
I would like to mimic Facebook's functionality where when you attach a link, it will read the meta data and image automatically:
Anyone know how to accomplish this interface functionality with jQuery?
It's not reading meta data of the image, it's reading actual data from the page. It does this, probably, with cURL:
http://php.net/manual/en/book.curl.php
tutorial:
http://phpsense.com/php/php-curl-functions.html
You can't do cross domain scripting with JavaScript so you will have to use a server side language such as PHP and then have PHP crawl the page and find the main content area of the description of the page... Hope that helps :\ it's not really a front end type of thing.
I have a web app that is completely contolled with javascript. This means there is only one request that renders the full page, everything else is json'ed to be rendered.
Facebook share uses opengraph tags in the head to control what text and image to display in the sharing, but my application is a single page, single header, so that I could use only one image for all links on the app.
We are using hashbangs (#!) to control where the user is within the application, but we also have a url rewriter that, when the user hits a URL like
http://domain/action/id
they get sent to (through a redirect header)
http://domain/#!/action/id
So, given this scenario, I want to know if there is a way to share my urls on facebook, and tell facebook to get a different image for each of my URLs.
When facebook-share gets the page, it does not process the javascript in it - but tries to search for the opengraph tags in it. so basically there is no way to share your url's on facebook and have a different picture unless you have your opengraph tags loaded in the response - without javascript. Think of what would you do if you had no javascript at all..
So what you would have to do is to load the opengraph tags in the page before you use javascript.