How we can create a shareable link for twitter, which contains text and URL in the link and you can share just in a click? Solution: See this Twitter Intent Generator With JavaScript and CSS, Direct Shareable Link Generate.
Previously I have shared a random password generator, which is related to social media but this is a direct link generator for share content on twitter. Basically, A Tweeter intent makes it easy for your website visitors to compose and post a Tweet to their audience from a link on your webpage. Website developers can configure Tweet text and hashtags, pass a URL inside the link. On many websites or blogs, there is a share to the twitter button available, that also known as tweet this article. After click that button twitter share page will open with the article’s text and URL, which is a twitter intent or tweet web intent.
Today you will learn to create a Direct Shareable Link program for twitter which can store text and URL. Basically there are two input fields, the first one for text and the second one for putting URL. Also, there is a button for generating a shareable link, inside the text field you can put a maximum of 280 characters which is max-support of twitter.
So, Today I am sharing a Twitter Intent Generator With JavaScript and CSS. There I have used jQuery which is a JS library, that’s why I am calling this a JavaScript program. The program is completely based on JavaScript and styled using CSS. Also, twitter developed the intent feature and created a guide for developers. The official pre-built twitter’s web intent URL is https://twitter.com/intent/tweet .
If you are thinking now how this shareable link generator actually is, then see the preview given below.
Preview Of Direct Shareable Link For Tweet
See this video preview to getting an idea of how this program looks and works.
Now you can see this visually, also you can see it live by pressing the button above. If you like this, then get the source code of its.
You May Also Like:
Twitter Intent Generator With JavaScript and CSS Source Code
Before sharing source code, let’s talk about it. First I have created a main div and placed 2 text inputs, two divs, and a button inside it. Also, I have placed a label for each input to showing info to users. Inside the main div, Created the first inner div inside it for character count and second inner div for showing the intent link after generating.
Now using CSS I have placed all the items in the right place, as you can see in the preview. Using CSS, first I have placed all the contents in the center and after that gave style to elements using color, margin, padding, size, etc. Also, there are some other elements like character remaining warning and generated link which are based on CSS styling.
JavaScript handling here 3 main features of the program which are label animation, character length count, and generate web intent. The first function is for the label animation for creating that, JS adding and removing class name according to focus and blur. For counting the length of the character used JS .val().length command, and according to the length, it shows warning using the same add/remove class method.
The main work of the program which is generating an intent link is based if{} else{} statement. I have declared the link structure according to twitter’s official guide and stored in variables. Left all other things you will understand after getting the codes, I can’t explain all things here. For creating this program you have to create 3 files HTML, CSS, and JavaScript. Follow the steps to creating the program without any error.
index.html
Create an HTML file named ‘index.html‘ and put these codes given below.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 |
<!DOCTYPE html> <!-- Code By Webdevtrick ( https://webdevtrick.com ) --> <html lang="en" > <head> <meta charset="UTF-8"> <title>Twitter Intent Generator | Webdevtrick.com</title> <link rel="stylesheet" href="style.css"> </head> <body> <h1>Twitter intent generator</h1> <div class="intent"> <div class="css"> <label for="txt">TWEET TEXT</label> <input id="txt" type="text" /> <div id="character_remaining"></div> </div> <div class="css"> <label for="link">URL</label> <input id="link" type="text" /> </div> <a class="btn">Generate</a> <div id="intent"></div> </div> <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.min.js'></script> <script src="function.js"></script> </body> </html> |
style.css
Now create a CSS file named ‘style.css‘ and put these codes given here.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 |
/* Code By Webdevtrick ( https://webdevtrick.com ) */ @import url("https://fonts.googleapis.com/css?family=Montserrat"); * { margin: 0; padding: 10px; box-sizing: border-box; } body { font: 16px/1 'Montserrat', sans-serif; color: #000; background: #fff; padding: 10px; text-align: center; margin-top: 15%; } h1 { color: #1da1f2; text-transform: uppercase; } .intent { padding: 35px 0; } .intent .btn { margin: 10px 0; display: inline-block; padding: 10px; background: #1da1f2; color: #fff; } button, input, select, textarea { font-family: inherit; font-size: 100%; vertical-align: baseline; border: 0; outline: 0; } button::-moz-focus-inner, input::-moz-focus-inner { border: 0; padding: 0; } input[type='text'] { width: 500px; padding: 10px 10px 12px 60px; font-size: 12px; color: #555; border: 1px solid #aaa; } .css { display: block; position: relative; } .css input { transition: .1s all linear; } .css label { position: absolute; top: 13px; font-size: 12px; font-weight: bold; color: #000; transition: .1s all linear; cursor: text; } .css.active input { padding-left: 15px; border: 3px solid #1da1f2; } .css.active label { top: -18px; } .css #character_remaining { padding: 15px; font-size: 12px; color: #000000; } .css #character_remaining.warning { color: #1da1f2; } |
function.js
The final step, Create a JavaScript file named ‘function.js‘ and put the codes.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 |
// Code By Webdevtrick ( https://webdevtrick.com ) $(document).ready(function() { // label animation $('input').each(function() { $(this).on('focus', function() { $(this).parent('.css').addClass('active'); }); $(this).on('blur', function() { if ($(this).val().length == 0) { $(this).parent('.css').removeClass('active'); } }); if ($(this).val() != '') $(this).parent('.css').addClass('active'); }); // count characters var text_max = 280; var warning_msg = ""; $('#character_remaining').html('Characters remaining: ' + text_max); $('input').keyup(function() { if ($('#link').val().length > 0) { text_max = 116; } else { var text_max = 140; } var text_length = $('#txt').val().length; var text_remaining = text_max - text_length; if (text_remaining < 0) { warning_msg = "- too long!"; $('#character_remaining').addClass('warning'); } else { warning_msg = ""; $('#character_remaining').removeClass('warning'); } $('#character_remaining').html('Characters remaining: ' + text_remaining + " " + warning_msg); }); // generate intent $('.btn').on('click', function() { var start_text = 'https://twitter.com/intent/tweet?text='; var generated_tweet = encodeURIComponent($('#txt').val()); if ($('#link').val().length > 0) { var generated_url = "&url=" + encodeURIComponent($('#link').val()); } else { var generated_url = ""; } if ($('#txt').val().length > 0) { $('#intent').html(start_text + generated_tweet + generated_url); } else { $('#intent').html("Your tweet is empty!") } }) }); |
That’s It. Now you have successfully created Twitter Intent Generator With JavaScript and CSS, Direct Shareable Link Generate for Tweet. If you have any doubt or question comment down below.
Thanks For Visiting, Keep Visiting.
