We have built an AngularJS app and want to be able to share pages on social media using “rich social sharing”.
When we share a URL on one of sites such as Facebook and Twitter, a crawler is dispatched to that URL and will scrape the page’s HTML, firstly looking for any of the special meta tags that it can understand and use, and secondly looking at the regular HTML elements such as the tag and the any images that it might be able to use. The crawlers that scrape the HTML do not evaluate JavaScript.
Task
Budget: £100
Deadline: 28/05/2020
The solution is basically to use some kind of server-side user-agent detection to pick up whenever a social media crawler arrives, and then instead of showing it the plain AngularJS template file, redirect it to a server-generated page that will contain the desired meta tags, all filled with the correct information. The following website explains this in more detail: https://www.michaelbromley.co.uk/blog/enable-rich-social-sharing-in-your-angularjs-app/
Specification
• Only files compatible with AngularJS 1.5.7 should be used for the front-end
• Only files compatible with PHP Version 7.0.22-0 should be used for the back-end
• Only MySQL queries compatible with 'ver 14.14 distrib 5.5.40 for debian-linux-gnu' should be used for database communication
• Separate CSS file (where necessary)
• Separate Bower install scripts into separate files (where necessary)
• Separate AngularJS Controller file
• Separate HTML file for the view
• Separate PHP file for database interaction
• Job will be completed within four working days
• On completion, a proven working copy must by demonstrated through a webpage owned by the programmer
• All non-database related logic must take place within AngularJS Controller, Service, or Function
• Payment will be released within four working days to allow time for integration
• Project to completed by the specified deadline
• Use my file and code structure as demonstrated in zip file, pay special attention to the structure of my controllers, services, and php functions
• File amendments to existing files in my file structure should be placed at the bottom of each file
• List of relevant files/folders modified/added should be specified when submitting this project
• Any specific integration instructions should be clearly specified in word document
• Ensure any newly implemented CSS code does nt conflict with existing CSS code.
• All table should have first letter capitals and the pre-fix Tbl. Eaxampe: Tbl_Property
• All table columns should have first letter capitals. For example Property_Name
• Your css should not adjust the format of main elements like a, ul, ui, etc. Specify unique referenceors only.
• "API calls from within the controller should be implemented using the following format: return $http({
method: 'GET',
url: ""api/test/"" + id,
params: $httpParamSerializer(dataObj),
paramSerializer: '$httpParamSerializerJQLike'
});"
• Integration assistance should be given where required by me. Screen share software can be used to aid integration.
Using dynamic variables in AngularJS, the URL’s social media preview should show a:
• Title
• Description
• Image
