bugfix I-107579 facebook share button open graph meta tags

[Colinh84]

Release Assembly - topcoder Wordpress Bug Fixes 6 Challenge

[tladendo]

How can I test this locally?

[Colinh84]

The only way to test locally is by using a service such as www.pagekite.me, which makes your localhost visible on a subdomain to the internet. You will also have to update the site URLs to your new pagekite.me address in wp-admin settings if you do this. Also make sure local firewall and server settings allow connections from outside to your server.

The way facebook shares work is that facebook sends a scraper to the URL that you click the share button on, and the scraper grabs the data from open graph meta tags set in the page header.

One other note, currently the og:image meta tag is set to topcoder logo located in /wp-content/themes/tcs-responsive/i/logo.png, I could not find any other topcoder logo to use and this one does not meet the minimum size requirements that facebook has for images (at least 200px X 200px), so currently when a contest is shared, the topcoder logo appears cropped to a small square in some views and completely absent in others, you will need to find a decent sized (bigger is better) logo with square dimensions to fix this.

[tladendo]

Ah – I won't worry about local testing then. One more thing – if it would be easy, can you rewrite the stuff for ng-challenge-details for this issue in Angular, instead of PHP?

[Colinh84]

It is not possible to rewrite this with angularjs, this code has to be done on the server side because the facebook scraper does not execute javascript from scraped pages due to security restrictions; it will only grab the unmodified HTML document from the server and read the contents of the open graph meta tags. If you were to use an angularjs variable to insert the content into the meta tags, the facebook scraper will just grab the angular code itself and display that instead of the intended content.