Archive for the 'Social Media Optimization' Category

Easily Create ‘Sticky’ Buttons in EverWeb

Thursday, July 16th, 2015

Many websites today have social media buttons pinned to the side of the page so that they are always clickable as you scroll up and down the screen.

This is a great feature for your website and is easy to do with EverWeb 1.8. To achieve the effect need to use the new ‘Fixed Position’ feature in the Metrics Inspector. ‘Fixed Position’ lets you lock the position of an object on its x-axis. This means that as you scroll up and down your page (i.e. along the y-axis), the object remains fixed in place.

Just follow the simple steps below to easily have social media buttons on the vertical and always visible.

  1. First add  the social media buttons that you want to your page, e.g. Facebook, LinkedIn, Pinterest, Email, Google Plus etc. Using the ‘Insert > Button menu to add buttons to your page or use drag and drop your buttons from the Widget Inspector on to your page. When placing buttons line them up vertically close to the left or right hand edge of the page.
  2. When you add each button, make sure that you tick the box ‘Fixed Position’ on the Metrics Inspector. This will lock your button in place on the horizontal x-axis (see screenshot below.)

    screenshot_11

    To fix the social media button in place, first select it, then checkmark the box ‘Fixed Position’ in the Metrics Inspector, as shown in the example above.

  3. Remember to make sure that your Social Media buttons are properly aligned and distributed.
    Select all of the buttons that you have placed on the page. Next use the ’Arrange > Align Objects > Left’ menu so the buttons appear flush to the left, and use ‘Arrange > Distribute Objects > Vertically’ to evenly space the buttons.
  4. If you are adding buttons to a Master Page, you may need to use ‘Always on Top’. Objects on Master Pages lie underneath those on your normal web page. If you find your buttons are not visible use ‘Always on Top’ so that they appear above all other objects on your page.
  5. The last  step is to use Preview to see how your design looks and to test out your ‘Sticky’ buttons before publishing (see screenshots below.) Always remember to test your buttons. Once you have published your website, don’t forget to test each button to make sure that your links work properly!
screenshot_12

Use Preview to see how your ‘Sticky’ buttons work.

screenshot_13

As you scroll up and down your web page, the social media buttons remain in place as the page content slides under the buttons.

How To Verify Your Website With Pinterest Using Sitemap Automator

Wednesday, March 27th, 2013

Video Transcript:

In this tutorial, I am going to show you how you can verify your website with Pinterest, using Sitemap Automator.

One thing I want everyone to keep in mind is that sites such as Pinterest are constantly changing their user interfaces, so if you are watching this video and some things you see here are not matching up with what you see in your web browser, don’t worry, the same principles will apply even if things are in different locations.

So the first thing you will need to do is sign up for a Pinterest account. We’re going to skip over that part as that is something you will be able to do on your own.

Once logged in, click on your username in the top right corner, and select settings. Next, scroll down a bit to where it says Website. Make sure your website URL has been entered, and the spelling is correct. Then click on Verify Website.

Step one says to Download the verification file. Click on the download link to download the file. Make sure you only download this file one time. Some users tend to download it multiple times by accident. When doing this, you will end up with multiple files of the same name in the Downloads folder, and the file will get renamed causing this process to not work. So I will just repeat, do not download this verification file more than once.

Next, launch Sitemap Automator. Click on File and select Publish Verification File.

Click on the Select Verification File button to locate your verification file. Highlight the verification file and then click on the Open button. Quickly just double check to make sure that your verification file name matches up the file name on the Pinterest page.

Now we can proceed by clicking on the Publish to FTP button. Next, enter all your FTP login information. Just to make sure our login information is correct, let’s click on the Browse button. No error message appears and I am able to see some files and folders for my server, so I will proceed by closing this window and clicking on the Upload button.

Once the upload is complete, I will return to that Pinterest page and click on the Click here to complete the process button. My verification file has been accepted and I can see here that my site has been vitrified with Pinterest.

How To Add A Pinterest Pin It Button To An iWeb Site

Friday, November 9th, 2012

A short while ago, we posted a video about Pinterest and how it is yet another social media platform that businesses can and should be utilizing. The below tutorial will show you how you can add a Pinterest ‘Pin It’ button to your site made in iWeb. The more ‘re-pins’ your images have, the more likely they are to be seen by more people. More people seeing your image could result in more traffic to your website, and hopefully more sales.

VIDEO TRANSCRIPT:

In this video, I’m going to show you how to add a Pinterest Pint It button to your iWeb site. If you are not familiar with Pinterest, please see our video tutorial outlining what Pinterest is and how to use it.

To add a Pinterest ‘Pin It’ button to your website in iWeb, visit your website and locate the image that you want to have the Pin It button for. Locate the URL of the image. You can usually find this by doing a secondary click on the image and then selecting Copy Image Address.

Open up a new tab in your web browser and visit pinterest.com/about/goodies. Scroll down a bit until you see Pin It Buttons for Web Sites.

Paste the URL that you just copied into the second text box. Right above the text box it should read URL of the image to pin. Now just quickly go back to your site, and copy the URL of the page that contains that image. Then paste that URL in the first text box which reads URL of the page to pin. You can paste the page’s URL first, and then the image’s URL, it doesn’t matter, but they must go into their respective boxes. Before we do anything else, I want you to take a look at the drop down menu next to Pin Count. You have three options to choose from here, so select the option you like best.

Next, you can put in a description of what is being pinned if you’d like. You will notice that some code has appeared at the bottom after we pasted our second URL. Highlight the code in the first box, just like I am doing, and copy it.

Now open your site in iWeb to the page that contains the same image that you are pinning. Drag and HTML Snippet onto the page, and paste the code. You should notice a box appear, but that box should be empty. Expand this box a bit so that the Pin It button is a bit larger.

If you selected one of the options for showing the pin count, head back to the Pinterest page we were just on, and copy the code located in the second box. Now go back to iWeb, and in that very same HTML Snippet we pasted the Pin It button in, paste this code at the very end. If you missed what I just did, just rewind and watch this step again.

You can add as many Pin It buttons to your site as you want. Just repeat the exact same process we just did. You will not be able to see the Pin It button visible in iWeb, but once you publish the site, you will be able to see it when you visit your page online.

How To Pin An Image In Pinterest

Monday, November 5th, 2012

Pinterest is a site that showcases popular images posted by users. Images are linked back to the original site that they were posted from. This can be utilized as a marketing tool if you have nice images displaying your products that you have for sale on your site. This short video will show you how to ‘pin’ your images so that other Pinterest users can see them.

VIDEO TRANSCRIPT:

Pinterest is another great way to promote your businesses products, and hopefully catch the attention of users browsing the site. Think of Pinterest as a bulletin board where users pin images to. Users can then click on the image and be taken to the website where the image was pinned from.

Images with many repins will be the ones you see on the main bulletin board at pinterest.com

So how can you pin some images from your website? First, click on the Join Pinterest button. You can sign up with your Facebook account, twitter account, or using your email address. Any of the three options will do. I’m going to fast forward through the sign up process as that is pretty basic, and just skip ahead to the part about pinning.

So once you have signed up and are logged in, go to pinterest.com/about/goodies

You should land on a page that looks similar to this. Locate the Pin It button, and drag and drop this button onto your bookmarks bar. So if you are using Safari, the process should look just like this.

Now, head over to your website and locate an image that you want to pin. Once you are on the page with that image, click on the Pin It button. You will then be shown all of the images on the page. Click on the image that you want to pin. A popup window should appear. If this is your first time pinning an image, you will need to create a board for it. The board is basically creating a new bulletin board for this image to be pinned on, since it cannot automatically be pinned on the main board at pinterest.com. For my example, my business is called Jeremy’s Golf Shop, so that is what I will name this board. Then, all you need to do is click Pin It, and you’re done.

You can now pin more images if you want. You can add them to the same board that you just created, or create a new one if you want. You are not limited to pinning images just from your site. You can pin images from any website.

This can be a good marketing tool for users who sell items such as clothing or jewellery, or almost any product that would catch the eye of someone browsing through Pinterest.

For more helpful tips and tricks, please subscribe.

How To Create A Custom Facebook Page With MapDesign

Wednesday, May 11th, 2011

Back in February of 2011, we made a post with a video tutorial showing you how to create a custom Facebook page for your business using MapDesign. Not too long after, Facebook discontinued the use of FBML which was vital to the creation of the custom Facebook pages. In this new video tutorial, we will teach you the new and updated way of creating your custom Facebook page using MapDesign. This method is actually a bit easier than the last video as we are able to use a Facebook App called iFramed. So without further ado, here is the new tutorial:

Video Transcript

As of March 2011, there was a change to the way we add our image maps to our fan pages on Facebook. If you’ve added your image map in the past, you most likely did it by using the Facebook Markup Language. FBML has since been discontinued, and there is now a new method for getting our image maps on Facebook.

In our tutorial, we covered how to sign up for a Facebook fan page. We will do the same here, however it will not be as extensive as last time. If you need assistance signing up for Facebook and then creating a page, you can refer to the old tutorial, but I will warn you that there have been some interface changes so things may look a bit different.

So let’s get right to it. What you’ve been seeing here is a Facebook profile. Like mentioned earlier, you must have one of these in order to create a page. From here, I am going to go to the address bar and type in pages, so that my destination is facebook.com/pages.

Next, I will click on the Create Page button which is located in the top right corner.

Choose the type of page you are making, and fill out the required fields.

Now that the Facebook fan page has been created, I’m going to prepare my image. Remember that this can be any image you want, but for this tutorial, I am showing how to make your image a picture of your website since that seems to be the most popular request. So I will go to the page on my site that I want to be shown in my image, and I will take a screen shot by holding down Command, shift, and 3.

Next, you can see your screen shot on your desktop. Let’s open up our screenshot so that we can crop out any unnecessary parts of the image. Basically we want to crop out as much as we can as we’re going to be trying to fit a pretty large image into a pretty small area. Now I’m just going to copy what I have highlighted and then I will select New From Clipboard.

Next, and this is an extremely important step if you want the image to fit in the Facebook page, I’m going to select Tools in the menu bar, and then I am going to click on Adjust Size. Then I will change the value of the Width to 510 pixels. If you remember from the old tutorial, this number was 520px, but I am making it a bit smaller because I found 520 to be a bit too wide. I don’t have to change anything else as it is done automatically for me. Then I will save this image to my desktop.

Now we’ll launch MapDesign, and drag and drop this saved image, and it should appear in the application. As of now, this is just a screenshot of this webpage. It doesn’t do much, in the sense that I cannot click on any of the links. So for example, this navigation menu allows you to click on all of these links if you were browsing this page in your web browser. But as an image, this ability is gone. This is what we are going to change with the use of this application.

The first thing I’m going to do is choose the Rectangle option. Now I will be able to create the area that will have a live link. I’m going to do this for all of the text and images that I want to have links. I’m going to fast forward through this process since it can take a few minutes depending on how many areas you are going to link.

So now that all of my link options are set, you will notice that there are now a bunch of options in the Hotspots section, which is located on the left hand side of the application. These options are labeled Rectangle 1, 2, 3 and so on. Each of these represents each rectangle that I placed on the image. For example, you saw that the first rectangle I placed was around the area that says Home. This means that Rectangle 1 belongs to that area.

Beside each hotspot is an edit button. Selecting the edit button will allow us to set the URL to the destination we want to link each area to. So since this rectangle is surrounding the text that reads “Home,” I will link this area to the homepage. I will then need to link Rectangle 2 to the Store as that was the second hotspot that I created. We will need to repeat this process for the remaining hot spots on the image.

You will notice that for each link, I am including http:// and also selecting the option to open in a new window. You must do this as well or your image map may not function correctly.

When we are all done, we’re going to Export the image map by selecting File in the menu bar, and then pressing the Export button. I am going to export it to my desktop.

Next, I am going to create a new folder, and I am going to call it mapdesign. You can name it whatever you want, but make it something you can easily type because we’re going to be typing it in again. Then place the exported files into that folder. There should be one file named index, and one folder names images.

Now what we need to do with this folder is we need to publish it to our server. I am going to demonstrate publishing it to FTP. If you’re publishing to your MobileMe account, the process is going to be very similar.

So here I’ll just drag and drop the folder onto my server via CybderDuck.

Now I’ll head back to my Facebook page, and in the search field, I am going to type in iFramed. What iFramed is, is just an app we’re going to use to add our image map to our page. Doing it using iFramed versus installing iFrames manually will save us a lot of time, and it is much easier to do.

So we’ll click on Go To App, and then select one of the Tabs, and then choose the page that we want to add the application to. Then press the Add iFramed! button. This will take us back to our Page, and you will notice on the left, there is a new link that says Welcome. We’ll click on Welcome, and the iFramed app will load. Click the Start button.

Now we’ll need to type in the location of the folder that we just published. So if you published to the root of your server, you should type in your domain slash folder name. So for example, I will type in www.ragesw.com/mapdesign-facebook.   If you published the folder to your iDisk, you will type in web.me.com/username/foldername. It is very important that you know the precise location of where you published the folder to, otherwise the image map will not show up.

You will notice that there are two different places to put your URL for your image map. One is the fan view, one is the non-fan view. So that means if you want to show different image maps for people who have Liked your page versus people who haven’t, you can do that. For this example, I will just make both of them the same. Press the Save buttons, and then you can preview your image map, and test it and make sure everything works the way you wanted it to.

And that’s how you customize your Facebook page with iFrames and not FBML. Now your Facebook page can have the same look and feel as your website.

How To Create A Custom Facebook Page With MapDesign

Saturday, February 12th, 2011

This tutorial has been updated to reflect Facebook’s discontinuation of FBML. Check out the new create a custom Facebook page with MapDesign video tutorial.

If you are using Facebook to connect with customers, you should definitely make your Facebook page resemble your business. This can be done in various ways, but is most commonly done by using what is known as “Boxes.” These boxes are created using an app on Facebook which allows users to add HTML and CSS to their “boxes.”

This video tutorial is going to show you how you can create these boxes. This will make it so that users navigating through your Facebook page can land on your custom box and an image, or images that resembles your website, or promotional material.

The application used to create the interactive image is called MapDesign. Follow all the steps correctly, and your custom Facebook page will be up in no time!

Video Transcript

Many business owners know the importance of having a Facebook page to connect with current customers and reach out to future customers.

What I am going to show you in this video tutorial is how to make your Facebook page look like your website. I will show you how to setup your Facebook page from the very beginning, all the way to adding a section of your page that looks like your website. The end result will look something similar to this.

Rather than code this in HTML, we are going to take a different approach. Simply put, we are going to create an image map of our website and put it on our Facebook pages. The application we will be using to do this is called MapDesign which can be downloaded from ragesw.com

So the first thing we’re going to do is setup our Facebook page. Keep in mind that the interface of Facebook changes quite often so if what you see in this video differs from what you see in your web browser, don’t worry, it still should be pretty easy for you to figure out.

On the Facebook Login page you should see something that says “Create a page for a celebrity, band or business.” Click on the link to create the page.

You should see two options, one for creating a community page, and the other for creating an official page. We are going to use the Official Page option. Select the description which best describes the page you are going to create. For this demonstration, I will select the second option which says Brand, product, or organization. Then we will need to give the page a name. This can be almost anything you want it to be, but I would recommend making it very relevant to what your page is going to be about – for example, the name of your business. Lastly, you will need to check off that you are the official representative of this person, business or brand or product, and that you have permission to create the page. Remember, do not create pages for any of the above for which you do not have permission to do so. If you are able to check the box, your next step is to click the Create Official Page button.

You will need to login with your Facebook e-mail address and password, otherwise you will need to create a new account.

When you have logged in, you should be taken to your page, which should look pretty blank like this. In order to get our website’s image map on our Facebook page, we will need to setup the ability to add HTML to our page. To do so, click on the Edit Page button, and then select Apps. If you scroll down, you should see an app under the Apps You May Like section, called Static FBML. Click on the Add App button.

When the app is added, click on the Go To App button. You should be taken to a page that looks similar to this. Leave this page open for now, and we will be coming back to it shortly.

In order to get our website on our Facebook page, we’ll first need to take a screenshot of the webpage that we want to show on the Facebook page. To do this, Press Command and Shift and 3. Next, you can see your screen shot on your desktop. Let’s open up our screenshot so that we can crop out any unnecessary parts of the image. Basically we want to crop out as much as we can as we’re going to be trying to fit a pretty large image into a pretty small area. Now I’m just going to copy what I have highlighted and then I will select New From Clipboard.

Next, and this is an extremely important step if you want the image to fit in the Facebook page, I’m going to select Tools in the menu bar, and then I am going to click on Adjust Size. Then I will change the value of the Width to 520 pixels. I don’t have to change anything else as it is done automatically for me. Then I will save this image to my desktop.

Now we’ll launch MapDesign, and drag and drop this saved image, and it should appear in the application. As of now, this is just a screenshot of this webpage. It doesn’t do much, in the sense that I cannot click on any of the links. So for example, this navigation menu allows you to click on all of these links if you were browsing this page in your web browser. But as an image, this ability is gone. This is what we are going to change with the use of this application.

The first thing I’m going to do is choose the Rectangle option. Now I will be able to create the area that will have a live link. I’m going to do this for all of the text and images that I want to have links. I’m going to fast forward through this process since it can take a few minutes depending on how many areas you are going to link.

So now that all of my link options are set, you will notice that there are now a bunch of options in the Hotspots section, which is located on the left hand side of the application. These options are labeled Rectangle 1, 2, 3 and so on. Each of these represents each rectangle that I placed on the image. For example, you saw that the first rectangle I placed was around the area that says Home. This means that Rectangle 1 belongs to that area.

Beside each hotspot is an edit button. Selecting the edit button will allow us to set the URL to which we want to link each area to. So since this rectangle is surrounding the text that reads “Home,” I will link this area to the homepage. I will then need to link Rectangle 2 to the Store as that was the second hotspot that I created. We will need to repeat this process for the remaining hot spots on the image.

When we are all done, we’re going to Export the image map by selecting File in the menu bar, and then pressing the Export button. Make sure you have HTML/CSS selected. I am also going to keep the format, but I am going to change the Quality from High to Maximum. Then I will press next, and save the image map to my desktop.

The next thing we are going to do is upload the image file. You can upload it to your own server if you’d like, or you can use an image hosting website. I’m going to use ImageShack.com to publish my image. I’ll just press the browse button and locate my image, and then press the Upload Now button. Once the image is uploaded, I’m going to select the Direct Link, and copy it.

My next step is to paste this link in my address bar, and I will then click on my image and select Copy Image Address so that I can copy the address for the actual image.

Now I’ll open the index.html file for our image map with my HTML editor, and I’m going to replace this image location with the image location that I had just copied in our previous step.

Lastly, I’m going to highlight the code from Style Type all the way down to the final closing div tag, and I am going to copy it.

Now we can go back to that Facebook page that we left open, and we can paste this code in the large text box next to FBML. We’re gonna have to scroll down a bit, and we’re going to delete the closing head tag, followed by the opening body tag.

Then we’ll scroll up to the top and we can rename the Box Title to whatever we want. This is what will show up in the tabs section of our Facebook page.

Scroll back down and press the Save Changes button.

Now if you go back to your Facebook page, and click on the tab for your image map, you will see that the image is there, and if you hover your mouse over those certain sections that you made linkable, you will see that you can then click to be taken to those destination URLs.

And that’s how you customize your Facebook page so that it can have the same look and feel as your website.

If you want to learn how to make your website rank higher in search engines, be sure to check out the SEO Video Courses at ragesw.com

Integrate your iWeb Site with Facebook

Monday, November 9th, 2009

Facebook allows companies, organizations, or individuals to start groups and fan pages to make it easier for Facebook users to keep up with all your news and upcoming events.

A couple of months ago they came out with widgets that you can add to your website. You can see an example of a Facebook widget on the side of this blog. It shows all the users that are a fan of RAGE Software and lets any blog reader to quickly become a fan as well.

Macworld.com recently published an article describing how to Integrate an iWeb website with Facebook.

It shows you how to add Facebook widgets to your iWeb site using HTML snippets. It also shows you how to get your RSS Feed on your Facebook page. This means all of your blog posts can automatically be added to your wall or fan page. There are many widgets to choose from, so it’s definitely worth a look to see what is available.

It’s a great article to read over if you would like to keep your facebook friends or fans updated on your website news and events.

Combined with iWeb SEO Tool to optimize your website for search engines, and Sitemap Automator, to get your website listed in all major search engines, this can be a great way to attract more visitors to your website.

Social Networking: Using Twitter for Quick Company Updates

Sunday, August 30th, 2009

Twitter.com is known as a micro-blogging website. A micro-blogging website is a website that lets you leave short posts, just a sentence or two, about what you are currently doing. You don’t even need to be next to a computer because you can post what you’re doing right from a cell phone.

With twitter you can set up a profile with you micro-blog and find other users to “follow”. Following a user lets you keep up to date with what they are doing at all times. Yes, that does sound a little scary, but users from all over the world have quickly embraced twitter even though it has only been online for a relatively short amount of time.

You can use twitter to quickly post what your company is currently doing. For example if you release a new product today or want to show off a new Website design. The trick to using twitter is to find users who have similar interests and start following their blog. As you build up the list of people who you follow and post interesting subjects, other users will begin to follow you as well.

You should also consider getting your existing website visitors following you on twitter by posting a link to your twitter account on your website.

Many services allow you to easily publish a quick summary of your latest blog posts to your twitter account. Other apps for iPhones or blackberrys let you easily “tweet” about what is currently happening with you.

Social Networking: Using LinkedIn to Build Your Online Reputation

Sunday, August 23rd, 2009

While Facebook and MySpace provide a more general arena for social networking, more specific social networking websites are always being developed. Some can provide a lot of value towards your marketing efforts, others will provide you with a way to meet people with similar interests, while a large portion will only offer a short life span as they get caught up in the competitive online industry.

One of the largest social networking websites geared towards professionals is LinkedIn. Although LinkedIn will probably not provide a large amount of potential visitors, it provides an important opportunity to meet, network and build your reputation with like minded individuals all over the world. Building your network of professional colleagues can open new doors and reach the people who may be able to offer helpful advice and resources to starting and maintaining your online business.

LinkedIn is provided as more of an example of what you can do with social networking websites. There is ample opportunity to find networking websites related to your business and market. It is hugely beneficial to build a reputation with the key players in your industry and this is a great way to get your foot in the door.

LinkedIn can provide three key benefits for your website. The first by showing your public profile in Google search results when potential customers search for you or your product/service. If your website is new, leveraging the size and reputation of LinkedIn may be a quick way to start building recognition for yourself in search engines.

The second benefit allows you to answer questions using LinkedIn’s Answers section of their website. If you have experience with a certain subject, you can help others while providing additional information on your website or blog. If other people can view you as an expert in a certain subject matter, they may turn to your website or blog when they have similar questions in the future.

Lastly, like Facebook, you can create groups surrounding your product, service or website and get your visitors to join. If your website is geared to professionals of any sort, LinkedIn creates a great avenue for you to allow your visitors to connect with each other.

Social Networking: A look at facebook and myspace for your business website

Saturday, August 15th, 2009

Both facebook.com and myspace.com are the two largest social networking websites in the world. A social networking website is a website that connects friends and family together using common interests groups. For years, myspace.com has been used my amateur and professional musicians, artists and movie stars to promote themselves and there work. Comedians such as Dane Cook have been rumored to owe their career to the popularity they received from utilizing myspace.com.

Both of these websites provide ample opportunities for promotion including posting your sample products, for example if you compose music, creating common interests groups, as well as cheap and targeted advertising. booksforschool.com, a Canadian based online textbook exchange service used facebook.com to advertise specifically to Canadian University students only. This lowered costs by only advertising to their target market and not paying to advertise to people who would never use the service such as students who have graduated years ago.

Facebook also lets you create company pages just like you can create a personal page for yourself. Your friends and customers can become fans of your company page and any updates you post to your wall will appear in their news feed.

You can use this feature to post about new products, special discount codes for your members only, or to simply engage with your customers on a more personal level.

When you create a company page, facebook lets you easily add a Facebook Connect widget to your website just like the one on the right and side of this blog. They provide all the code you need so you can easily advertise your company’s facebook page to your visitors and get them to join.

You can explorer the hundreds of facebooks apps you can add to your company page including automatic blog updates, twitter updates and even discussion boards.

Facebook and MySpace also provides an online market place and classifieds system which you can use to advertise your products for sale to thousands of online users.