Session 8 - Adding Social Media

Twitter

Adding a Twitter Button

Head to the following page https://publish.twitter.com/#

We are going to add a "Follow" Button.

Scroll down to display the options. Select the Follow button, Add the @name and copy the link. See screenshots below.









Activity 1

Try adding a follow button to an HTML page. You can use Blogger or you can just create a page with Notepad++ and incorporate the code

Adding a Timeline 

You can add a timeline to your page using the same steps as above, but by choosing the timeline option.

Activity 2

Try embedding a Timeline.

This is what my timeline looks like when embedded on a page.


Adding A Search Widget

You can integrate a Twitter search by using a Widget. You access widgets from your Twitter settings. Select Search, type in your search hashtag, create the widget and copy the code. You can then paste into an HTML file. See Screenshots below.






Activity 3

Try adding a search widget to your HTML page

Embedding a YouTube clip

YouTube clips are very easy to embed on a web page. Any clip that has the share option can be embedded.

Find the clip you want to embed and click on the Share option, followed by Embed. Copy the code and paste into your HTML file. Steps below!






Activity 4

Try embedding a YouTube clip, I think most of you have already done this as I remember covering this when we stared HTML. Worth doing again just to make sure that you remember.

Facebook

There are a number of ways that you can embed Facebook into your website. The easiest way is through the Social Plugins.

https://developers.facebook.com/docs/plugins

Page plugin using iframe

https://developers.facebook.com/docs/plugins/page-plugin

Select the Page Plug, Copy the URL for the page that you want to embed, adjust any settings, click on GET CODE button which will be underneath your preview. Choose the iframe version and highlight and copy the code and then paste into your HTML file.






Activity 5

Try embedding a Facebook Page

Activity 6

Using the link below, try to add a facebook post onto your HTML page.

 https://developers.facebook.com/docs/plugins/embedded-posts

Facebook Button


Activity 7

Using the Social Plug ins, try adding a Facebook Follow me for Chisholm Institute. See mine below, although I think I made mine a bit small!




Instagram

You can embed an Instagram photo or video by displaying the phot or video on the Instagram website, click on the ... and choose Embed. Highlight the code and choose Copy Code. You can then paste it into your HTML document.

Here is mine!





Pinterest

Pinterest has a widget builder that you can use to create social media integration

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

Follow Button

Use the Widget Builder to create a Follow button






Link to access the Blog with the social media embedded
https://2017diplissocialintegration.blogspot.com.au/






Comments

Post a Comment

Popular posts from this blog

Session 11 - Images and the Web

Image
While imaging is not actually included in the elements for this subject/units, this topic is very relevant for creating high quality websites. The following notes are a hotch potch of information that is delivered as part of Certificate IV, focusing on imaging concepts relevant for your websites. Pixels and Resolution It's all about the Pixels You have all heard the term, but what actually is a pixel. This definition is from http://www.techterms.com/definition/pixel and defines the term in plain english. The term "pixel" is actually short for "Picture Element." These small little dots are what make up the images on computer displays, whether they are flat-screen (LCD) or tube (CRT) monitors. The screen is divided up into a matrix of thousands or even millions of pixels. Typically, you cannot see the individual pixels, because they are so small. This is a good thing, because most people prefer to look at smooth, clear images rather than blocky, ...
Read more

Session 1 - Introduction to libraries and Social Media

Image
ICTWEB417 - Integrate Social Web Technologies 1.1 Evaluate different popular social networking websites What is Web 2.0? Dictionary.com defines Web 2.0 as: "a second generation in the development of the World Wide Web, conceived as a combination of concepts, trends, and technologies that focus on user collaboration, sharing of user-generated content, and social networking." The 23 Things So how did libraries and Social Media meet up? The relationship started with an initiative called The 23 Things. Also known as 23 Things for Library; Library 2.0; Learning 2.0. The 23 things concept was developed by Helen Blowers, the technology director of the Charlotte Mecklenberg Library. It was based on an article by Stephen Abram titled “43 Things I (or You) might want to do this year”, which was published in Information Outlook in February 2006. The project was designed to encourage library staff to learn about the new technologies available on the Internet. ...
Read more

Session 12 - 16 - Project Work

Your classes during these next few weeks will be dedicated to working on your projects. At this stage, you should be finished or at the very least, finishing off your design briefs. Once you get your partner's approval that the design brief is accurate, you can start developing your website. See Assessment Guide for full details. Assessment guide has been uploaded to Moodle
Read more