HTML5 Snippets - State The Twitter Username Of The One Who Created The Content That Your Twitter Card Links To Using The <meta> Element Cover Image

HTML5 Snippets - State The Twitter Username Of The One Who Created The Content That Your Twitter Card Links To Using The <meta> Element

Published:

Rate Article (Sign in and be the first to rate this article.)

Article Details

Views: 1038

First Published:

Word Count: 1064

Edition: 1

Now let's say, for example, one of your members on your web site provides you with a Twitter username also known as a handle. And then that member decides to publish an article through your web site. And then someone on Twitter tweets a link to that article that was submitted and published on your web site. Well, Twitter will allow you to provide the Twitter username of the author of the published article, only if the articles web page is assigned a Twitter Card of course.

Now in-order to include the Twitter username of the creator of the content that was tweeted you will need to add the <meta> element along with the name attribute and content attribute. You will then need to include the twitter:creator value for the name attribute in-order to tell Twitter's web crawler to expect the Twitter username of the one who created the content that the tweet links to. Next you will need to include the content attribute. The content attributes value should be the Twitter username of the one who created the content that the tweet links to. The Twitter username should begin with the at sign ("@"), followed by the Twitter username of the contents creator.

Now the Summary Card, Summary Card with Large Image, Photo Card, Gallery Card, Product Card and the Player Card are the only Twitter Cards that currently support the twitter:creator keyword value. You can learn more about the Summary Card in an earlier tutorial that was published called "HTML5 Snippets - Customize Tweets That Link To Your Articles Web Page Using The <meta> Element". You can also learn more about the Summary Card with Large Image in an earlier tutorial that was published called "HTML5 Snippets - Add A Large Image And Customize The Tweets That Link To Your Articles Web Page Using The <meta> Element". You can even learn more about the Photo Card in an earlier tutorial that was published called "HTML5 Snippets - Customize Tweets That Link To Your Images Web Page Using The <meta> Element". You may also learn more about the Gallery Card in an earlier tutorial that was published called "HTML5 Snippets - Customize And Add Multiple Images To Tweets That Link To An Image From A Collection Of Images From Your Web Page Using The <meta> Element". And you can also learn more about the Product Card in an earlier tutorial that was published called "HTML5 Snippets - Customize Tweets That Link To Your Products Web Page Using The <meta> Element".

It's important to remember that in-order for your Twitter Cards <meta> elements to work you must first apply for the Twitter Card of your choice, which is free. The process usually consists of you signing in to your Twitter account and then entering the URL of a web page from your web site containing the Twitter Cards <meta> elements into the Validate & Apply text box. Once your web page has been validated, you can then request for the final approval for your Twitter Card. When requesting for the final approval for your Twitter Card you will have to provide some basic information about your web site and Twitter account. You then can expect a response within a few weeks or less, but you will usually hear a response within minutes by email when your request has been reviewed. Once approved you will then need to wait for Twitter's web crawler to re-index your web pages meta information in-order to see your Twitter Card in action, which should be about a week or so. Another important thing to remember is that if you want to use other kinds of Twitter Cards you will need to start the process over again of validating and requesting final approval for your Twitter Card each time. You can learn more about Twitter Cards at Twitter's developers web page for Twitter Cards.

Now let me first show you the code by itself for the HTML snippet for stating the Twitter username of the one who created the content that your Twitter Card links to using the <meta> element. And then I will show you how to code and where to place the HTML snippet for both HTML5 and XHTML5.

Here is the HTML code snippet below to state the Twitter username of the one who created the content that your Twitter Card links to using the <meta> element.


<meta name="twitter:creator" content="@Content_Creators_Twitter_Username" />

Here is the HTML code snippet to state the Twitter username of the one who created the content that your Twitter Card links to using the <meta> element for HTML5 in the example below.


<!DOCTYPE html>
<html>
<head>
 <meta charset="UTF-8">
 <title>Welcome To HTML5</title>
 <meta name="twitter:card" content="photo">  
 <meta name="twitter:image" content="http://www.example.com/some-image.jpg">  
 <meta name="twitter:url" content="http://www.example.com/twitter-photo-card.htm">  
 <meta name="twitter:creator" content="@pubpixel">  
</head>
<body>
  
 <p>Your Twitter Card should now state the Twitter username of the creator of the content that your Twitter Card links to.</p>  

</body>
</html>

And here is the HTML code snippet to state the Twitter username of the one who created the content that your Twitter Card links to using the <meta> element for XHTML5 in the example below.


<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">  
<head>
 <meta charset="UTF-8" />
 <title>Welcome To XHTML5</title>
 <meta name="twitter:card" content="photo" />  
 <meta name="twitter:image" content="http://www.example.com/some-image.jpg" />  
 <meta name="twitter:url" content="http://www.example.com/twitter-photo-card.htm" />  
 <meta name="twitter:creator" content="@pubpixel" />  
</head>
<body>

 <p>Your Twitter Card should now state the Twitter username of the creator of the content that your Twitter Card links to.</p>  

</body>
</html>

Article Tags

Tag Article (Sign in if you want to tag this article.)

Share This Article

Send To Facebook Link

Tweet This Link

Send To LinkedIn Link

Send To StumbleUpon Link

Digg This Link

Send To Google Plus One Share Link

Send To Reddit Link

Send To Tumblr Link

Send To Delicious Link

Send To FriendFeed Link

Send To Diigo Link

Email Link

AddThis Link

0 Comments

Leave Comment (Sign in and be the first to comment on this article.)

Important

This site cannot guarantee the accuracy of articles, comments, answers and other types of content or media submitted by members or anonymous users and guests, and we recommend that you use common sense when following any advice or information found on this site. Read our full Content Disclaimer Agreement for further information.