How to Share Webpages with Twitter

Sharing your content on Twitter can prove to be extremely valuable in reaching a large audience. There’s a ton of different ways to make it easy for a visitor to share your webpage or content via Twitter, but finding a good way to engage people to want to share is most important. To first get started with that, it’s best to know the different ways you can do this.

Twitter Resources and Buttons

Without a doubt, Twitter Resources are the easiest way to enable your web page to quickly be shared with Twitter. It’s as simple as going to a URL and copying-and-pasting their code to generate a Tweet Button on your webpage. It literally will do everything for you such as:

  • Generating the URL of your choosing or having the current URL
  • Auto creating or manual text options
  • Optionally showing the Tweet Count
  • Easily add hashtags and usernames to the tweet
  • Different styles such as small, large or no tweet count

Here’s some examples of what these buttons can look like:

Twitter Resource for Tweet Buttons are located here: Tweet Buttons

This should be pretty common knowledge amongst web developers, and this option is great for bloggers and small blogs who are just trying to dump the option on their webpage.

In terms of engagement, using these buttons are a win-lose type of situation. These buttons are used over-and-over across many web pages, so they’re very familiar to users. When your site visitor finds this button, they’ll know exactly what it’s going to do. The downside of this is these buttons can come across as spammy to users, and they definitely can pollute your web page’s design. I’m sure as you read this you can recall a million websites that overkill the social sharing buttons. The next Twitter tweeting option is way more elegant and only slightly more complex.

Twitter Intents

Twitter Intents allow you to completely customize the Twitter Share Button however you want with ease. Twitter intents as described by Twitter are:

Web Intents provide popup-optimized flows for working with Tweets & Twitter Users: Tweet, Reply, Retweet, Favorite, and Follow. They make it possible for users to interact with Twitter content in the context of your site, without leaving the page or having to authorize a new app just for the interaction. Web intents are mobile friendly, and super easy to implement. In the most laymen terms possible, all this means is Twitter provides URLs for sharing (tweeting, reply, retweeting, favoriting and following). The only one I’ll be discussing is the Tweet endpoint but just know that there are other endpoints available.

The Tweet endpoint is located here: https://twitter.com/intent/tweet. If you’re logged into Twitter you’ll see a very basic webpage for Tweeting from, and if you’re not logged in, you’ll be asked to login just to see the same page. This is great because you can send users here with a simple a tag:

<a href="http://goo.gl/HYs3Le">Tweet this page</a>

The benefit of this is that you can style in any manner that you want using CSS. So you’re page can have the most custom Twitter button you can think of. Here’s a million examples of people being super creative with it: CodePen Examples

The Twitter Intent Tweet endpoint also accepts multiple GET parameters.

via

A screen name to associate with the Tweet. The provided screen name will be appended to the end of the tweet with the text: “via @username” “Via” will be translated to the proper locality of the posting user, if supported. Potentially drives new followers to the target account.

https://twitter.com/intent/tweet?via=scotch_io

text

Pre-prepared, properly UTF-8 & percent-encoded Tweet body text. Users will still be able to edit the pre-prepared text. This field has a potential of 140 characters maximum, but consider the implications of other parameters like url and via.

https://twitter.com/intent/tweet?text=I%20love%20scotch.%20Scotchy,%20scotch,%20scotch.

in_reply_to

Associate this Tweet with a specific Tweet by indicating its status ID here. The originating Tweet Author’s screen name will be automatically prepended to the reply.

https://twitter.com/intent/tweet?in_reply_to=337636810828152833

hashtags

Add context to the pre-prepared status update by appending #hashtags. Omit the “#” symbol and separate multiple hashtags with commas.

https://twitter.com/intent/tweet?hashtags=i,love,scotch,scotchy,sc0tch,Scotch

related

Suggest accounts related to the your content or intention by comma-separating a list of screen names. After Tweeting, the user will be encouraged to follow these accounts.

These are amazing options for dynamically generating your tweets on your webpages. Truth be told though, you probably don’t need all these dynamic options. These are amazing for constructing and building dynamic Tweet URL endpoints, but sometimes (for me, it’s most times) you know exactly what you want to tweet. A great trick or common practice is to just URL encode whatever you want with just the Text GET parameter. This has the added benefit of placing your Hashtags and URL’s wherever you want to. So for example, this is how you do it with PHP:


  $text = 'I #love #scotch. The URL https://scotch.io is pretty cool!';
  $text = urlencode($text);
  $url = 'https://twitter.com/intent/tweet?text='.$text;

Pretty neat and probably very basic for many. You’re lastly probably thinking that sending users to a customized Tweet URL is neat, but you don’t want them to leave your webpage – so you’ll want this to be a popup. The Twitter Intents API provide a ridiculously easy little JS snippet to fix this. Just include the following snippet on your web page, and it will auto-detect any a tags that link to the Twitter Intent URLs and make them a JavaScript popup:

<script src="//platform.twitter.com/widgets.js"></script>

You’ll only need to include this snippet once! The Twitter Resource Buttons use this same script, so just do a simple check to see if this is on the page or not or include it with your regular JS files. Now, all your Twitter Intent links will popup:

<a href="https://twitter.com/intent/tweet">Tweet this page with a Pop-Up</a>

Wrap-Up

Both of these options are great for making it easy for a site visitor to share your content on Twitter. Some people may argue that the first option of good old-fashioned Twitter Buttons yield the most click-throughs because of familiarity, and others may argue the opposite. Either way, I personally choose the second option since you can do whatever you want with it.

This tutorial is basic — real basic. I hope it helps some beginners out there or intermediate people out there who may have not known about this. Anyways, I’d love to hear about the ways that you implemented Twitter on your website. Just comment below!