Windows 8 Metro Freezes

March 7, 2013 in Digital Related Posts, Technical Tips by Ursula Smith

I finally got off the iPad band wagon, since I kept running into frustrations over what it wouldn’t do in a mixed environment, like the one that we have at home with a mish-mash of PCs and i-appliances. So, I now own a windows 8  laptop with the new touch interface. Theree is a learning curve, and as usual, Microsoft made some completely dumb-ass decisions like eliminating the POP interface for the mail tile, and making it difficult to use Google contacts and Calendar-Google stopped supporting the Microsoft  sync methodology, and Microsoft isn’t supporting Google’s and so we users are left with 3 important tiles that don’t work out of the box. I got the contacts and calendar sync to work sort of-ish, by hooking up a Microsoft Live accoutn to my Google, so that is at least acceptable.

Other than that I was totally loving my new laptop, until today. I rebooted and the Metro interface stopped working. Just stopped. I could not do anything! I am not even sure what I would have done, except that luckily I had set up a local user, which boots into the desktop or non-touch/Metro UI. From there, I could boot into Safe mode and I was able to determine that everything was ok on the Windows side of things. There was a notice to check the last programs that were installed, which I thought I knew what they were and had already un-installed. But it turned out, that I had forgotten that I had installed PhotoShop CS6. Some of the programs that Adobe installed for PhotoShop, that were set up under the Start up service were causing the issue.

So BEFORE you run into an issue with Metro, I would suggest the following:

  • Create a local Account
  • I would even suggest you search the Internet for how to boot into Desktop mode, and then go to Metro when you want. This may be an extra step if you really love Metro, tho. I installed a Shell program that sets up the old-style Start Button, and from there I was able to configure to start in Windows Desktop mode, but there are other ways of doing this.
  • If you have Adobe CS6 installed, look at the StartUp processes and disable the Adobe ones (from memory, it is something like: Ctrl-X->Task Manager->Run->msconfig-> and then look at the StartUp tab).

Ohter than these few glitches, I loved getting back control with a Windows 8 convertible! Good Luck!!

Drupal 7 Instagram Feed

December 5, 2012 in Digital Related Posts, Technical Tips by Ursula Smith

I wanted to add an Instagram feed to the Creative Clearinghouse site, and was struggling to find the right way to do it in Drupal. I searched all over and tried using the Drupagram module (it worked but not exactly what I needed), and started looking into the Feeds module. Then I stepped back and thought “Keep it Simple, Stupid”. One other time I had been searching for an answer to something I was trying to do in Drupal, and many searches later I had no results. It wasn’t that there were search results that were wrong or old or whatever, there was just a lack of search results from people complaining that they had an issue like I was perceiving I had. Until I realized the answer was so blatantly simple that a novice would even be able to figure it out. I was just waaaaaay overthinking it.

And so this time, I started thinking along those same lines. I probably was over thinking it. All I wanted to do was get some Instagram pictures that were hash tagged with #creativeclearinghouse. There is an RSS feed from Instagram that does that. There is an Aggregator module in Drupal 7 that pulls in feeds. So I gave that a whirl. It worked with views and presto, I had my Instagram feed!

First I set up a feed under the Aggregator module configuration to the feed URL- http://instagram.com/tags/yyy/feed/recent.rsswhere yyy is a hashtag. Then I created a view that was created using an Aggregator feed type. Here is a great tutorial on how to do that - http://drupal.ucar.edu/forum/node/155 .

I ended up tweaking the Aggregator module. I know, I know this is NOT what you are supposed to do!!! However, I wanted to link back to the Instagram author and show the caption. These are not pulled in now by the Aggregator module. I wanted  the author to be set to the value of the media:credit tag and the description to be set to the media:title tag. so I added the following:

 

    // Resolve dc:creator tag as the item author if author tag is not set.
    if (empty($item[‘author’]) && empty($item[‘dc:creator’]) && !empty($item[‘media:credit’])) {
      $item[‘author’] = $item[‘media:credit’];
    }

 

after:

    // Resolve dc:creator tag as the item author if author tag is not set.
    if (empty($item[‘author’]) && !empty($item[‘dc:creator’])) {
      $item[‘author’] = $item[‘dc:creator’];
    }

 

Also after:

   }
    elseif (!empty($item[‘content’])) {
      $item[‘description’] = $item[‘content’];
    }

I added:

    elseif (!empty($item[‘media:title’])) {
      $item[‘description’] = $item[‘media:title’];
    }

   This was in the modules parser.inc file.

 

 

Update 6/5/2013:

 

I think what folks might be missing is this: in my view for the Aggregator View, I played around with the fields.

I have 5 fields:

Aggregator: Item ID (which I hide from display)
Aggregator: Author (which I used the option to rewrite the results)
Aggregator: Link (which I hide from display)
Aggregator: Title (which I hide from display)
Aggregator: Link (which I used the option to rewrite the results)
Aggregator: Body (which I used the option to rewrite the results)

For the Aggregator: Author field, I used the option to rewrite the results like so:

from [author]:

and I output the results as a link like so:
http://instagram.com/[author]

I checked off “external server” and “title text” was set to:
[author]

I set the Aggregator: Link field and the Aggregator: Title field to not display.

I added a second Aggregator: Link field and used the rewrite the results option with the following value:

<a href=”[link_1]”><img src=”[link_1]” width=”300px” /></a><br/>

and hid the results if empty.

For the Aggregator: Body field I also used rewriting and set the value to:

[description] <br/><br/>

Hope this helps!

SSL process

May 6, 2012 in Digital Related Posts, Technical Tips by Ursula Smith

Today I wasted nearly a full day setting up SSL on easyscraps.com since we now have a new cart system (basically a new site). If any of you are planning on setting up SSL on your site, read on…

What a pain!! I, at least understand the terms, but I had never actually performed the process before and the process is crazy! And so I set it up wrong, and had to go through my site trying to change/fix things so they would work with the new setup for HTTPS on our new cart.  If any of you are going to set up an SSL certificate, make sure your certificate is for the domain that your web site typically runs under. In non-geek speak, if you run your site as www.zzzz.com that is not the same as zzzz.com (without the www) when you go to apply for an SSL certificate. Unfortunately, the program I used to set it all up, defaulted to zzzz.com as the choice for the domain on which to set up the SSL certificate. So that’s what I went with. After I installed everything, and tested going too https: using www.easyscraps.com, I got a very ominous warning. After hours of reading, I was unable to figure out a way to make that certificate I set up for easyscraps.com work using HTTPS with www.easyscraps.com.

So, I basically re-worked a lot of the site to force you to just easyscraps.com. If you get to our store through the web site (which is basically how it should work) we are fine. Hopefully I caught all the places, and closed all the loops.

So- beware! Double check your domain BEFORE you order an SSL certificate!!

Note, also that if you use Chrome, trying to access an HTTPS page which references or links to other items using HTTP, then Chrome will force you back to HTTP, and you will see HTTPS crossed out in the browser. This makes no sense to me! Why would forcing a user back to HTTP, and potentially (if this is a login page) forcing a user to log in and send their information in the clear, be better than just popping up a warning (however annoying it is) like IE does??!!! Anyway, some potentials for causes of this conflict are:

  • images
  • CSS files
  • fonts
  • javascript files
  • twitter or facebook feeds or plugins

The best bet, is to strip down your login pages, or anything you want to serve over HTTPS to the bare minimum and to serve images etc, using relative paths (without the http://www.zzz.com/ bit) to external files, in order to avoid the warnings. Anyway, hopefully you won’t run into any of the issues I did!!

Drupal 7 Tips

April 23, 2012 in Digital Related Posts, Technical Tips by Ursula Smith

I just started working with Drupal7, an open source content management system, for a new venture, and it is great stuff! However, it is sometimes hard to figure out how to accomplish things. Sometimes there are actually multiple ways of doing what you need. And the documentation can be very hard to find and/or follow. Especially since not all of the Drupal 6 extensions have been upgraded to the new version 7 functionality!

http://dev.nodeone.se has a lot of videos for helping you learn Drupal. Check them out.

But none of this has been enough for me to look elsewhere, so I decided to try to start tracking some of the tidbits of information that took me a while to find/figure out, in the hopes that it might save some time for others &amp;#58;&amp;#41;.

So, here ya go- the first Aha Moment. Yeah, for you geeks out there, I know, I know- RTFM &amp;#59;&amp;#41;….

  • Tokens- there is all sorts of old/useless information out there regarding tokens in Drupal 7. All I wanted to do was figure out the syntax. Simple, no? Well, it took me a while to figure out that all I needed to do was go to my own Drupal site, and click on the Help link in the Admin center. There is a link for token, and not only did it have a list of token syntax, it had the syntax for all the items that pertained to MY site! For instance, fields that I had defined for my custom content types. Brilliant! But, duh- it took me a while to figure that out!!
  • Tokens, seem to cause people a lot of grief, and it is no wonder since the documentation is so spotty. I was trying to add a token to a title, and FINALLY happened upon this link:  http://drupal.org/node/462654 . Here is the golden nugget of information, that I lifted from that post for your convenience. However, it is probably worth going back and reading through the original, as it gives some insight as to why tokens in titles, headers, footer etc were not being rushed into the core code. In any event, here I send off a great big thanks to patcon for his explanation of Attachments in Views. Look into them- they are very cool &amp;#58;&amp;#41;…”

Sure thing dude.

There are different types of view displays — block, page, attachment, feed, etc (more can be added by other modules). Each little tab on the left of the a specific view edit page corresponds to one of these view displays. You can add more or remove them, and they all sort of use the “Default” view display as a base (although you can overwrite).

So if you want a dynamic header:

  • Create a new view (which is a set of view displays with at minimum a “Default” view display).
  • Add a “Page” display and an “Attachment” display.
  • Configure your “page” display as you normally would, leaving the header blank. Set it as Table style if that’s what you want.
  • Now, work on the “Attachment” display. In the “Attachment settings” portion of the edit pane, you’ll be able to set it to attach to any “Page” display, positioned either below or above depending on your header/footer needs. (Override what you need to so that your changed don’t affect the “Page” or “default” view display.)
  • Still on the attachment display, set the “style” to “unformatted”.
  • Set the result limit to 1, so that only one row is returned. We only want one copy of the header/footer, right? (Slight aside: I’m working under the assumption that you only need data from one row in the header/footer, which is perhaps incorrect. Here’s the demonstration scenario: You’ve got the year in the exposed filter, and you’ve got multiple results from multiple nodes displayed in the main table, and you have another node type that has info on that year as a whole, of which only one exists per year. This would work if you wanted that info displayed in a dynamic header.)
  • Back on track: Add all the fields you need to the unformatted attachment display, and exclude them all from the view, so they’re hidden.
  • Add a “Global: Custom text” field, making sure that it’s the last field in the list and that you delete its label. Assuming you have Token module installed, you can now use tokens from all the other fields to generate what amounts to a dynamic header.

Phewf. Took longer than expected to explain, but hopefully you get the idea. I haven’t done this myself, but I can’t see why it wouldn’t work. If you need to header to disappear when values don’t exist, then instead of adding a “Global:Custom text” field, you can leave one field visible and simply override it with tokens and custom text (so that it become the header). That way, you can use the checkbox to “Hide field if empty”, and when that field has no value, it will hide the whole header. If that’s what you’re going for, I think there’s also a setting in the “Attachment settings” pane that you’d need to adjust, telling views to hide the attachment if nothing is returned (but maybe I’m mistaken).

Anyhow, hopefully this helps &amp;#58;&amp;#41;
Cheers

” . This method worked like a charm, BTW!
  • Bartik Theme and Colors- there is a ton of information out there on themes, and setting up sub themes. Doing so wasn’t hard, but trying to get the colors on my site to look the way I wanted to, was difficult. The Bartik theme had enough to get me going, and it was easy enough to figure out how to create a sub theme and tweak things like regions, etc. I tried changing the colors in the cascading stylesheet, colors.css in my sub theme. However, the colors kept getting messed up. I finally figured out that I needed to set the sub theme back to the default color scheme, by going back to the original color.css, and then change the colors of JUST the items listed in the Settings under the  Appearance section in the Admin panel. Anything that I did not want colored, I took out of colors.css, but other than that I left that stylesheet ALONE!! Do not modify the colors in colors.css, or you are asking for trouble! Anything I wanted to color myself, I added into the CSS file for the sub theme itself, i.e. bartik_sub.css, where bartik_sub is what I named my sub theme. Lastly, I ran into issue where Internet Exploror 8 showed the tab colors in gray. As seems to be typical when trying to track down Drupal 7 information, there was a ton of noise out there about people running into the same sort of issue, and why Bartik wasn’t suppose to jump through hoops to cater to IE, blah, blah, blah. While I agree with them, in general, it is still frustrating trying to make something work, and someone is taking the high road. I was almost at the point of just putting a message stating that “This site is best viewed in Firefox/Chrome/Safari” when I spied a file called ie.css. I edited that stylesheet with the colors I wanted for the tabs, and lo and behold! Colored tabs and the Featured div, just the way I wanted them!! And as a side not, there was no interference from the color module code, shifting the colors on me in this stylesheet. I am still having a bit of trouble with the colorization in the Bartik theme for a few items, but I am going with it for now. It is good enough, until I can find another theme I would like to use. Hopefully something without the color module &amp;#58;&amp;#41;.
So this week I am really hating on Drupal &amp;#58;&amp;#40; . I was just trying to finish up the last little bits of this site I am working on, and it has taken me HOURS to accomplish what I would think would be simple tasks.  Here are the sources of frustration, and hopefully some hints to help you if you are running into the same issues…
  • CKeditor to allow embedding media. Do I need the module Media and Embed Media and anything at all related to Media? Answer, no- not if you are using CKeditor, which for Drupal 7 seems to be about the only thing you really can use. If you download the CKeditor for Drupal from the CKeditor site, you get all these warnings about unlicensed software, even tho Drupal is Open Source, and the CKeditor module is supposed to be as well. So, the correct installation process is to install the CKeditor module from the Drupal.Org site (http://drupal.org/project/modules and serach for CKeditor). Then you need to get the CKeditor plugin from the CKeditor site, unzip it, and copy the contents into the sitesallmodulesckeditorckeditor folder where it says “Copy Here”. When you configure CKeditor on your Drupal site, make sure you click the checkbox to allow the media to be embedded. To do that, go to a profile (Full or Advanced are the default ones) , then to Editor Apperane, then to Plugin. Above the Plugins, you will see a couple of Toolbars. You can click on teh buttons in the very bottom one, which are the ones not in use, and move them to the toolbar that is being used just above it. So grab the embed media button from the “All”  toolbar, and move it to the “Used” toolbar. This embed button works with Youtube and Vimeo. I didn’t try any other ones.
  • Want to add users to a role, and then send an email to those users? Yeah, good luck with that one &amp;#59;&amp;#41;. This seemingly easy task took me HOURS to get going (altho I was also trying to work on a weekly newsletter task at the same time- more on that later). Here is where Drupal, in my mind, has a huge brain cramp! It should not be so hard to set up a task that adds a user to a role and then sends a page (for consistency’s sake) to that user. In fact, there are all sorts of pieces that should let you do this. But, alas, they do not all connect. I did finally get it to go, so you can skip to the chase below, but for all my trials and tribulations, I need this time to vent &amp;#59;&amp;#41;
There are components under Configuration->Workflow->Rules where you can do just the sort of thing I was trying to do. Take a user as an input, take a URL as an input,  add a user to a role, fetch a page from a property, like the given URL, and send an emal.
  • Problem 1- fetching an entity from a property, that property being the URL, doesn’t work. At least I couldn’t get it to work, and other folks seemed to be having similar issues, and noone ever gave a straight answer as to whether it really should work. I think when I last left off, there might have been someone in Rules who acknowledged that it might be a problem. It was hard to follow the link trail and whether they blamed Commerce or Rules. I think it is Rules, since I don’t have Commerce. Anyway, if you try to use the fetched entity, it apparently is assuming it is returned as an array, but it isn’t and so it doesn’t work. So don’t go there.
  • Ok, so I did a fetch by ID instead. And that worked well enough. I hard coded the ID of a page for testing purposes, and got the page to be sent in the mail body (only as text since I haven’t set up Mime mail yet). Cool, now I can set this up as a View Bulk Operation (VBO) on a view that shows my list of users, and presto- Magic. Ha! Not so much.
  • Go ahead, create a view of users. Then try to hook it up to a Rules Component using Bulk Operations. You can’t do it. VBO doesn’t give you the option. It narrows the scope of the operations you can use to some other subset, not Rules Components. It took me a while to figure out where these are even coming from, but I finally found them under Configurations-> Actions. Ok, so let me set up an action to do this, Yeah, well maybe not. I can set up one action to Move a user to a role, and one to send an email, but I can’t combine the two, this way. As this task is going to be used by a not so technical user, I really didn’t want to do it that way, but that would have been my fall back plan.
  • I did get the Rules Component to work if I called into the View to get the list of users, and then looped thru the list adding them into the role, and then sending email. However, in case we needed to just perform this on a subset of the users shown in the view, this wasn’t ideal. If you are sure all the users pulled in a particular view are going to be acted upon, then you can use the action, “Load a List of Entity Objects from a VBO” to get the list. Then you can add a loop action, and add actions under the loop to do things using that list. NodeOne.com has a bunch of videos on Rules (and may even cover the VBO action, I forget), so check them out for more information.
  • So, finally what I decided to do, so that my non technical user can have a single step to perform, from a list of users in a view, was to create a flag on a user, that only the admins could see. In Configuration -> Actions, I set up a new action to Flag and Unflag that particular flag, and named the actions accordingly. In my View of Users, I added a Bulk operation, and chose those two new actions as the operations that could be run on the User. Then in Configuration->Workflow->Rules, I set up a Rule, rather than a free-standing component. Rules will be run in the event of some action taking place, like a piece of content being saved, or in my case a user being flagged (or unflagged). The actions I set up were as before, I fetched an entity by ID (I hard coded this as I could not figure out a way to send along the page ID easily from the View without my non-technical being confused as to what to do. Typing a URL would have been acceptable, but an ID not so much). Setting up different Rules related to different groups of users was ok for me since Rules allows cloning.
  • Note: here is the configuration I used to send the email. You would need to tweak the variables a bit depending on what you named things in the rule/component:

Dear [user-entered:field-firstname],

Thank you for becoming a Sponsor for Creative Clearinghouse!!  Included in this email are instructions for how to enter your Ad. You may also read the following instructions here: [entity-fetched:url] .

[entity-fetched:body]

Update: Some of what I ran into in the previous tirade, may have been a mis-understanding on my part. I was finally able to achieve a measure of success with sending a list of Users (real users of the system) that are displayed within a View and send them an email. I needed to creat a Rules Component that took as an input parameter, a User, NOT a node, and then my Rule would show up in the Views page listing users. Our system uses pages to represent a subset of users, so I was getting confused when trying to use the same Rules component for both.

The other issue I am wrestling with, and here I feel like I am trying to bang a square peg in a round hole, is trying to send out a newsletter. Weekly. I have it set up for an RSS feed to go trhough Google, but that sends out the feed daily. I really would rather do it weekly, or monthly. In Drupal, there are Views to get the latest postings, no problem there. There are flags that let the users indicate that they are interested in subscribing to a newsletter. No problems there. There are Rules Components to grab that list of flagged users and send an email (via the VBO action as I talked about earlier). There is the ability to scheduled a Rules Component for sending in + 1 week. Perfect! So, where’s the issue? I can’t figure out how to get the rendered version of a VIEW to be placed in the body of an email. I thought well, maybe I will make a page and have a view block on that page that shows the listings for the week. Still no way to get that full rendered view. I am still pounding this square peg, so I will followup if I ever get it in the round hole &amp;#59;&amp;#41;
Ha! I pounded that square peg hard enough, that I FINALLY got  it into the round hole!! I got a newsletter going! I needed a fix for the Views Module in order to get this working.  Here are (roughly) a list of the modules that I used:
  • Views
  • Views Bulk Operations
  • Flag
  • Rules
  • Date

I was trying to use a view that listed the new posts that were created within the last week.  Then I create a View of users that had flagged their interest in the Newsletter, and added a Views Bulk Operations to the view. Finally, I created a Rules component that used an action to create a list from a Views Bulk Operations list and then loop through that list to send an email. What I was trying to do was embed the view in the body of the email. Finally, as it turned out, I needed a patch to the Views module in order to do this. If you are trying to do the same thing, then you need to look at this note- <a href=”http://drupal.org/node/1471770″>http://drupal.org/node/1471770</a>- and apply the patch posted on May 25, 2012. After that I was able to use the following PHP code in an HTML email and a field on a node using the PHP format.

<?php echo views_embed_view(‘machine_name_of view’, $display_id = ‘machine_name_of_view_display_name’) ; ?>
Note that this PHP snippet will also work if you want to embed a view in a block on a page. You can use the Body block, and as long as you have enabled PHP to be used in a content block, then you can use that snippet in Drupal 7 (Drupal version 7.14, Views 7.x-3.3) to embed a view.
Also, if you are trying to embed formatted text (i.e. full HTML) and are using CKEditor, Mimemail and Rules to do so, you might need to use PHP to get at the formatted text. Otherwise, all the HTML seems to get stripped out and you are left with plain text. You can follow a post about this here- http://drupal.org/node/1468262
Tabs in Views are another thing that drive me crazy in Drupal. I think I have finally figured out the long and short of it. Basically, if you have two Views pages, and want to make them tabbed do the following:
  • Make both pages have a path setting that starts with the same parent path. For instance, if one tab is Tab1 and the is Tab2, set the path on one to be something like “mytabs/Tab1″ and the other to be “mytabs/Tab2″.
  • Set one page to have a Menu settting of Normal and you can put it into any Menu on your site that you like.
  • Set the other page to have a menu setting of  “Default Menu Tab” and when you hit apply, choose “Already Exists”  for its Parent Menu Item.

Related Content by Author: I was trying to create a block of other content related bu author. I got as far as adding a relationship to the View, but it didn’t narrow down the results to the actual user who was the author of the current node. I knew I needed to enter a user id of the author I wanted to narrow down, as a contextual filter, but I couldn’t figure out a way to do this outside of panels. Here is the trick- Enter a User ID as a contextual filter for the block. Choose User ID from URL as a default value if none is entered and underneath there is a checkbox “Also look for a node and use the node author” option. That is the key! Click and you are good to go!

Good think I had started this post for me! I had to come back here to remember how to re-set up ckeditor after and upgrade! Yay me &amp;#59;&amp;#41;.

So the latest thing I had to do was tweak search. I need to restrict search by content type. Views seemed like the way to go, but I gotta tell ya- it wasn’t all that intuitive! I finally managed to figure out that I need to add Search Tems as a filter on the view, and then go over on the right and find the “expose filter as a block” setting and change that to yes. Now I had a block that should up in the admin page for Blocks that I could place into one of the areas on my theme, replacing the normal search block. The generated search block calls the search page I created in views, and it worked like a charm- almost! There is a bug (at least I consider it a bug) in the search results where the sort screws up the output when you search on a term with multiple words (liek an Instructors full name). There was a post about creating a custom module implementing hook_views_alter_query in order to fix it by un-setting the score variable in the query. The one with the code to use the unset was the one that worked for me. I had to tweak the theme layout css a little bit to shrink the slogan block and allow the new sort block to sit higher up on the page, and shrink the width of the submit button a tiny bit, but other than I was good to go. Of course, this took me HOURS!!!!!!!!!!!!!!! I like Drupal, but when easy things like this take such a long time, I really think about looking elsewhere!

I will continue to add to this post as I go along. Enjoy!

How to Make an HTML Link in a Web Page

January 7, 2012 in Digital Related Posts, Technical Tips by Ursula Smith

As I have mentioned several times, I have a group of friends that are great artists. They, however, aren’t necessarily web programmers. So, in order to help them out for an up-coming blog hop on January 9, 2012, I decided to explain how to make a link using HTML. Hopefully this helps!!

An HTML link is created using the Anchor tag. It goes something like this:

<a href=”URL-to-the-web-pagetitle=”Some explanantion of the link, if you like>The Text you want display as the link in the web page</a>

In HTML each tag (generally) has an opening and a closing sequence. In the case of Anchor, it is <a> and </a> The <> indicates it is a tag. . The a is the tag name. The / in the second sequence, </a>, indicates it is a closing tag for the opening sequemce, <a> .

An anchor tag has an inner link text, which is the text that will actually show up in your web page document when it is read by the browser. This goes in between the opening anchor tag sequence and the closing tag sequence. In the example above, it is the text- The Text you want display as the link in the web page. This text can say anything you like. Most often, I actually use the URL to the web page I am trying to link to, so that in the case where the link might not work for some reason, the URL is displayed, and a user can copy the text and paste it into their browser, and they can get to the web page that way.

The actual linking part is handled by the href attribute. An HTML tag attribute sits inside an opening tag sequence. So the href attribute goes inside the <a> tag sequence, like so <a href=””> . What goes between the quotes is the URL to the web page that you are trying to link to. So, if I was trying to link to this blog, I would use the URL, http://Ursula-Smith.com/blog .

The final piece, which is optional, is the title attribute, but it is a nice thing to have. The title attribute, again goes inside the opening anchor tag sequence, like so- <a title=””> . The title allows a user to hover over the link, and the text within the title will be displayed by the browser (most times). So, in our example, the text Some explanantion of the link, if you like would be displayed. In the case where I use the URL as the link text, I usually add an explanation of the link in the title attribute.

So here is the code for an example link to this page:

<a href=”http://ursula-smith.com/how-to-make-an-html-link-in-a-web-page/” title=”This is a test”>Link to this page</a>

and here is the actual link: Link to this Page.

So, now things get a little bit tricky! Because this post is for a bunch of artists, you KNOW they will want to have their link text be an image rather than just text &amp;#59;&amp;#41;. No worries! Instead of just putting text in between the opening and closing anchor tag seuqences, you can put an image tag instead.

An image tag looks something like this-

<img src=”URL-to-the-image-on-a-web-server alt=”Alternate text in case image isn’t displayed” title=”Some explanantion of the link, if you like/>

Again, we have an opening tag sequence <img> , but instead of using a closing tag suequence </img> , we are using a self closing tag seuqence- <img /> . This is because there is really nothing that goes inside the opening and closing tag sequences. In the anchor example, we had the link text. In an image tag, there is nothing. The only thing that you need is the src attribute, which goes inside the opening tag sequence. So, we can self close the tag by putting a / before the > in the opening tag sequence.

The image that you want to display must exists somewhere on a web server, that is, it can not be sourced from your local computer!! The source attribute, src=””, will contain the URL that will point to the image on that web server.

The alternate attribute is not mandatory, but it is really nice thing to have and you really should use it. It is the text that will shown in case there is a problem displaying the image. And the title is the same as in the anchor case.

So if we put the two tags together, it would look like so:

 <a href=”http://ursula-smith.com/how-to-make-an-html-link-in-a-web-page/” ><img src=”http://ursula-smith.com/mixed-media/wp-content/uploads/2014/05/Gelli-Arts-Printed-Hand-Stickers-300×440.jpg“alt=”Alternate text in case image isn’t displayed title=”This is a test for the image link“/> </a>

And here is the example link:

Alternate text in case image isn't displayed

Gelli Arts Printed Hand Sticker

 

Hopefully, this is helpful to those of you just starting out with HTML!!

 

Adding a quick note on showing the HTML code so the user sees the actual HTML rather than the link. For instance, if you are trying to show a “grab a button” and the button keeps showing up rather than the code. You need to trick the browser into not interpreting the HTML So you would need to write your  button code that looks something like

<a href=”http://ursula-smith.com/how-to-make-an-html-link-in-a-web-page/” ><img src=”http://ursula-smith.com/mixed-media/wp-content/uploads/2014/05/Gelli-Arts-Printed-Hand-Stickers-300×440.jpgalt=”Alternate text in case image isn’t displayed title=”This is a test for the image link“/> </a>

in a slightly different manner.  Rather than using all the angle bracket symbols, you need to change them to &lt; for the left angle bracket signs and &gt; for the right angle bracket signs. By doing this, the actual HTML code is shown to the user rather than the HTML being interpreted in which case the link would be shown to the user- they would not see the HTML button code. So your “Grab My Button” code would look something like:

&lt;a href=”http://ursula-smith.com/how-to-make-an-html-link-in-a-web-page &gt; &lt;img src=”http://ursula-smith.com/mixed-media/wp-content/uploads/2012/01/6635788089_e4ba47e872_m.jpgalt=”Alternate text in case image isn’t displayed title=”This is a test for the image link&gt; &lt;/a&gt;

You are basically tricking the browser into not interpreting the link and image HTML code, but instead the browser will show the HTML as text. The viewer will see the HTML as they would need to type it into their web page code (or blog widget) so that the link will show correctly on their page.

Hope this helps!!

Back up your files!!!

July 13, 2011 in Digital Related Posts, Technical Tips by Ursula Smith

Hi there- just a quick note, but one I hope everyone will heed!! Don’t forget to backup your files!!! Especially all those wonderful photos you have of yourself, your home, your friends and your family.

You can get external drives pretty cheap now, and the program I use to backup my files from my main computer to my external drive is called ViceVersa Pro. I try to run the program once a day, and I have it set up to check for files that have changed on my computer and update only those files on my external drive. I backup my photos and any other files that I couldn’t live without.

Recently I also added an online service called Carbonite, which you pay for annually. I backup just my photos to their server. The cool thing about this service is that it runs in the background. So when I change or add a picture to my photo folder, they automatically get uploaded to the server! You can choose to upload all subfolders and you can remove files and folders from the carbonite backup process. The initial upload takes a long time (days for me) but now it is automatic.

With cloud servers becoming more prevelant, there may be free solutions for you out there- Google has a solution, DropBox can work with the iPad, iCloud is on the horizon, and there are others. I need lots of space, so the freebies don’t really work for me, except for sharing a few photos with family etc.

I have also backed up some of my photos to DVD’s (and keep meaning to park them somewhere else, but haven’t yet). I need to get caught up on these, so here is my reminder to myself and you- BACKUP YOUR PRECIOUS FILES!!!

Computer Technical Tip- USB Ports

March 16, 2011 in Digital Related Posts, Technical Tips by Ursula Smith

I hate to admit this, even though I have worked with technology for more years than I care to admit, I didn’t know this simple technique for getting USB devices back in line. Shutdown your machine and then UNPLUG it!!

I had been struggling for a while with my USB devices- losing my external hard drives so they couldn’t be found anymore, having my external display stop working, any number of annoyances. I would grumble, and sometims scream and curse in frustration, finally give up, and reboot, and… nothing. Finally, one day I happened to enter in the right combination of words into Google and viola!! I found my answer. After you shut the laptop down, unplug the darn thing. Apparently, while plugged in there is still juice going to the mother board (the hardware brains of the computer) and it keeps track of the USB devices that way (not very well, I might add). In any event, if you unplug the computer, the mother board will “forget” about the devices and you can start over.

Well, it worked like a charm for me! I hope it works for you too- BEFORE you go out and buy a desktop with more USB ports like I did &amp;#59;&amp;#41;

Facebook Like Button Issues

March 13, 2011 in Digital Related Posts, Technical Tips by Ursula Smith

Slow Down- A Cautionary Tale

So my one piece of advice to all of you about to head down the Facebook interaction path is “Slow Down Cowboy”! If you rush in and start trying things without understanding how all the pieces work, you will be cursing and screaming and smashing your computer within a few short minutes!!

Or maybe you already started and you are here because you can’t figure out how the puzzle gets put together. I admit, I am no FB guru, but I spent LOTS of hours getting my stuff to work after reading 47 gazillion different posts that each had a wee bit more of the information- but none all in one place!

So, while this all fresh in my mind, and in case I ever have the sorry job of trying to make this type of thing work again, I am documenting my steps for posterity.

This Facebook write up is not for the faint of heart. If you are trying to do something simple, then you may not run into any issues. However if you are trying to go beyond the (somewhat pathetic) examples provide by the Facebook documentation, then you may have a bit of trouble.  I am fairly technical and ran into trouble, so if I can pass along some helpful hints based on the issues I ran into, and save someone the aggravation I experienced, then this write up will be worth it &amp;#59;&amp;#41;

Facebook, behinds the scenes, is building a huge web of interconnecting People, Applications and Pages. Obviously there is not just one server (computer) storing this information, but many. It takes time for all the servers in the Facebook rendering space to catch up and have the same, most recent and accurate snapshot of the Web. Information is cached to make rendering happen faster, and if the cached information is incorrect, it can take a while before it is flushed and replaced with the correct information.

You should read all the way through the Facebook documentation and this document, before you take any steps. If you plunge ahead and start working before or while you are reading and you screw something up, well then- don’t say I didn’t warn you!!!

Get a Facebook Account

I started my process by trying to set up a Facebook Page, that was just a page- that is, a page not associated with a user account. A “Facebook Page” is an unfortunate moniker for a representation of a business or group or some other entity that might not be an actual person. I wanted to set up a page to represent Easy Scraps. More on that in the next step.

I already had an account and was used to Facebook “pages” that were part of my Facebook interaction. Typically, when I log into Facebook, I go to either my Profile page or Home page to see what’s going on in my Facebook world. However in this case I was led to believe that I could set up just a Page that would represent Easy Scraps without an account associated with it. It is possible to do so, however once you start trying to do anything with that page, you are going to be prompted to upgrade to a Facebook account.

In my case I upgraded my account, and this became the user that I used for creating Facebook applications for use with a “Like” button. More on that later.

So do yourself a favor. Sit a minute and think about what you want your user account to look like. What user name do you want to use? If you have multiple email addresses, which one do you want to use? It is a lot harder (or in some cases impossible) to change things once you have made your choices.

To create an account, just go to http://www.facebook.com and sign up. You will be required to have at least an email address and password. This will be your login information.

Looking ahead:

If you do not have an account before the next step, you will still need an email address and password in order to create a Facebook Business Page. That will be your login information for the Page. The Facebook Business page will be a limited type of Facebook account, unless you create a normal Facebook user account in this step.

Set up a Facebook Page- maybe

What are you trying to accomplish? If you want to have a page that represents your business or group or Band, etc. on Facebook, then a “Facebook Business Page” might be what you would like to have. I am going to call this an “Entity” or “Facebook Business Page” from here on, in order to differentiate it from what some of us may refer to as a Facebook page, i.e. generally the Profile or Home page of a personal account.   Your Entity will have a wall, information and links, and you can actually do some things that a normal user account can do, but not everything. For instance an Entity can “Like” other businesses and post things on other walls, but it cannot administer applications for example.

On your Entity page, set up information about the entity- the description, mission, category , products, awards, etc. At some point you can choose Administrators and for that you will need a user account like I described above. Or you may be requested to “upgrade” your page to an account, which is ultimately what happened during my configuration initiative. The documentation on setting up an Entity (“Business Page” or just” Page” in Facebook vernacular) is not too bad from what I remember and I was able to set it up fairly easily. The part I felt was lacking was the information about having to upgrade to a user account, in most cases, rather than just being a “Page”.

I would recommend creating an image for your entity, as well. This image will be shown next to any posts that might be made while you are logged in as your entity.

As the entity, you can post things to your own wall so that anyone who likes your page and visits it can see what is happening related to your business (or group or band etc.). You can also post to others’ walls or “Like” other entities. There are some things that you can’t do while logged in as an Entity (it escapes me just now what those are- sorry!). If you have created the Entity using a normal Facebook account, that account will be an Administrator and you will be able to switch back and forth between the two. So you can post as your entity, or switch back to your full user if you need to.

Search for “Facebook Business Page” to find the URL to get started. I found it here:

http://www.facebook.com/pages/create.php

You will need to have decided on a name for your Entity, and you will sign up with an already existing Facebook account, or you will be required to sign up with an email address and password in order to create the limited account I spoke of earlier.

When you set up the Facebook application/user account write down the ID. It is usually included in all the URLs you click when logged into Facebook. For instance if you click on the Profiles link etc. the account ID will usually be in the URL. I say usually, because once you set up a user name, that is used in the URL rather than the ID. So while you are just starting out and still can find the ID easily, write it down for safe keeping.

Add a “Like Box” to another Web Page

A Facebook “Like Box” can be generated and placed on another web page and this will point to your Entity page.

The documentation is not great on differentiating a “Like Box” and a “Like” button. Basically, a “Like Box” will point to a Facebook Business page, and pull in posts from the wall and show a selection of users who have “Liked” your Entity.

From the Setup (or Get Started) dialog on your Facebook Page, there will be a button that says “Like Box”. If you click it you will be brought to a page that contains a code generator.  The code generator will ask for your URL. This is the URL that you will use to view and Edit your Entity. I would recommend bookmarking this page right after you create the Business Page, but you can always search for your Entity Name in the Facebook search toolbar while you are logged in to Facebook in order to find it.

This code generator does a pretty good job. You can as far as I remember, cut and paste it into another web page and it works well. I was using it with other Facebook calls, which is a VERY long saga written about in the next sections.

 

Off to the Races- Maybe

If that is all you wanted to accomplish- set up a Facebook Page to represent your entity and perhaps add a “Like Box” box to a web page on another site, then you are finished!

I placed my “Like Box” on a page in my web site that discussed how Easy Scraps was represented on Facebook.

Sigh, if only I had stopped there!

“Like” Button Woes

Alas, I decided that it would be cool to add a Facebook “Like” button (not a box as described earlier). This scenario enables you to add a Button to a regular web site page i.e. not a Facebook page. Visitors to your site who are already logged in to Facebook can click the button and a story will be posted on their Facebook profile page with a link back to your site. There is functionality to allow a Facebook Login button to be added as well. I wanted to add that figuring that it would be nice for users to be able to login right there.

I read the documentation and it seemed easy enough. However, the example was not the best one they could have used and they did not really discuss such real world issues like allowing different parts of your site to be “Liked” or dynamic content or individual items on the same page to be “Liked”, for instance in the case of a Blog.

I dove right in and just started cutting and pasting their examples trying to make it work with my pages. That was the first rookie mistake!! The biggest hassle is that if things start getting used, Facebook tracks it and doesn’t always let go of the information properly. So once you or other visitors start “liking” your site or pages, you could be stuck.

So again, my advice to you- Slow Down!! Take things one step at a time!!

Site or Pages or Posts?

First decide how many items are you going to want the “Like” button to apply to? If there is just a single place that you want the button to be, and it is going to be set up to “Like” you entire site, than things aren’t that bad and you can probably muddle through by following the Facebook documentation.

In my case I originally wanted to have the “Like” button apply to the site in general. But then I changed my mind and decided to have a the button apply to several different areas of the site- in my case Albums, Rubber Stamps and Other Products. And I also decided to enable the “Like” button on individual posts in my Blog. From what I had read, all of that was possible, but nothing actually told me how. And to complicate matters, I had already starting using the Like Button to target my site and several friends had clicked it, so now Facebook had a hold of it. So, it became a bit tougher to get where I wanted to go, but I did manage to figure it out. So here is how I did it…

Read the documentation

I am not going to let you get away without reading the official documentation. In fact, maybe you will read it, understand everything and be good to go. If not, then hopefully the information documented here can help a bit.

You can start here: http://developers.facebook.com/docs/reference/plugins/like/

Understanding Open Graph Protocol is really important. Basically these tags, when included in the HEAD section of a Web page on your site, make your page equivalent to a Facebook Page. Read about it here:

http://developers.facebook.com/docs/opengraph/

Again, the example is pretty lame, so I will show you how I finally set up my tags later in the program &amp;#59;&amp;#41;

IFrame or XFBML

You are going to have to read the documentation on this. I am not enough of a Facebook guru to describe why you would use on over the other. The documentation does have some good coverage on this topic.

For my purposes, I wanted to utilize the markup language, so my writing will be skewed towards that. The XFBML is a suite of tags that you can include in your web page to describe certain Facebook functionality. There are tags for logging in and for “Social Plugins” such as the “Like” button. These tags are parsed and filled in with additional information by the Facebook JavaScript library (JSDK).

The official documentation regarding the JSDK is here:

http://developers.facebook.com/docs/reference/javascript/

The documentation on how to set this up and use the XFBML and JSDK may have worked at some point, but it was not exactly accurate when I tried it, so I will show what I ended up using in the final iteration of my code. More on this later…

Set up a Facebook Application

After reading the documentation, you will understand that you need to set up an application. At least, as in my case, if you are using the JavaScript library and the XFBML tags. While it is possible to change things related to your application eventually, my experience was that initially I was not able to do so (and by I, I really mean a lot of others as well!). After the application is created, there is a link to be able to edit it, but the link gives you an error. It took a couple of days before I was able to go back and edit the applications!! So again, think about what you would like to do ahead of time to avoid mistakes because Facebook can hold onto those mistakes and won’t let go until it is good and ready.

In my case, I wanted to have buttons to different parts of my Web site, and a button on individual posts to my blog. So I ultimately set up 2 applications- one for my Blog and one for the site. I probably could have gotten away with a single one, but I also had visions of allowing the Blog to be included in a Facebook page, and so that was another reason I set up the second application.

Note: read about building a Facebook application that actually DOES something here:

http://developers.facebook.com/docs/guides/canvas/

In the case of setting up a Facebook “Like” button by using the JSDK and the XFBML tags, the application isn’t really going to do anything, as far as I can tell, other than be a placeholder or pointer for pages on your site that you want to add Facebook functionality to. In the example here, that is a simple “Like” button.

First things first- walk thru the documentation here:

http://developers.facebook.com/

This site is a launching point for documentation as well as starting and editing an application.

You can go here to set up a Facebook application:

http://developers.facebook.com/setup/

So here are the helpful tips for setting up an application.

  • If you are going to set up an application for your site and/or for different web pages directly off your site, give it a name that is relevant to what the application will do. For instance, “Like yoursiteName
  • You will be asked to login or sign up with Facebook at some point- use the account you created previously
  • When prompted for a URL, for most cases you will probably want to enter:

http://www.yoursiteName.com/

Once the application is set up, you can edit it if need be, just as long as Facebook decides to be ready to let you. I found that initially, I wasn’t able to. I kept getting an error. Many other people reported the same thing. Eventually (I think it was about 24-48 hours later), I was able to get to the applications that I created in order to edit them.

When you first start out, after you have created your applications, you need to authorize the Facebook Developer Application.  If you go to the Facebook Developers Page ( http://developers.facebook.com/ ) , there should be a link at the top that says “My Apps”. Click that. The first time you visit it, the site will prompt you to authorize the Facebook Developers Application. Click OK. Once authorized, you can always go to “My Apps”, (you must be logged into Facebook) here to view/edit your applications:

http://www.facebook.com/developers/apps.php

As an alternative, you can go to the Home page of your user account- the account you used to create the applications. Go to the “Apps” link on the left hand side and you will see the Developers Application.  Click on that and it will list the applications you have created. You can click on them in order to bring up the editing functionality.

When you view your Application you will be able to see the Application ID, and this is what you will need in order to load and initialize the JavaScript library and parse the XFBML tags that you wish to utilize in your web page.

You can click “Edit Settings” on the right hand side to view/edit information about your application. Under ”About” , some things you will need to fill in if they aren’t filled in already are:

  • Application Name- You might want to use something like “Like yoursiteName”
  • Description- “This application will allow users to like yoursiteName
  • Logo
  • Support email-
  • Contact email

Under “Web site”,  it will list:

  • Application ID (you can’t edit this)
  • Site Domain (I left this blank, although I did address the domain in my code. See this resolution later in this document)
  • Site URL- this is one of the CRITICAL pieces of information you need to enter correctly. It must end in a “/” . If you are going to add a Like Button to point to your site, or a Page off of your site, then you need to set this to the top level URL of your site. For instance I used:

http://www.yoursiteName.com/

This was the correct setting for “Like” buttons that will point to either

1.       Your web site. For this case you want  a Facebook user to be able to click “Like” and a link to your web site, http://www.yoursiteName.com/, will show up on their Facebook page

2.       A specific page in your web site, i.e.  http://www.yoursiteName.com/somePage.html . For this case you want  a Facebook user to be able to click “Like” and a link to a page within your web site, http://www.yoursiteName.com/SomePage.html , will show up on their Facebook page

3.       I believe this will also work for a blog article or other such item on a particular page, however I used a different set up for this configuration, ultimately.

 

Under “Facebook Integration”,  it will list things like:

  • Canvas Page
  • Canvas URL
  • And assorted other inputs. These are settings if you are building an application that is actually going to do something. In this particular case, where the application is just holding an Application ID for use with the “Like” button, we don’t need to fill in anything here.

For my Blog I decided that I wanted the Like button to apply to individual items on the Blog. I set up a separate application with the site URL set to:

http://www.yoursiteName.com/blog/

The other settings were similar to the set up for the “Like” button for the site.

As an aside, I also wanted to allow my Blog to be included in a window on my Facebook account page, so created another application and set this application a little bit differently.

  • site URL- I pointed to the area of my blog that was the container for all the blog entries. In my case, I used

http://www.yoursiteName.com/blog/

  • Canvas Page- This is a name you will give to your application so that Facebook can reference it from http://apps.facebook.com/ . I named mine yoursiteNameBlog .
  • Canvas URL- This is the top level URL that will be used to find your application on your web site to be called for integration into Facebook (via the Canvas Page you just named above). I set mine to the top level directory of my blog http://www.yoursiteName.com/blog/
  • I chose IFrame and using Scroll Bars as the other choices did not appear to work very well when I tried those.
  • Tab URL- I pointed to the Web Page that was my actual Blog page, and that is stored in the directory referenced by the Canvas URL . In my case this was:
  • myBlogPage.php .

 

This is just the first step in setting things up properly for the “Like” button. The next critical piece is setting up the Open Graph Protocol tags that will be placed in your web pages, and that will allow Facebook to draw the connection between the applications you just created, the “Like” button you want to add to your Web page, and a browser link to your Web site or particular Web Page.

Open Graph Protocol

This is critical to making the “Like” button work.  These tags are understood by Facebook and are placed in your web page(s). Facebook will read these tags to help make the connection between Facebook “things” like Applications and Administrators and users etc., and Web site “things” like URLS that point to your site or pages within your site, or individual items on a web page. In your site

If everything is set up properly, the Like button will set up a link to your site (or page within your site or item on a page within your site. There are several mandatory tags you must set up within the HEAD section of your Web page.

Meta Tags

If you are trying to set up a like button that points to your site in general, you would edit each page (more than likely starting with the index.html page) that you will include the “Like” button and set up the tags like so:

<meta property=”og:title” content=”Your Title“/>

<meta property=”og:type” content=”website”/>

<meta property=”og:url” content=”http://www.yoursiteName.com/”/>

<meta property=”og:site_name” content=”A descriptive name for your site“/>

<meta property=”fb:admins” content=”comma separated list of Administrator Ids- see Note on this below“/>

<meta property=”fb:app_id” content=”application Id“/>

<meta property=”og:email” content=”email of your administrator“/>

<meta property=”og:image” content=”URL of an image”/>

 

<meta property=”og:description” content=”Description of your site” />

og:url must be set up to match the URL that the Like button will point to. This must also be a page that is relative to the site URL that you set up in your Facebook Application earlier. If you want the “Like” button to point to your site in general, you would set the value of this to be:

http://www.yoursiteName.com/

If you want the “Like” button to point to a page within your web site, then you would set og:url to be

http://www.yoursiteName.com/somePage.html

fb:admins must be set to the numerical values of the Adminstrator account. If you have more than one account, you can separate the IDs with a comma. When you set up the Administrator Facebook account, you sign up and sign in usually thereafter using your email address. This is not what you use here. Also, if you have gone into account settings for the Administrator, and set up a user name, do not use this here either. The Id should be the numerical value of your Facebook account Id.

If you have not set up a user name, you will usually see the ID in the URL when you access the profile page of the Administrator.

If you did set up a user name, that user name will now be used in the URL. The easiest way to find the ID, is to go to the Profile page of the Administrator account, and then choose the Wall link on the left hand side. Go to the Photos tab and click on a picture. You should see your ID in the URL for that picture. If you see multiple id, it is the one that is after “uid=”. It is not the once that is after “fbid=”.

If the Admins setting is wrong you will see an error message that is something like this:

“You failed to provide a valid list of administators. You need to supply the administors using either a fb:app_id meta tag, or using a fb:admins meta tag to specify a comma-delimited list of Facebook users. “

fb:app_id is the ID of the application you set up to be used with the “Like” button. According to the documentation you could use either the app_id or the admins or both. Some people complained that using both didn’t work, but it worked fine for me once I got all the other pieces set up properly.

I used both so that the correct application would be found.

og:type If you are utilizing the “Like” button to like your site or a page in your site, the type should be set to “website”. If you are trying to “Like” multiple, individual items on a page, then the documentation says to set the type to “article”.

Interestingly enough, for adding a “Like” button to multiple, individual items on a page (posts on a blog), I had success by setting my meta tags like so:

<meta property=”og:title: content=”Easy Scraps Blog”/>

<meta property=”og:type” content=”easyscraps:blogposts”/>

<meta property=”og:site_name” content=”Easy Scraps Blog”/>

<meta property=”fb:admins” content=”100002174881392″/>

<meta property=”fb:app_id” content=”158769440844385″/>

<meta property=”og:email” content=”facebook@easyscraps.com”/>

<meta property=”og:image” content=”http://www.easyscraps.com/blog/logo-2.jpg”/>

 

Notice that there is no URL meta tag, but I believe the Facebook parsing mechanism falls back to the information as specified in the Site URL  of the Facebook Application. In this particular case, the Site URL was set to http://www.yoursiteName.com/blog/. I believe this is used to determine the normalized form of the default URL. In the case of out blog it is http://www.yoursiteName.com/blog/defaultBlogPage.php

og:type in the case of multiple, individual items on a page, could be set to “article”. However, if you do this, apparently there is no Administration page for this “Like” instance generated for you (if you are logged in as the Administrator), whereas with the type of “website” the Administration page is generated and the link displayed. I decided I want to have a page for each article, so I created my own tag set to a namespace I defined as easyscraps (see the section on Namespaces, but the declaration looks like this: xmlns:easyscraps=http://www.easyscraps.com/ns#).

So my type meta tag looks like so:

<meta property=”og:type” content=”easyscraps:blogposts”/>

NameSpaces

The tags listed above utilize JavaScript name spaces.  In general, you need to tell the browser what “og” and “fb” mean. FireFox seems to be able to figure things out with less of an issue, but IE will stop dead in the water unless you set the namespace up properly. To do this you must add the following line (or modify the existing line if it is already there) before your HEAD section. This is usually the first line or so:

<html xmlns=”http://www.w3.org/1999/xhtml xmlns:og=”http://ogp.me/ns#” xmlns:fb=”http://www.facebook.com/2008/fbml” xmlns:easyscraps=”http://www.easyscraps.com/ns#” xml:lang=”en”>

<head>

The sections in red are the ones that need to get added if you already had that line included in your web page. Note that I set up one up for Easy Scraps. More on this later.

Finally- Adding the Like Button Code

Finally, we have all the pieces in place to add the code that will render a Facebook “Like” button in our web page. Again, I went with the XFBML rendering rather than the IFrame method. And again, the documentation was less than perfect, however I finally got the JavaScript Code with my web pages to work like so:

  • Added the namespace declarations as described in the previous section
  • Added the Open Graph meta tags into the HEAD section as described in the previous section
  • Added the XFBML tags to include the “Like” button and a Facebook Login Button into the HTML of my web page where I wanted the button to display. This is described below.
  • Added the JavaScript code that loads the SDK. This is a library of JavaScript functions that was written by Facebook to parse the XFBML tags and create the “Like” button and make it place a link on a user’s Facebook page when clicked.
  • Added the JavaScript code to display the user’s name that is Logged in to Facebook.

Like Button XFBML

This is the markup I added into my web page to display the “Like” button (as well as the Login button, and there is also a place holder to enable the user name to be shown if the user is logged in.

<div class=”facebookBlock”>

<fb:login-button autologoutlink=”true”></fb:login-button>

<span class=”facebookNameBlock” ></span>

<fb:like href=”http://www.yoursiteName.com/” show_faces=”false” width=”520″ colorscheme=”light”></fb:like>

</div>

 

Notice the line href=”http://www.yoursiteName.com/” . This sets up the “Like” button to “Like” your site in general. It should match the Open Graph meta tag like so:

<meta property=”og:url” content=”http://www.yoursiteName.com/ “/>

 

If you are adding a “Like” button to “Like” a particular page in your site, the documentation is pretty thin on this. The only way I was able to get it to work was as follows:

<div class=”facebookBlock”>

<fb:login-button autologoutlink=”true”></fb:login-button>

<span class=”facebookNameBlock” ></span>

<fb:like href=”http://www.yoursiteName.com/somePage.html” show_faces=”false” width=”520″ colorscheme=”light”></fb:like>

</div>

 

Notice the line href=”http://www.yoursiteName.com/somePage.html . This sets up the “Like” button to “Like” you’re a particular page within your site called somePage.html. It should match the Open Graph meta tag like so:

<meta property=”og:url” content=”http://www.yoursiteName.com/somePage.html/>

 

If you are adding a “Like” button to “Like” multiple items on a particular page in your site, for instance a blog post, the documentation is pretty thin on this. The only way I was able to get it to work was as follows:

<fb:like href=”http://www.yoursiteName.com/ yourBlog/someBlogPost.phpshow_faces=”false” width=”520″ colorscheme=”light”></fb:like>

For a dynamic blog like B2Evolution the “Like” button markup would be placed like so:

<fb:like href=”<?php $Item->permanent_url();?>” ref=”<?php $Item->anchor_id();?>” show_faces=”false” width=”520″ colorscheme=”light”></fb:like>

 

in the _item_block_inc.php file that is part of the skin.

Notice the line href=”http://www.yoursiteName.com/ yourBlog/someBlogPost.php l . This sets up the “Like” button to “Like” an individual blog post. In this case, it did not match the og:url meta tag, which I actually didn’t set at all. Facebook determined a normalized URL, I believe from the post URL and the Site URL set up in the Facebook application settings.

In this case the normalized URL was determined to be http://www.yoursiteName.com/ yourBlog/yourDefaultBlogPage.php

Load and Initializing the Facebook JavaScript

The documentation on loading and initializing the is ok, but again there seemed to be issues. The way that I got mine to work was as follows:

 

<div id=”fb-root”></div>

<script>

window.fbAsyncInit = function() {

FB.init({appId: ‘yourApplicationID’, channelUrl  : ‘http://www.yourSiteName.com/Channel.html’, status:true, cookie: true, xfbml: true });

 

/* All the events registered */

FB.Event.subscribe(‘auth.login’, function(response) {

// do something with response

//some_custom_login_function ();

//alert(“response.status in auth.login is ” +   response.status);

});

 

FB.Event.subscribe(‘auth.logout’, function(response) {

// do something with response

// some_custom_logout_function ();

//alert(“response.status in auth.logout is ” +   response.status);

});

 

//FB.Canvas.setSize({ width: 320, height: 50 });

 

FB.getLoginStatus(function(response) {

//alert(“response.status is ” +   response.status);

 

var oFbBlock = document.getElementById(“facebookBlock”);

 

if (response.session) {

// logged in and connected user, someone you know

// some_custom_login_function ();

 

//Look up the Facebook user name and display it on the page

//alert(“response.session is ” + response.session);

if (oFbBlock) oFbBlock.style.display=”block”;

 

var query = FB.Data.query(‘select name, uid from user where uid=me()’);

query.wait(function(rows) {

document.getElementById(‘nameBlock’).innerHTML =

‘Welcome ‘ + rows[0].name;

});

 

//FB.Connect.get_loggedInUser(); //This is an old call from Facebook code that is being phased out

 

} else {

 

// no user session available, someone you dont know

 

//alert(“no response.session”);

if (oFbBlock) oFbBlock.style.display=”block”;

 

//No user name. Hide the block that shows the user name typically.

var oFbNameSpan = document.getElementById(“nameBlock”);

if (oFbNameSpan) oFbNameSpan.style.display=”none”;

 

}

 

 

}, true);

 

 

};

(function() {

var e = document.createElement(‘script’);

e.type = ‘text/javascript';

e.src = document.location.protocol + ‘//connect.facebook.net/en_US/all.js';

e.async = true;

document.getElementById(‘fb-root’).appendChild(e);

}());

 

 

</script>

 

Linter

In order to test your pages, my recommendation would be to set up a different page that you can test with. For instance, if the web page on which you are going to add the “Like” button is called “somePage.html”, copy and rename the page to somePage_Test.html and test with that. That way, in case you misspell or set things up incorrectly at first, Facebook may cache the errors, but if the page is not a real page, then there will be less.

 

If you sent information up incorrectly, then Facebook may cache the information with the wrong settings. This was the case when I had some things set incorrectly.

 

There is a web application called Linter (find it here:  http://developers.facebook.com/tools/lint)  that can help determine if your site is correctly set up for the “Like” button. If you enter http://www.yourSiteName.come or http://www.yourSiteName.come/yourBlogLink/

Facebook will attempt to parse the web page you enter to check whether the “Like” button and Open Graph tags have been set up correctly. If not, you will see errors, or perhaps the links that are generated will be bad.

 

Linter should also clear the cache so that you can start over with new values filled in to see why the Facebook “Like Buttons” are generated incorrectly. However, the cache is not always cleared and you might have to wait 48 hours for the cache to clear!!

Pages you Admin

 

http://www.facebook.com/pages/manage/

Sometimes you won’t see the pages you are supposed to be Administering unless you “Like” the page in question using the “Like” button.

Cache it in!

 

It seems that Facebook really likes your information. So much so that they hold onto it for a while. Even if you tell it to stop. Some ways of avoiding caching issues are:

  • Don’t try anything until AFTER you have read all the documentation!
  • Use test pages and test URLs initially rather than the actual page names for pages of your site.
  • Check spelling of your site/pages!!!
  • Use Linter to test initially, rather than the “Like” button
  • Wait 2-3 days and then try it again
  • I noticed that on my blog posts, if I changed the names of the pages when they were cached incorrectly, I could go back and try it again with the new post names.

Good Luck!

So there you have it. Hopefully, all my mistakes written down for you, so you may avoid the same pitfalls and hopefully get your “Like” button added to your site a lot more quickly and easily than I was able too!!!

 

 

Additional Issues

If you created a ”Facebook Business page”, which created a limited Facebook account, and then upgraded to a normal user account, you may be prompted while on the Business profile Page, to use Facebook as the limited account or the full user account. This is great if you would like to allow the Business to “Like” things.“

However, I sometimes saw a glitch whereby if you are using Facebook as your “Facebook Business Page” you may not even see the “Like button” or the Hello message as I have built into the Easy Scraps web pages. I have not been able to track down why.

If you are trying to display the “Login” button, and it doesn’t change properly from “Login”  to “Logout” when you log in to Facebook, then it is probably because you haven’t allowed access for your application. A User needs to allow the application (the one you set up way back in one of the first steps &amp;#58;&amp;#41; ) to have access to their information before the Login button will work.

I saw errors occasionally in the Facebook button handling until I, as the application’s Administrator, logged in and went to the application’s Admin page and clicked “Like”.

Page 1 of 212