Share Link Generator Post Share to Pinterest, Facebook, Twitter, LinkedIn And More HTML CODE

My Codes script
June 12, 2021

 

Share Link Generator Post Share to Pinterest, Facebook, Twitter, LinkedIn And More HTML CODE

Share Link Generator Post Share to Pinterest, Facebook, Twitter, LinkedIn And More HTML CODE

Example Link: https://codepen.io/enova/pen/XRBVvJ?editors=1100

Example Link: https://gist.github.com/chrisjlee/5196139

Example Link: https://drive.google.com/file/d/1O6pDed5MiN8MJ7TZAbsNr1unnVZ6gYm9/view?usp=sharing


Example Code:

facebookURL = http://www.facebook.com/sharer/sharer.php?u=$Url&title=$title;
twitterURL =  https://twitter.com/intent/tweet?text=$title&url=$Url;
linkedinURL = http://www.linkedin.com/shareArticle?mini=true&url=$Url&title=$title;
this.facebookURL =  'http://www.facebook.com/sharer/sharer.php?u=' + this.encodedURL + '&title=' + this.encodedText;
this.twitterURL =  'https://twitter.com/intent/tweet?text=' + this.encodedText + '&url=' + this.encodedURL;
this.linkedinURL = 'http://www.linkedin.com/shareArticle?mini=true&url=' + this.encodedURL + '&title=' + this.encodedText;


Example Code:

<div class="container">
  <div class="jumbotron">
    <h1>Share Link Generator</h1>
  </div>
  <div id="app">
    <form @submit.prevent="generateURLs">
      <h2>Input</h2>
      <div class="form-group">
        <label for="url">URL</label>
        <input class="form-control" name="url" type="url" pattern="^(([^:/?#]+):)?(//([^/?#]*))?([^?#]*)(\?([^#]*))?(#(.*))?" required v-model.trim="url">
      </div>
      <div class="form-group">
        <label for="url">Text</label>
        <input class="form-control" name="text" type="text" required v-model.trim="text">
      </div>
      <div class="form-group">
        <button class="btn btn-primary" type="submit">Generate</button>
      </div>
    </form>
    <template v-if="success">
    <h2>Output</h2>
    <div class="form-group">
      <label for="url">Facebook <a :href="facebookURL" target="_blank" rel="noopener noreferrer">Test</a></label>
      <input name="url" type="url" class="form-control" v-model="facebookURL">
    </div>
    <div class="form-group">
      <label for="url">Twitter <a :href="twitterURL" target="_blank" rel="noopener noreferrer">Test</a></label>
      <input name="text" type="text" class="form-control" v-model="twitterURL">
    </div>
    <div class="form-group">
      <label for="url">LinkedIn <a :href="linkedinURL" target="_blank" rel="noopener noreferrer">Test</a></label>
      <input name="text" type="text" class="form-control" v-model="linkedinURL">
    </div>
    </template>
  </div>
</div>