Love your Design!
Archive for the ‘Using Facebook for business’ Category
Enhance your Facebook Fan Page – Add Full CSS Landing Page.
Thursday, June 24th, 2010
Update! There are some more features you CAN use for your Facebook FMBL Tabs. To the extent that you can have galleries, and a full micro-site. For an example visit www.facebook.com/wearyourbaby!
I will be writing about this soon and sharing the code needed!
Happy FB’ing!
~ Beth the IMVA
Hi guys! Work on my blog is underway, so I’m going to keep this post short and sweet. It’s not an elaborate tutorial on how to do this. Then again maybe just how you should tackle it.
Assuming you are aware of the way you design layouts in CSS, a week ago I knew the theory but lacked practice, this week I used my site’s revamp to get the most out of understanding CSS. So what I’m sharing is how I made the landing page for this Facebook Fan Page:
EDITED LINK: Aruba-stage.nl Stagebemiddeling
Styling the Landing Page
For the Basic CSS Code you input in the FMBL Box you will insert the CSS Styling into the FMBL field. This means you will use this code ”<style> styling here </style>”, in the field it should look something like this:
<style>
insert all your layouting elements and styling here (some examples and free ready to use code follow!)
</style>
In the example page I used the following styling for the navigation at the top:
#menu {
height:135px;
}
ul
{
list-style-type:none;
margin:0;
padding:0;
overflow:hidden;
align: center;
}
li
{
float:left;
}
a:link,a:visited
{
display:block;
width:127px;
font-weight:bold;
color:#FFFFFF;
background-color:#98bf21;
text-align:center;
text-decoration:none;
text-transform:uppercase;
padding:4px;
}
a:hover,a:active
{
background-color:#7A991A;
}
The styling for #menu is to create a neat container for the menu elements. The color of this example is green. You can easily change this by changing the background-color of the a:visited, a:link. Don’t forget to then also change the a:hover color. You can also change it to an image.
Copy and paste the style code above and paste it like this: <style>”paste here” </style>.
The Page Body (without <body> tags)
Now you can go ahead and set up the page the ”body”. Before we do that there are a few points to pay attention to.
- <body>, <html> and <head> tags don’t seem to work in the FMBL box. So you will not be creating the page the same way as you would in a webpage editor. You will use <div> tags. Style as needed.
- For a neat site create a #container style, Facebook has room at this time for 740 px wide, but will be changing this soon to 540px maximum width, also the navigation code is designed to fit in 540 px wide.
The code used is:
#container {
padding:0;
margin:0;
width: 540px;
height: 400px;
background: url(link to file here) no-repeat;
}
After doing all of this your page code should look like this:
<div id=”container”>
<div id=”menu”>
<ul>
<li><a href=”link 1″>Home</a></li>
<li><a href=”link 2″>about</a></li></ul></div>
//rest of page layout here//
</div>
After this you can create any layout you want, an idea is a 2 colum page with text in the left side and menu’s on the right.
Next time, when I’m on my own laptop I will add a post about how to add a Facebook LIKE link to the Landing Page and a Share button. It’s real easy!
Hope you enjoy working on your design and making optimal use of your Facebook Fan Page, I sure know I’m loving it!
If you do happen to use this tutorial to make anything, I’d really love to look at it and even give you free pointers if you want! Feel free to email me or message me via FB. I’m ready to help and get to know you!
Love your Design!
Beth The IMVA is a young energetic Virtual Assistant running www.creativedesigndevelopment.com. She works with small starting business owners to take charge of their marketing needs. Beth works closely with her customers to optimize the quality of their website, to-print material, and internet marketing campaigns. You can follow her on Twitter @beththeimva or become a fan of her Facebook Page here
Enhance your Facebook Fan Page – Add Full CSS Landing Page.
Thursday, June 24th, 2010
Update! There are some more features you CAN use for your Facebook FMBL Tabs. To the extent that you can have galleries, and a full micro-site. For an example visit www.facebook.com/wearyourbaby!
I will be writing about this soon and sharing the code needed!
Happy FB’ing!
~ Beth the IMVA
Hi guys! Work on my blog is underway, so I’m going to keep this post short and sweet. It’s not an elaborate tutorial on how to do this. Then again maybe just how you should tackle it.
Assuming you are aware of the way you design layouts in CSS, a week ago I knew the theory but lacked practice, this week I used my site’s revamp to get the most out of understanding CSS. So what I’m sharing is how I made the landing page for this Facebook Fan Page:
EDITED LINK: Aruba-stage.nl Stagebemiddeling
Styling the Landing Page
For the Basic CSS Code you input in the FMBL Box you will insert the CSS Styling into the FMBL field. This means you will use this code ”<style> styling here </style>”, in the field it should look something like this:
<style>
insert all your layouting elements and styling here (some examples and free ready to use code follow!)
</style>
In the example page I used the following styling for the navigation at the top:
#menu {
height:135px;
}
ul
{
list-style-type:none;
margin:0;
padding:0;
overflow:hidden;
align: center;
}
li
{
float:left;
}
a:link,a:visited
{
display:block;
width:127px;
font-weight:bold;
color:#FFFFFF;
background-color:#98bf21;
text-align:center;
text-decoration:none;
text-transform:uppercase;
padding:4px;
}
a:hover,a:active
{
background-color:#7A991A;
}
The styling for #menu is to create a neat container for the menu elements. The color of this example is green. You can easily change this by changing the background-color of the a:visited, a:link. Don’t forget to then also change the a:hover color. You can also change it to an image.
Copy and paste the style code above and paste it like this: <style>”paste here” </style>.
The Page Body (without <body> tags)
Now you can go ahead and set up the page the ”body”. Before we do that there are a few points to pay attention to.
- <body>, <html> and <head> tags don’t seem to work in the FMBL box. So you will not be creating the page the same way as you would in a webpage editor. You will use <div> tags. Style as needed.
- For a neat site create a #container style, Facebook has room at this time for 740 px wide, but will be changing this soon to 540px maximum width, also the navigation code is designed to fit in 540 px wide.
The code used is:#container {
padding:0;
margin:0;
width: 540px;
height: 400px;
background: url(link to file here) no-repeat;
}
After doing all of this your page code should look like this:
<div id=”container”>
<div id=”menu”><ul>
<li><a href=”link 1″>Home</a></li>
<li><a href=”link 2″>about</a></li></ul></div>
//rest of page layout here//
</div>
After this you can create any layout you want, an idea is a 2 colum page with text in the left side and menu’s on the right.
Next time, when I’m on my own laptop I will add a post about how to add a Facebook LIKE link to the Landing Page and a Share button. It’s real easy!
Hope you enjoy working on your design and making optimal use of your Facebook Fan Page, I sure know I’m loving it!
If you do happen to use this tutorial to make anything, I’d really love to look at it and even give you free pointers if you want! Feel free to email me or message me via FB. I’m ready to help and get to know you!
Love your Design!
Beth The IMVA is a young energetic Virtual Assistant running www.creativedesigndevelopment.com. She works with small starting business owners to take charge of their marketing needs. Beth works closely with her customers to optimize the quality of their website, to-print material, and internet marketing campaigns. You can follow her on Twitter @beththeimva or become a fan of her Facebook Page here
Contact Info
- CDD Aruba
- Santa Cruz, Aruba
- Call: (297) 585 9839
- Email Beth
- Request a Quote
Building Trust through Website Blogs and Social Media Channels
Saturday, July 3rd, 2010
We are now much closer to the customer’s, users and leads than we have ever been before. Your Facebook Wall, Blog Post and Twitter can even be considered equivalent to your virtual message board in the kitchen. How you respond to these messages will characterize you to visitors and possible leads.
Many companies still approach digital interactions in much the same way as they do PR. A recent article by Techcrunch surrounding an iPhone 4 antenna issue and how the direct complain was handled by the company’s PR brings to light an important factor to consider when you aim to engage the readers, customers and clients via your website’s blog or social media.
The article ends with a grand statement: “It’s not unusual for PR teams — … — to ignore or give vague or even misleading statements to the press.”
The same applies to interactions with website visitors and through social media channels: loose the PR mentality and get real, authentic and uncut.
DONT:
Is your company in the habit of viewing complaints as just the product of annoying customers and not a marker for a much needed change?
It’s extremely easy to scratch criticism off as pure venting and just plain poison, especially if you are not really looking at your company with a sharp eye.
So always ask yourself:
At the end of the day it’s important to admit to failings, when they are present.
To really connect with visitors, your organization must:
Otherwise you will have wasted an opportunity to set the record straight and build trust.
What if there is really nothing you can do?
The last thing you want to do online is feed a visitor who has an obvious vendetta against your company. Who isn’t trying to come to any kind of resolution, but who does it simply to be poisonous.
Do not be quick to judge that all criticism is poison, but follow these steps:
The way we are able to communicate now with website visitors and our social media network can also be a great opportunity to find ways to grow as a company to offer better services, be more aware of our activities and build trust relationships that last.
Finally user comments, reviews and visitor interactions eventually count as content on your website and you want it to reflect the best of you and give new visitors a reason to create a new relationship with your organization.
Tags: aruba business owners, build exposure for you website aruba, connect with website visitors using genuine content, connecting with the customer was never easier, educated consumer, genuine comments to build linkbacks, make use of your time and resources wisely, manage your web content, web prescence
Posted in Build trust through your website, Using Facebook for business
View Comments