Do you want to start leveraging social media technologies on your web site? If so, read on for our introductory blog about embedding social media tools in your website.
Today we will outline the steps necessary to link to your Twitter feed or Facebook page using the Web Manager by Port 80 Solutions. We will also go over the steps for embedding a YouTube video on your site. Linking to your feeds is only the first step, but it is an important one. We will go over more advanced techniques in future blog posts.
Twitter / Facebook
The following steps outline how to link to your Twitter feed or your Facebook page (or both!). For this example, we will link to the BBC’s twitter feed (twitter.com/BBC) and Facebook page (facebook.com/bbcnews).
Note: The following steps outline how to create these links using the Seamless Editing System (SES). More detailed information for the can be found in the SES FAQ. Instructions for the classic editor can be found in the Web Manager Administration Guide.
1) Upload the appropriate image(s) to your site
Download these images to your computer:
Right-click each image and select “Save Image As…” or “Save Picture As…” (depends on your web browser)
Now, login to the Web Manager and upload the image(s) to your website using the “Manage Files” interface.
Take note of which folder you’ve uploaded to for later reference.
2) Add the image to a page on your website
Now, edit the page you would would like to add the link to. Use the “Insert Image” dialog and “Browse Server” to find the appropriate file that you uploaded in Step 1.
The next screen shows the Twitter image being used.
The image should be previewed in the dialog. Don’t click OK yet!
Important: Set the “Border” field to “0″ (zero) to prevent the ugly default HTML border that will automatically be placed.
3) Link the image to your Twitter Feed or Facebook page
Click the “Link” tab option. Put the entire link to your Twitter feed or Facebook page in the “URL” field.
Click ‘OK’ and you’re done! Publish your changes and your visitors will be able to easily find your Twitter feed and Facebook page!
YouTube
An excellent way to stream videos for FREE is to embed a YouTube video on your website. Follow the instructions at www.youtube.com to sign up and get your video posted. Once it is streaming at YouTube, you can embed it on your website.
For this example, we’ll use this video:
http://www.youtube.com/watch?v=_xMz2SnSWS4
1) Get your video’s embed code
Follow these steps to get the HTML embed code:
- View the video at YouTube:
http://www.youtube.com/watch?v=_xMz2SnSWS4 - Click the “Share” button
- Click the “Embed” option
- Copy the “Embed” code to your clipboard.
Tip: An easy way to keep it handy is to paste it into a blank Notepad document.
Alternatives steps for obtaining this code are available at the YouTube Help section:
http://www.google.com/support/youtube/bin/answer.py?answer=171780
2) Paste the Embed code onto your web page
Now, login to the Web Manager and edit the web page you would like to add the YouTube video to. Edit the region you would like to add the clip to and click the “Source” toolbar option:
This will open a dialog that has all of the current region’s HTML source code. Make sure that you only modify the code between the <body style=”width:100%; overflow:hidden”> and </body> sections.
Paste the Embed code obtained into the Source dialog:
Click for a full sized image.
Important Note: If you are embedding the Video into a region that already has text and content, you need to be careful where you place it so you do not corrupt the existing HTML. The simplest way to do this is to place the code immediately after the <body style=”width:100%; overflow:hidden”> code (top of the region) or immediately before the </body> code (bottom of the region).
3) Test
After the code has been entered into the Source dialog, click “ok”. The clip will show up in your editor. If it is too large, or too small, return to Step 1, and pick different sizing options from YouTube’s embed dialog and replace the code in Step 2 with your new code.
Once everything looks good, Publish the web page and it will be available to your website visitors!
Conclusion
Embedding a YouTube video is a powerful way to add more life to your website. Linking to your Twitter feed and Facebook page is just the first step to integrating these social media technologies into your website. Check back for future articles that will explain how to more tightly integrate your Twitter and Facebook accounts with your Port 80 Solutions Web Manager site!
Resources
- Facebook Social Plugins
http://developers.facebook.com/docs/plugins/ - Twitter for Websites
https://dev.twitter.com/docs/twitter-for-websites - YouTube – Uploading Videos
http://www.google.com/support/youtube/bin/topic.py?topic=16547 - YouTube – Sharing Videos
http://www.google.com/support/youtube/bin/topic.py?topic=16569 - Seamless Editing System (SES) Guide
http://www.port80solutions.com/images/ses/ses-guide.htm - Web Manager Administration Guide
http://www.port80solutions.com/Groups/Client%20Support/Web%20Manager%20Administrator%20Guide.pdf