How do I create a Twitter share button with my website URL?

So you want to add a link or button to share your current page URL or a static link to Twitter?

Of course, Twitter provides a few resources for this, which are ugly, to say the least; there are also third-party services available such as AddThis.

If you are using WordPress, there are loads of plugins to get the job done.

Let’s look at a few effortless code snippets that will get the Twitter sharing job done light-weight and painless.

Show Me The Twitter Share Code

Let’s look at the standard URL structure Twitter uses to make a URL or link shareable.

Now, let’s make this a simple share link that you can embed directly into your website. You will want to change https://YOURWEBSITEOURPAGE.com to your actual website or page.

<a href="https://twitter.com/share?url=https://YOURWEBSITEORPAGE.com" target="_blank">Share On Twitter!</a>  

Creating A Twitter Share Button Using A Image

So, if you want to use an image as a button for your share code, it would look something like this:

<a href="https://twitter.com/share?url=https://YOURWEBSITEORPAGE.com" target="_blank"><img src="https://MYIMAGEBUTTONURL.com/TWITTER.PNG" /></a> 

The above code is recommended simply because, well, visual buttons have a better conversion ratio. An example of what your Twitter share image-based button could look like is below:

What About Sharing The Current Page Using WordPress?

No problem, this easily be accomplished if we throw some PHP into the mix, open your specific template or WordPress PHP file to create a dynamic Twitter share link that will automatically set the current page being used for sharing.

Your code will look like:

<a href="https://twitter.com/share?url=<?php echo get_permalink($post->ID);?>" target="_blank">Share On Twitter!</a>  
The “Development Friendly” blog originates from the collaborative contributions of web developers and website maintenance specialists who are based in Texas. They bring over 15 years of experience in providing website services to a diverse array of small and large companies, both locally and internationally. Are you interested in exploring a potential collaboration or do you need help with your website? Visit www.vessio.com or send an e-mail to help@vessio.com.

Posted

in

by

Development Friendly

  • The Power of Rate Limiting: Enhancing Website Traffic and Performance

    In the fast-paced digital landscape, where website traffic and user interactions are at an all-time high, ensuring optimal performance and security has become a critical concern for website administrators. One effective technique that can significantly improve both website traffic management and performance is rate limiting. Rate limiting is a method that controls the number of…

  • How do I Remove the “Save my name” Checkbox In WordPress?

    In WordPress, when users leave comments on your blog posts, they are often asked to provide their name, email address, and website. By default, WordPress includes a checkbox labeled “Save my name, email, and website in this browser for the next time I comment.” This checkbox allows users to have their information saved in cookies,…

  • How do you force SSL and fix mixed content with HTACCESS?

    So, you have a shiny new SSL certificate for your website, and now you need to force SSL, but you keep getting mixed content errors. This simple guide will consist of two parts and should get you up and running with a “green lock” in no time. Step 1 — You Need To Modify Your…

  • How do I reset all form fields using pure JavaScript?

    It doesn’t matter why you might want to add a reset form button for your users. It could be that the form has conditional logic, is super long, complex, or that it has form fields that are prone to user error. We will look at a straightforward way to add a form button to reset…

  • How do I create a simple news ticker using HTML and CSS?

    Alright, so you need some text, links, or images to scroll across your website from left to right. Some folks call this a “news ticker”, some call it a “text scroller” — we will stick with news ticker for the sake of keeping our references simple. Sure, you can make this happen with JavaScript but why complicate…

  • How do I make a textarea form field match an input form field?

    Have you ever wondered why the default font for a form textarea field is different when using a placeholder? The default fonts for all web forms are usually determined by the browser used, and technically, it is up to us to define what fonts or styles to display via our CSS. Here is how you…