HTML 5 and CSS 3, Illustrated Complete. Unit M: Integrating Social Media Tools

Transcription

1 HTML 5 and CSS 3, Illustrated Complete Unit M: Integrating Social Media Tools

2 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

3 Objectives (continued) Create a blog Embed a YouTube video Link to an RSS feed HTML 5 and CSS 3 Illustrated Complete 3

4 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

5 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

6 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

7 Understanding Social Media (continued) Common features on many social networking sites HTML 5 and CSS 3 Illustrated Complete 7

8 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

9 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

10 Integrating a Facebook Account with a Web Site (continued) HTML for Web page containing widget code HTML 5 and CSS 3 Illustrated Complete 10

11 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

12 Integrating a Twitter Account Feed (continued) Web page incorporating Twitter user feed HTML 5 and CSS 3 Illustrated Complete 12

13 Adding a Twitter Hash Tag Feed 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 HTML 5 and CSS 3 Illustrated Complete 13

14 Adding a Twitter Hash Tag Feed (continued) Replacement code uses same script from Twitter to search for and display recent updates based on #minnesota hash tag HTML 5 and CSS 3 Illustrated Complete 14

15 Participating in Social Bookmarking 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 HTML 5 and CSS 3 Illustrated Complete 15

16 Participating in Social Bookmarking (continued) Social bookmarking icons added to Web page HTML 5 and CSS 3 Illustrated Complete 16

17 Creating a Blog 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 HTML 5 and CSS 3 Illustrated Complete 17

18 Creating a Blog (continued) WordPress Dashboard HTML 5 and CSS 3 Illustrated Complete 18

19 Embedding a YouTube Video 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 HTML 5 and CSS 3 Illustrated Complete 19

20 Embedding a YouTube Video (continued) Blog containing a YouTube video HTML 5 and CSS 3 Illustrated Complete 20

21 Linking to an RSS Feed 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 HTML 5 and CSS 3 Illustrated Complete 21

22 Linking to an RSS Feed (continued) RSS Syndication code added to Web page HTML 5 and CSS 3 Illustrated Complete 22

23 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

24 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