Category Archives: HTML

Twitter Feed Custom Element

Share

Adding the Twitter Feed to a Common Spot page requires three steps.

  1. Embed the Profile
  2. Create the Widget
  3. Add the Widget to your page

*You must have a Twitter account to execute this element

Embedding the Profile

Once you log on to Twitter, go to the account whose tweets you want to add to your page. Next, click on the drop down menu that looks like a head and shoulders and click “Embed this Profile”.
Creating Twitter embed code

Creating the Widget

The Create a User Widget dialog box appears (see image below). For username, use the name of the Twitter account you want to follow. In the image below, I’ve added East Carolina. Click the Create Widget button at the bottom. All the other properties are optional or can be left blank.

Widget2

After creating the widget, a line of code will appear in the box to the right. Copy and paste the code into a text editor like Notepad. In the copied code, there is a line that says “data-widget-id” followed by numbers, copy the numbers. This is the id you will use when putting the widget onto your page.

CopyCode

Here’s an example of what the code you would need to copy looks like:

Code

Adding the Widget to your Page

Under the Custom Elements dropdown menu in CommonSpot, click Twitter Feed. An error will appear that says “There was an error with the Twitter Feed. Please make sure all setting values are correct.” This is normal, click the link the link that says “Click here to define the custom element data”. A box will appear that requires the Twitter User Name, Number of Tweets to be Imported, and Data Widget ID to be entered. When entering the user name make sure to remember to put “@”. The Widget ID is the number that you have copied from Notepad. To show East Carolina’s twitter feed, it would look like this:

TwitterFeed


Once you click save the widget will appear as follows:

TweetFeed

Do It by the Book

Share

Structure your CommonSpot content using headings and paragraphs

The next few posts outline for beginning webmasters how to structure a CommonSpot page using html codes. Today’s discussion is on chunks, paragraphs and headings.

Think of your favorite book.

This book has a title—only one main title—and the information in your book is divided into chapters with each chapter having its own title. This is also true for well-built web pages. There is a main heading—there’s only one—and the content is “chunked” into sections made up of paragraphs. Each section has its own heading.

Not only does using this basic hierarchical structure make your content easy to read, it’s also accessible to a screen reader which helps those users who might be listening to your page.

A very simple page’s code starts out like this:


<h1>This is my main title!</h1>
<h2>Section 1</h2>
<p>blah, blah, blah, blah, blah, blah</p>
<h2>Section 2</h2>
<p>blah, blah, blah, blah, blah, blah</p>
<h2>Section 3</h2>
<p>blah, blah, blah, blah, blah, blah</p>

This is my main title!

Section 1

blah, blah, blah, blah, blah, blah

Section 2

blah, blah, blah, blah, blah, blah

Section3

blah, blah, blah, blah, blah, blah


To see how this works, view this VIDEO DEMO [1:40] on formatting a CommonSpot text block.

But how does CommonSpot know what size and color to make the headings and paragraphs? It follows the instructions in a CSS style sheet, but you are free to change these styles using the toolbar formatting buttons. Future posts will discuss how to create and upload your own stylesheet to CommonSpot.

Want to learn more? Here is a link to the w3 schools website: http://www.w3schools.com/html/ or a YouTube search will uncover zillions of videos to help you get started.