First there are few NPM libraries and second none is working with AngularJS ver 8 (when this article was written). <\/p>\n\n\n\n
The above problem prompted me look into the possibility of integrating the time tested platforms for Social Share Widget for web. <\/p>\n\n\n\n
I needed a library\/code that provides me with the flexibility of customizing which Social Media options to allow and also the content that will be shared (and not just the current URL like happens with most libraries)<\/p>\n\n\n\n
I chose ShareThis<\/a>, which provided all the required flexibility. <\/p>\n\n\n\n There might be other ways to integrate this, but I did it in the below way – which was fast to implement and it works.<\/p>\n\n\n\n Added the below to the index.html of the project <\/strong><\/p>\n\n\n\n <\/p>\n\n\n\n Next add the following code to the TS file of the page. I added it to ionViewDidEnter<\/span><\/p>\n\n\n\n <\/p>\n\n\n\n Add the button to the HTML of the page where the share button to be shown<\/p>\n\n\n\n <\/p>\n\n\n\n The normal integration guide on ShareThis website doesn’t have the customization options mentioned. The possible ways to customize the content to be shared has been mentioned here<\/a>. <\/p>\n\n\n\n Please feel free to suggest optimizations. <\/p>\n","protected":false},"excerpt":{"rendered":" First there are few NPM libraries and second none is working with AngularJS ver 8 (when this article was written). The above problem prompted me look into the possibility of integrating the time tested platforms for Social Share Widget for web. I needed a library\/code that provides me with the flexibility of customizing which Social… Continue reading Social Share in Angular Project<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1],"tags":[235,237,236,234],"class_list":["post-752","post","type-post","status-publish","format-standard","hentry","category-miscellaneous","tag-angularjs","tag-shareit","tag-social-media-share","tag-social-share","entry"],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/www.kolkataonweb.com\/code-bank\/wp-json\/wp\/v2\/posts\/752","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.kolkataonweb.com\/code-bank\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.kolkataonweb.com\/code-bank\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.kolkataonweb.com\/code-bank\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.kolkataonweb.com\/code-bank\/wp-json\/wp\/v2\/comments?post=752"}],"version-history":[{"count":1,"href":"https:\/\/www.kolkataonweb.com\/code-bank\/wp-json\/wp\/v2\/posts\/752\/revisions"}],"predecessor-version":[{"id":753,"href":"https:\/\/www.kolkataonweb.com\/code-bank\/wp-json\/wp\/v2\/posts\/752\/revisions\/753"}],"wp:attachment":[{"href":"https:\/\/www.kolkataonweb.com\/code-bank\/wp-json\/wp\/v2\/media?parent=752"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.kolkataonweb.com\/code-bank\/wp-json\/wp\/v2\/categories?post=752"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.kolkataonweb.com\/code-bank\/wp-json\/wp\/v2\/tags?post=752"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}<script type=\"text\/javascript\" src=\"http:\/\/w.sharethis.com\/button\/buttons.js\"><\/script>\n<script type=\"text\/javascript\">\n stLight.options({\n publisher:'12345', \/* this is the property Id in new panel*\/\n });\n<\/script><\/code><\/pre>\n\n\n\n stWidget.addEntry({\n \"service\":\"sharethis\",\n \"element\":document.getElementById('button_1'), \/*the button's id which will trigger the share dialog*\/\n \"url\":\"http:\/\/sharethis.com\", \/*the URL to share*\/\n \"title\":\"sharethis\", \/*Title*\/\n \"type\":\"large\",\n \"text\":\"ShareThis\" , \/*the text to be displayed beside the button in the webapage*\/\n \"image\":\"http:\/\/www.kolkataonweb.com\/images\/sharethis.png\", \/*link of the image to be shared*\/\n \"summary\":\"this is description1\" \/*the summary text or the description to be shared.*\/\n });<\/code><\/pre>\n\n\n\n <span id=\"button_1\"><\/span> <!-- please not the id is same as that mentioned in the configuration above --><\/code><\/pre>\n\n\n\n