HTML 5 and CSS 3, Illustrated Complete

Unit M:

Integrating Social Media Tools

Objectives

Understand social networking

Integrate a Facebook account with a

Web site

Integrate a Twitter account feed

Add a Twitter hash tag feed

Participate in social bookmarking

HTML 5 and CSS 3 – Illustrated Complete 2

Objectives (continued)

Create a blog

Embed a YouTube video

Link to an RSS feed

HTML 5 and CSS 3 – Illustrated Complete 3

Understanding Social Media

Social networking site: Web site that

enables people to share information

about common interests, news, and

events

Also known as social networks

Open to most anyone with restricted

access to unknown users

Prewritten HTML or JavaScript code

HTML 5 and CSS 3 – Illustrated Complete 4

Understanding Social Media

(continued)

Blog: special-purpose Web site that

enables one person or a small number

of people to post news or updates

Usually focused on a narrow topic

Microblog: site that shares aspects

with both social networking sites and

blogs

Twitter is an example

HTML 5 and CSS 3 – Illustrated Complete 5

Understanding Social Media

(continued)

Video hosting sites

Enable users to create videos and

distribute them widely

YouTube is a prime example

Visually powerful way to connect with an

audience

HTML 5 and CSS 3 – Illustrated Complete 6

Understanding Social Media

(continued)

Common features on many social

networking sites

HTML 5 and CSS 3 – Illustrated Complete 7

Integrating a Facebook

Account with a Web Site

Opportunity to let people know about

social media presence and invite them

to become part of network

Enables you to integrate into own Web

site in unique ways

Use provided widgets

Quick, effective way to create bridge to

social network

HTML 5 and CSS 3 – Illustrated Complete 8

Integrating a Facebook Account

with a Web Site (continued)

Inline frame: acts as self-contained

web page within the HTML document

Feed: most recent set of updates

created by the organization

Social networking sites have more user

updates that static Web pages

Widget showing feed can be useful Web

site addition

HTML 5 and CSS 3 – Illustrated Complete 9

Integrating a Facebook Account

with a Web Site (continued)

HTML for Web page containing widget

code

HTML 5 and CSS 3 – Illustrated Complete 10

Integrating a Twitter Account

Feed

Way to communicate about specials or

provide coupon codes

Use site to listen to what people are

saying about them

Enables quick responses to customers’

concerns

Tweets: name for Twitter postings

HTML 5 and CSS 3 – Illustrated Complete 11

Integrating a Twitter Account

Feed (continued)

Web page incorporating Twitter user

feed

HTML 5 and CSS 3 – Illustrated Complete 12

Adding a Twitter Hash Tag

Feed

HTML 5 and CSS 3 – Illustrated Complete 13

Hash tags: (#) searchable codes that

allow users to find postings on a given

topic

Type in Search Query, Title, and

Caption boxes and click Test settings

button

Web page displays a preview of widget

Explore available settings

Adding a Twitter Hash Tag Feed

(continued)

HTML 5 and CSS 3 – Illustrated Complete 14

Replacement code uses same script

from Twitter to search for and display

recent updates based on #minnesota

hash tag

Participating in Social

Bookmarking

HTML 5 and CSS 3 – Illustrated Complete 15

Social bookmarking: making

connections through social networking

sites

Add social media widgets to Web sites

Insert button onto Web Site users can

click to join network on social networking

site

Facebook and Twitter both have these

options

Participating in Social

Bookmarking (continued)

HTML 5 and CSS 3 – Illustrated Complete 16

Social bookmarking icons added to

Web page

Creating a Blog

HTML 5 and CSS 3 – Illustrated Complete 17

Built and edited using dedicated

blogging platform

WordPress is a popular platform

Simplify content creation

Enable users to use templates to apply

uniform style to blog parts

Useful for easily including content that

changes rapidly

Creating a Blog (continued)

HTML 5 and CSS 3 – Illustrated Complete 18

WordPress Dashboard

Embedding a YouTube Video

HTML 5 and CSS 3 – Illustrated Complete 19

Make user-generated video available

to anyone with Internet access

Important complement to social

networking sites

Can be incorporated into status updates

Businesses or organizations can share

links and invite interested customers

or clients to spread news

Embedding a YouTube Video

(continued)

HTML 5 and CSS 3 – Illustrated Complete 20

Blog containing a YouTube video

Linking to an RSS Feed

HTML 5 and CSS 3 – Illustrated Complete 21

News aggregator: feed reader that lets

you bookmark blogs and view latest

headlines and content in single place

RSS: short for Rich Site Summary or

Really Simple Syndication

Format for document that contains feed

information for a Web site

Copy links from Blog platforms that

generate and update RSS documents

automatically

Linking to an RSS Feed

(continued)

HTML 5 and CSS 3 – Illustrated Complete 22

RSS Syndication code added to Web

page

Summary

You can integrate a Web Site with

different aspects of social networking

Facebook, Twitter, blogs, YouTube

videos, RSS feeds

Social networking sites enable people to

share information about common

interests

Blogs and microblogs enable people

to post news or updates on various

topics HTML 5 and CSS 3 – Illustrated Complete 23

Summary (continued)

Inline frames act as self-contained

page

Hash tags are searchable codes that

allow users to find topic postings

Social bookmarking is important way

to make connections through social

networking sites

News aggregators let you bookmark

blogs to view content in single place

HTML 5 and CSS 3 – Illustrated Complete 24