Sharing Your Blog Post on Facebook

Introduction

Facebook is a social networking site that allows it's users to view and comment on their friend's wall posts, photos, entries and applications. By adding a Facebook icon to your blog page, you will be able to easily share your blogs with all of your friends on Facebook. This will allow more access of your blog to the public.

Below we have included step by step instructions on how to add the Facebook icon to your blog page. There is also a screencast which will show you how to complete these instructions on your computer. By clicking on the screenshots they will enlarge to full screen size for better viewing of each step.

Materials

Computer, Internet Connection, Facebook account (optional)
Time: Approximately 10 minutes

Instruction Set Screencast

View Larger Version

Example of Successful Implementation

This screencast shows an example of the Facebook link with the image on your blog page.

View Larger Version

Acquiring the Facebook Icon:

1. Go to http://www.personal.psu.edu/
   wes5017/blogs/port/fbook.gif
2. Right click on the Facebook image
3. Left click Save Image As
4. Save image as 'Fbook.gif'
5. Click Save

Uploading the Image to Your Blog:

1. Open up your dashboard by going to https://blogs.psu.edu/mt4/mt.cgi?_mode=dashboard
2. Hover mouse over Create
3. Click Upload File
4. Click  Browse or Choose File
5. Locate and select saved "fbook.gif'
6. Click Open
7. Click Upload

   NOTE: A File options box will now appear with the name of your saved image in the Name box.

   NOTE: Make sure the box 'Create a new entry using this uploaded file' is unselected

8. Click Finish
9. Click on 'Fbook.gif' under the title column
10. Click Embed Asset under the image

    NOTE:Textbook will appear with URL in it.

11. Copy the URL

Adding the Image to Your Blog:

1. Hover over Design in your dashboard
2. Click Templates
3. Scroll down to the 'Template Modules' heading, Click Entry Metadata

   NOTE:Edit Template box will appear with a textbox full of code.

4. Find </mt:Unless>
5. Type the following code:
   <a target="_new" href="http://www.facebook.com/sharer.php?u=<$mt:EntryPermalink$>&t=<$mt:EntryTitle _default="Untitled" $>"><img src="CHANGETHIS" style="float:right;" /></a>

   NOTE: Make sure you type this code, not copy and paste it, or else the URL you copied will be lost.

6. Paste the URL from Step 11 in the Uploading Image to Your Blog section above where CHANGETHIS is in the code above. The URL will take the place of CHANGETHIS. 
7. Click Save
8. Publish blog