How to share Custom Text in social website using Angular

Question

I have JwSocialButtonsModule for my social share.
JwSocialButtonsModule is in my app module

My code:

<div class="jumbotron">
<div class="row">
    <div class="col">
        <fb-like url={{url}}></fb-like>
    </div>
    <div class="col">
        <google-plus url={{url}}></google-plus>
    </div>
    <div class="col">
        <tweet url={{url}} text={{text}}></tweet>
    </div>
    <div class="col">
        <linkedin-share url={{url}}></linkedin-share>
    </div>
    <div class="col">
        <pin-it url={{url}} media={{imageUrl}} description={{text}}></pin-it>
    </div>
</div>

I need to share custom text instead of url's. If i change url to text its throwing error like

Template parse errors:

Can't bind to 'text' since it isn't a known property of 'fb-like'.
1. If 'fb-like' is an Angular component and it has 'text' input, then verify that it is part of this module.
2. If 'fb-like' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.

How to share text content through social share

Stackblitz link

its a customer's data from web app i am copying that data like (copy to clipboard) and want to share that in fb etc sites — Angular, Dec 11 '19 at 05:02
This is answer for your question. https://www.cssscript.com/demo/custom-social-share-buttons-with-javascript-and-html5-sharer-js/ — Shabbir Dhangot, Dec 11 '19 at 05:03
or can register here https://developers.facebook.com/docs/apps#register — harkesh kumar, Dec 11 '19 at 05:10
@Angular even if you see at the bottom like and share page of https://developers.facebook.com/docs/apps#register facebook they don't have such feature — harkesh kumar, Dec 11 '19 at 05:12
You cannot really share some text through a Facebook like, does not really make sense. — Celsiuss, Dec 11 '19 at 05:12
@ Shabbir Thank You But those are sharing url's and in javascript, I need in Angular — Angular, Dec 11 '19 at 05:13
@ Celsiuss yes thats right, but i Want to know we can share custom text or not — Angular, Dec 11 '19 at 05:16
@harkeshkumar no i dont have but i have this https://stackblitz.com/edit/jw-angular-social-buttons?file=app%2Fhome%2Fhome.component.html — Angular, Dec 11 '19 at 05:19
can you open this link and provide me app id https://www.facebook.com/login/device-based/regular/login/?login_attempt=1&next=https%3A%2F%2Fwww.facebook.com%2Fdialog%2Ffeed%3Fapp_id%3D145634995501895%26display%3Dpopup%26link%3Dhttps%253A%252F%252Fdevelopers.facebook.com%252Fdocs%252F&popup=1&lwv=120&lwc=1348092 — harkesh kumar, Dec 11 '19 at 05:22
@harkeshkumar getting error ---- User is not allowed to see the application — Angular, Dec 11 '19 at 05:32
@plase check this 3rd button that you looking for https://jw-angular-social-buttons.stackblitz.io/ — harkesh kumar, Dec 11 '19 at 06:01
yes for only twitter its working and in my project twitter button is not displaying — Angular, Dec 11 '19 at 06:32

PHP Geek · Answer 1 · 2019-12-11T07:09:38.463

please try this one to add custom text in between url's

try this to add custom text in between url

 window.open('https://twitter.com/intent/tweet?text=%20Check%20up%20this%20awesome%20content' + encodeURIComponent(document.title) + ':%20 ' + encodeURIComponent('https://freadee.com/#/food/detail/' + this.shareFoodId + 'add custom text here'));

.html

<div class="modal-body text-center">
        <!-- Add font awesome icons -->
        <!-- <share-buttons show="11"></share-buttons> -->
        <a class="social-icon social-icon-facebook fab fa-facebook-f m-1"
          href="https://www.facebook.com/sharer/sharer.php?u=&t=" title="Share on Facebook" target="_blank"
          (click)="sharefacebookUrl(foodid)"></a>&nbsp;

        <a class="social-icon social-icon-twitter fab fa-twitter m-1" href="https://twitter.com/intent/tweet?"
          target="_blank" title="Twitter" (click)="sharetweetUrl(foodid)"></a>&nbsp;

        <a class="social-icon social-icon-envelope fas fa-envelope m-1" href="mailto:?subject=&body=:%20"
          target="_blank" title="Email" (click)="sharemailUrl(foodid)" click=""></a>&nbsp;

        <a class="social-icon social-icon-instagram fab fa-instagram m-1" href="https://instagram.com/accounts/login/?"
          target="_blank" title="Instagram" (click)="shareinstaUrl(foodid)"></a>&nbsp;



      </div>

.ts

sharefacebookUrl(foodid) {
    this.shareFoodData = foodid
    this.shareFoodId = foodid.food_id
    this.share();
    // window.open('https://www.facebook.com/sharer/sharer.php?u=' + encodeURIComponent('https://freadee.com/#/food/detail/' + this.shareFoodId+ 'add custom text here'));
    return false
  }

  sharetweetUrl(foodid) {
    window.open('https://twitter.com/intent/tweet?text=%20Check%20up%20this%20awesome%20content' + encodeURIComponent(document.title) + ':%20 ' + encodeURIComponent('https://freadee.com/#/food/detail/' + this.shareFoodId+ 'add custom text here'));
    return false;
  }

  sharemailUrl(foodid) {
    window.open('mailto:?subject=' + encodeURIComponent(document.title) + '&body=' + encodeURIComponent('https://freadee.com/#/food/detail/' + this.shareFoodId+ 'add custom text here'));
    return false;
  }

  shareinstaUrl(foodid) {
    window.open('https://instagram.com/accounts/login/?text=%20Check%20up%20this%20awesome%20content' + encodeURIComponent(document.title) + ':%20 ' + encodeURIComponent('https://freadee.com/#/food/detail/' + this.shareFoodId+ 'add custom text here'));
    return false;
  }

Insta,is not working, any reference link ? Thanks – Abhishek Aug 19 '22 at 15:03 — Abhishek, Aug 19 '22 at 15:03

How to share Custom Text in social website using Angular

1 Answers1