Session 8: Integrating Social Media

Linking to your social media accounts

Read the following article on embedding social media:

One way to integrate social media on a website is to include a link to your social media accounts.

Facebook

Facebook has a plug-in generator that will allow you to embed a variety of Facebook items.



Follow/like on Facebook

Select Like Button from the left hand menu.

Load the configurator and change/add your details.




We will use the iFrame code as it is much more reliable and does not use Javascript SDK




Paste the code into your HTML file where you would like the button to be.


Save and run your code

Page Plugin

I added a like and embedded the page so my test web page looks like this:





Embedded posts and videos

You can embed any public post from Facebook. I have made this Facebook post public to demonstrate.




And the result:


Class Activity 1

Using the above methods, create an HTML file that can be used to practice integrating Facebook.


HINT: Start with a blank HTML, add the basic elements, then try adding the code for Facebook integration. Make sure you Save As HTML file first.

<html>
<head><title>Integrating Social Media</title></head>
<body>
</body>
</html>

YouTube

There are 2 ways to integrate YouTube with your website. You can use the YouTube link with the <a> element or you can embed the video onto your website.

---------------
<h2>You can use a link such as this </h2>
<a href="https://www.youtube.com/watch?v=sY-1hoS1W9E" target=_blank>HTML vs CSS video</a>
---------------




Activity 2

Using the same HTML file as the previous activity, try embedding a YouTube video of your choice

Twitter

Twitter, like Facebook, also has a developers area that has information on how to integrate Twitter on to a website. The following link has some information on how you can integrate Twitter.

Use Twitter Publish to incorporate Twitter information on a webpage

Embedding a Twitter Timeline

Embedding all things Twitter starts here:

https://publish.twitter.com/#

For this example, I have embedded the Chisholm Institute timeline.








Twitter Follow






Activity 3

Try out some of the Twitter embedding options.

Pinterest

Pinterest also has a developers section with information on widgets and embedding.

https://developers.pinterest.com/docs/getting-started/introduction/?

Pinterest Widgets

https://developers.pinterest.com/tools/widget-builder/?

https://blogpros.com/blog/2019/01/ways-embed-pinterest-blog

The Pinterest widgets use Javascript and do not work unless your HTML is published on the web. To demonstrate the Pinterest widgets, you could embed the code into a Blog (as it will be published).





below is Sample ALIA board embedded on page


Instagram

Yes, you guessed it - Instagram also has a developers' page with information on how to embed Instagram posts and feeds.

https://www.instagram.com/developer/embedding/




Embedded Post




TikTok

Here is some information about embedding TikTok videos on a webpage

This is an example of ways you can share TikTok videos. the <> at the end is for embedding and will give you the code to copy.




Third party tools

There are also lots of third party tools that you can use to help with social media integration. Most website builders will have widgets for adding social media elements. For example, Blogger allows you to add an HTML/Javascript gadget, which can be used to add social media to the sidebars.

Comments

Post a Comment

Popular posts from this blog

Session 11: Tracking, Closure and Review

Image
Tracking your Project with Project Libre There are multiple ways of entering "real" data into your project. You can use timesheets and enter details by the day/hour for each resource or you can add the information into each task. For a small project, I find that the easiest method is to add the actual data into each task. Before you start to track your actual information against your plan, you need to set a baseline. I will use the Project Libre file that we created in class to demonstrate the tracking procedure.  Setting a Baseline I will set mine to Baseline 1. You can have multiple Baselines for tracking purposes, whether they be for different sections of your project, or for different scenarios or plans. Once you have set the Baseline, you will be able to view the actual information against the plan. The plan shows up as a shaded area, currently underneath the plan. As you enter in actual start dates and progress information, the shaded area (your ...
Read more

Session 7: Introducing CSS

Image
HTML so far The Basics <html> <head> <title></title> </head> <body> </body> </html> Headings <h1> .... </h1> <h2> .... <h2> <h3> .... </h3> <h4> .... </h4> <h5> .... </h5> <h6> .... </h6> Paragraphs <p>....</p> Breaks <br /> Lines <hr /> Lists <ol> .... </ol> <li> .... </li> <ul> .... </ul> Images <img src="path/filename" height="nnn" width="nnn" alt="corporate logo"> Attributes id title class style id="value" title="value" class="value" style="value" Tables <table> </table> Use to define the table <tr> </tr> used for each row in the table <th> </th> Table Header - this makes the text bold <td> </td> table data is used to incl...
Read more

Session 9: Project Libre Gantt Charts

Image
Project Libre Tasks With Project Libre, you start by defining the basic information about your project. Once you have provided the basic information, you can start to create your timeline by entering the tasks into the Gantt Chart. Predecessors In class we will work through The Big Move class example to create the timeline for the project. Class Activity 1 Using Project Libre, enter the tasks using the Gantt Chart View (Completed above as a class) Allocate/Estimate the duration for each task (Completed above as a class) Determine any predecessors for each task (Completed above as a class) Critical Path Analysis The Gantt Chart view in Project Libre will display the Critical Path in red. What does that mean? The Critical Path is the first area that you need to concentrate your time management skills. Any activity on the critical path that takes longer than the estimate will affect your end date. The blue activities have a bit of "wriggle room" (I know, not a technical project ...
Read more