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

1. HTML 5 and CSS 3, Illustrated CompleteUnit 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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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