A few people have asked me about Facebook plugins. So this article discusses a few of the Facebook plugins; and, it also includes information on Twitter widgets and buttons. This post is directly related to web plugins, which are used on regular and mobile websites.
You will rarely come across a company or entrepreneur's website that hasn't incorporated Twitter widgets and/or Facebook plugins. Widgets/plugins are code snippets that add functionality to a website. In this article these snippets are directly related to adding Twitter and/or Facebook functionality to any website that provides the ability to edit the HTML code.
For this article I am going to add widgets, buttons and plugins to my commercial website. It isn't published publicly yet so I am running it locally (on localhost). I'm using Microsoft Visual Studio to create the website; and, my website is running on Internet Information Services (IIS). However, note that you can use any HTML editor to incorporate the widgets and it doesn't matter what technology the website uses because the code used throughout this article is HTML and JavaScript.
Twitter widgets are an easy way to add Twitter functionality to any website. To get started the person who wants Twitter functionality added to their website must have a Twitter account. This means, if you are working for a company or entrepreneur to build a website your Twitter account won't do that company/person any good. The company/person must have a Twitter account and you will need to log into their Twitter account to create the widget(s).
To begin navigate to the Twitter account that has the content to be included on the website. Select "Settings" from the drop-down menu as shown in the following picture.
Then select Widgets (noted by a number 1 below). When the Widgets page displays (noted by a number 2 below); click the Create New button. This opens the Create a User Widget page, as shown below below noted by the number 3.
There are four types of widgets you can create, as discussed in the paragraphs below:
Once you've identified the widget you want to add to the website; open the website you are incorporating the widget into. Determine where you want to place the widget. Create an area to hold the widget. For example you can place it in a table that has 1 row/1 column; or, place it in a table cell, a divider (i.e., <div> tag), a frame, etc.
You can then click the Create Widget button at the bottom of the Create a User Widget page (shown as number 3 in the previous picture). Twitter generates the code. Copy the code (as shown below) from Twitter. Paste it into the area you want it to appear in on the website you are design/updating.
You can click the Save Changes button to save the widget.
Paste the code into the area you prepared on the website. I placed my code in a table cell between the <td> tags. (Note that in my example, I created a table with two columns and two rows. The top row is a single column that spans two columns (i.e, <td colspan="2">). The bottom row has two columns.) After you paste the code into the website save your changes. You can then display the page in a web browser. The widget displays the applicable Twitter data. In my example below I used the User Timeline widget. Notice my tweets/retweets now display on my website; and, a Follow button has been added. Visitors can now view my tweets without going to Twitter. And, users can Follow me by clicking the Follow button provided by the widget. You can follow the same steps above to add any of the other Twitter widgets.
Twitter also provides the code needed for web designers/developers to incorporate Twitter buttons into a website. The Twitter buttons are located on the following page: https://twitter.com/about/resources/buttons.
You can incorporate buttons into a website using the same steps you follow to incorporate a widget. Create a space on the website for the button. You can then navigate to the Twitter Buttons page to select the button you would like to include.
The Twitter Buttons are as follows: Share a link; Follow; Hashtag (shown below); Mention (adds the account-holder's handle to a new tweet).
When you click on a button Twitter gives you a preview button to click (to see how the button works). It also provides the code you can copy and paste to add the Twitter functionality to your website.
Facebook offers a range of plugins you can add to a website to incorporate Facebook functionality. You can embed a Facebook post on a website. People can then Like the post. You can add a Like buttons so people can Like a page. Facebook has a broad range of plugins that can be added to a website. You can find the plugins by visiting the following page: https://developers.facebook.com/docs/plugins/.
Note that some, not all, of the plugins require you to provide an app ID. To do get an app ID you must create a developer account; and, then create an app on Facebook. For more information on creating a developer account and a Facebook app you can see my previous article How to Build Facebook Apps and Games for Android.
The Facebook Like button is probably one of the most popular plugins. It provides an easy way for people to Like a page while navigating outside of Facebook. The steps to create a Like button and add it to a website are similar to the steps followed to create a Twitter button.
To begin visit the Like Button page at https://developers.facebook.com/docs/reference/plugins/like/. Scroll down to the middle of the page to a section called Get the Code. Under the Configurator section there are fields that allow you to enter values or select values from a drop-down. In the URL to like field enter the URL of the site or page you want people to like. For example, if I want people to like www.pamelavlangford.com that is the URL I would add to the "URL to Like" field. You can define the layout style, width, whether or not the profile picture displays for those who click the Like button, etc. You can also indicate whether or not the Send button is to be added.
The Send button lets users send a message to friends. The body of the message is automatically populated with the same URL used in the "URL to Like" field. If you look at the Social Plugins page you will see that the Send button can be implemented by itself. The following picture shows the Send button behavior. You can read move about the Send button by visiting https://developers.facebook.com/docs/reference/plugins/send/.
Notice, in the above picture, Facebook provides two code snippets. The top code snippet (marked as number 1) is from the Facebook SDK for JavaScript. It should be placed immediately below the <body> tag on the web page. The second code snippet (marked as number 2 above) is placed where you want the Like button to display. The following picture shows the website with the Like button with the Send button enabled. If you add several Facebook plugins to a page you only need to add the JavaScript snippet once. But keep in mind that each page you add a Facebook plugin to must have the JavaScript snippet if the plugin requires it (as shown in the above example).
You can also embed a Facebook post on a website page. To begin navigate to the Embedded Posts plugin page at https://developers.facebook.com/docs/plugins/embedded-posts/. The Embedded Posts plugin requires the URL of the Story, which must include not only the URL but also the ID of the post. To get the post URL and ID navigate to a Facebook post and click the date of the post, which is included immediately below the profile picture as shown below.
The post then appears on a page by itself. The complete URL is included in the address field, circled below.
Copy the entire URL and paste it into the URL of Story field. You can then click the Get Code button and follow the same steps used above to add the Like button to the website page.
The embedded post now displays on the website so people can view the post and Like it.
In our last example, we want to add the Comments plugin to our website so people can add comments using Facebook, Yahoo or other site. The Comments Box is located at https://developers.facebook.com/docs/reference/plugins/comments/. The Comments Box plugin works like the previous two plugins we discussed. Add the URL of the page you want people to comment on and adjust the other settings as desired. Then click the Get Code button.
When the Comment box is implemented it does not assume the person wants to be authenticated using Facebook. The user must select the site that will authenticate him/her.
In the example below the user selected Facebook. The user is then prompted to log into Facebook so the site can collect information about the user.
Widgets Overview
You will rarely come across a company or entrepreneur's website that hasn't incorporated Twitter widgets and/or Facebook plugins. Widgets/plugins are code snippets that add functionality to a website. In this article these snippets are directly related to adding Twitter and/or Facebook functionality to any website that provides the ability to edit the HTML code.
For this article I am going to add widgets, buttons and plugins to my commercial website. It isn't published publicly yet so I am running it locally (on localhost). I'm using Microsoft Visual Studio to create the website; and, my website is running on Internet Information Services (IIS). However, note that you can use any HTML editor to incorporate the widgets and it doesn't matter what technology the website uses because the code used throughout this article is HTML and JavaScript.
Twitter Widgets
Twitter widgets are an easy way to add Twitter functionality to any website. To get started the person who wants Twitter functionality added to their website must have a Twitter account. This means, if you are working for a company or entrepreneur to build a website your Twitter account won't do that company/person any good. The company/person must have a Twitter account and you will need to log into their Twitter account to create the widget(s).
To begin navigate to the Twitter account that has the content to be included on the website. Select "Settings" from the drop-down menu as shown in the following picture.
Then select Widgets (noted by a number 1 below). When the Widgets page displays (noted by a number 2 below); click the Create New button. This opens the Create a User Widget page, as shown below below noted by the number 3.
There are four types of widgets you can create, as discussed in the paragraphs below:
- User Timeline - Add this widget to a website if you want a website to display the tweets/retweets added by the user who owns the account.
- Favorites - Use this widget if the website is to display the tweets the account-holder marked as "Favorite".
- List - You can add this widget to a website if the account holder has created a List in twitter and added people to the list. This widget then displays all the tweets posted by the people in the list.
- Search - Add this widget if you want a website to display all of the tweets that include a specific trend phase or Twitter handle. For example, a technology professional might want to configure the Search widget to display all #technology tweets. Or, a tweeter handle may be included in the Search Query field to display a list of tweets posted by account holder.
Once you've identified the widget you want to add to the website; open the website you are incorporating the widget into. Determine where you want to place the widget. Create an area to hold the widget. For example you can place it in a table that has 1 row/1 column; or, place it in a table cell, a divider (i.e., <div> tag), a frame, etc.
You can then click the Create Widget button at the bottom of the Create a User Widget page (shown as number 3 in the previous picture). Twitter generates the code. Copy the code (as shown below) from Twitter. Paste it into the area you want it to appear in on the website you are design/updating.
You can click the Save Changes button to save the widget.
Paste the code into the area you prepared on the website. I placed my code in a table cell between the <td> tags. (Note that in my example, I created a table with two columns and two rows. The top row is a single column that spans two columns (i.e, <td colspan="2">). The bottom row has two columns.) After you paste the code into the website save your changes. You can then display the page in a web browser. The widget displays the applicable Twitter data. In my example below I used the User Timeline widget. Notice my tweets/retweets now display on my website; and, a Follow button has been added. Visitors can now view my tweets without going to Twitter. And, users can Follow me by clicking the Follow button provided by the widget. You can follow the same steps above to add any of the other Twitter widgets.
Twitter Buttons
Twitter also provides the code needed for web designers/developers to incorporate Twitter buttons into a website. The Twitter buttons are located on the following page: https://twitter.com/about/resources/buttons.
You can incorporate buttons into a website using the same steps you follow to incorporate a widget. Create a space on the website for the button. You can then navigate to the Twitter Buttons page to select the button you would like to include.
The Twitter Buttons are as follows: Share a link; Follow; Hashtag (shown below); Mention (adds the account-holder's handle to a new tweet).
When you click on a button Twitter gives you a preview button to click (to see how the button works). It also provides the code you can copy and paste to add the Twitter functionality to your website.
Facebook Social Plugins
Facebook offers a range of plugins you can add to a website to incorporate Facebook functionality. You can embed a Facebook post on a website. People can then Like the post. You can add a Like buttons so people can Like a page. Facebook has a broad range of plugins that can be added to a website. You can find the plugins by visiting the following page: https://developers.facebook.com/docs/plugins/.
Note that some, not all, of the plugins require you to provide an app ID. To do get an app ID you must create a developer account; and, then create an app on Facebook. For more information on creating a developer account and a Facebook app you can see my previous article How to Build Facebook Apps and Games for Android.
The Facebook Like button is probably one of the most popular plugins. It provides an easy way for people to Like a page while navigating outside of Facebook. The steps to create a Like button and add it to a website are similar to the steps followed to create a Twitter button.
To begin visit the Like Button page at https://developers.facebook.com/docs/reference/plugins/like/. Scroll down to the middle of the page to a section called Get the Code. Under the Configurator section there are fields that allow you to enter values or select values from a drop-down. In the URL to like field enter the URL of the site or page you want people to like. For example, if I want people to like www.pamelavlangford.com that is the URL I would add to the "URL to Like" field. You can define the layout style, width, whether or not the profile picture displays for those who click the Like button, etc. You can also indicate whether or not the Send button is to be added.
The Send button lets users send a message to friends. The body of the message is automatically populated with the same URL used in the "URL to Like" field. If you look at the Social Plugins page you will see that the Send button can be implemented by itself. The following picture shows the Send button behavior. You can read move about the Send button by visiting https://developers.facebook.com/docs/reference/plugins/send/.
To generate the code for the Like button click the Get Code button Under the Configurator section. This prompts Facebook to generate the code you need for your website. Facebook gives you a choice of generating HTML5, XFBML (Facebook Markup Language) or IFRAME.
Notice, in the above picture, Facebook provides two code snippets. The top code snippet (marked as number 1) is from the Facebook SDK for JavaScript. It should be placed immediately below the <body> tag on the web page. The second code snippet (marked as number 2 above) is placed where you want the Like button to display. The following picture shows the website with the Like button with the Send button enabled. If you add several Facebook plugins to a page you only need to add the JavaScript snippet once. But keep in mind that each page you add a Facebook plugin to must have the JavaScript snippet if the plugin requires it (as shown in the above example).
The post then appears on a page by itself. The complete URL is included in the address field, circled below.
Copy the entire URL and paste it into the URL of Story field. You can then click the Get Code button and follow the same steps used above to add the Like button to the website page.
The embedded post now displays on the website so people can view the post and Like it.
In our last example, we want to add the Comments plugin to our website so people can add comments using Facebook, Yahoo or other site. The Comments Box is located at https://developers.facebook.com/docs/reference/plugins/comments/. The Comments Box plugin works like the previous two plugins we discussed. Add the URL of the page you want people to comment on and adjust the other settings as desired. Then click the Get Code button.
When the Comment box is implemented it does not assume the person wants to be authenticated using Facebook. The user must select the site that will authenticate him/her.
In the example below the user selected Facebook. The user is then prompted to log into Facebook so the site can collect information about the user.
If the user adds a comment, the comment is added to the website. Other users can then reply to the user's comment, like the user's comment or add their own comments (as shown in the picture below).
