new training doc

Upload: diyastraining

Post on 19-Oct-2015

63 views

Category:

Documents


0 download

DESCRIPTION

301 RedirectsFaceBook integration in Different Web BuildersLightBoxForms

TRANSCRIPT

Table of ContentsRedirection Types of Redirects 301 Redirects 302 Redirects Meta Refresh301 Redirects. .htaccess 301 PHP redirect ASP ASP .NET: ISAPI rewrite - Windows IIS Web.config ColdFusion

Redirecting non-www to www Redirect using .htaccess ISAPI rewrite using httpd.ini file Redirect using ASP.NET web.config. .htaccess Redirect code for accessing website in mobile devices.

FaceBook integration in Different Web Builders Creating FaceBook page. Adding Social Links in SiteExpresso or Spark Sharing Website in Weebly. LightBox Usage in WeeblyForms Post and Get method. How to create form to send email, store information in database and store it in a file.

RedirectionRedirection is the process of forwarding one URL to a different URL. There are three main kinds of redirects: 301, 302, and Meta Refresh.Types of Redirects 301, "Moved Permanently"recommended for SEO 302, "Found" or "Moved Temporarily" Meta RefreshMeta RefreshMeta refreshes are a type of redirect executed on the page level rather than the server level. They are usually slower, and not a recommended SEO technique.They are most commonly associated with a five-second countdown with the text "If you are not redirected in five seconds, click here." Meta refreshes do pass some link juice, but are not recommended as an SEO tactic due to poor usability.Example: 301 Redirects: If you need to change the URL of a page as it is shown in search engine results, search engines recommend that you use a server-side 301 redirect. This is the best way to ensure that users and search engines are directed to the correct page. The 301 status code means that a page has permanently moved to a new location.301 redirects are particularly useful in the following circumstances: You've moved your site to a new domain, and you want to make the transition as seamless as possible.Example: http://www.oldurl.com/uncool/(root of the old homepage)tohttp://www.newurl.com/cool/ People access your site through several different URLs. If, for example, your home page can be reached in multiple ways - for instance, http://example.com/home, http://home.example.com, or http://www.example.com - it's a good idea to pick one of those URLs as your preferred (canonical) destination, and use 301 redirects to send traffic from the other URLs to your preferred URL. You're merging two websites and want to make sure that links to outdated URLs are redirected to the correct pages. If a customer has purchased SSL and wants to access the website using https [eg:https://www.domain.com], then 301 redirect should be added.To implement a 301 redirect for websites that are hosted on servers running Apache, you'll need access to your server's .htaccess file. If is on Windows, you can use ISAPI redirects in httpd.ini file.

.htaccess 301 RedirectIf the .htaccess file does not exist, create a new file with no trailing extension after the ".htaccess" using a plain text editor (Remember to put the period at the beginning of the file name. Upload it to the root directory of your old web site. *Note: your web server must be a Linux system and have Apache mod_rewrite module enabled.You can use the following URLs to generate .htaccess redirect codes:http://www.htaccessredirect.net/index.php http://www.webconfs.com/htaccess-redirect-generator.php .http://www.htaccesseditor.com/en.shtml#a_redirect http://madsubmitter.com/htaccess-editor/ .

Add the following to your .htaccess file:Options +FollowSymLinksRewriteEngine onRewriteRule (.*) http://www.new-site.com/$1 [R=301,L]

If you decide to change filenames of individual pages of your site, you can redirect the old URLs to the new URLs by using the following line as an example:redirect 301 /old_page.html http://www.yourdomain.com/abc/new_page.htmlPHP Redirect:

In ASP:

Open the old web page and replace all its content with the following code, replacing "www.new-location.com" with the file name of the new page.

In ASP .NET:

private void Page_Load(object sender, System.EventArgs e){Response.Status = "301 Moved Permanently";Response.AddHeader("Location","http://www.new-location.com");}

ISAPI rewrite - WindowsUsing ISAPI rewrite rules, you can write a 301 permanent redirect rule to replace old files with new files. Add following code to httpd.ini file by replacing source file/directory and destination URL with actual file/directory and URL.RewriteRule /old-page.asp http://www.example.com/new-page.asp [L,I,RP]RewriteRule /directory/.* http://www.example.com/new-page.asp [L,I,RP]

In IIS (on a Windows server):1. In internet services manager, right click on the file or folder you wish to redirect.2. Select "a redirection to a URL".3. Enter the redirection page.4. Check "The exact URL entered above", and the "A permanent redirection for this resource".5. Click "Apply"Ans: On our server, our customers can only redirect folders to new URLs using IIS Administration console.

Web.config 301 redirectThe first example will redirect single pages to a new location. For example, important pages of your site have .htm extensions and you want the new location to be its own directory (i.e. http://domain.com/services.htm will change to http://domain.com/services/).

1. Open web.config in the directory where the old pages reside2. Then add code for the old location path and new destination as follows:

You may add as many location paths as necessary.

The second example will redirect an entire directory to a new location. For example, if you want http://domain.com/olddir/ redirected to http://domain.com/newdir/ open web.config in /olddir and add the following line of code within the section:

In ColdFusion:Add the following to the ColdFusion page:

Redirecting non-www to www:

Some webmasters prefer to redirect domain.com to www.domain.com for search engine optimization purposes. The thought is that some incoming links point to their non-www domain and some point to the www domain. So if the domains are consolidated, incoming links are as well. Webmasters who use this redirect usually see instances of search engine rankings with and without the www in their listings and want to consolidate their efforts.

Redirect using .htaccess

Add the following four lines to your .htaccess file, replacing 'domain.com' with your site's domain. Remember, you need to be hosted on a Linux server with the Apache Mod-rewrite module enabled.

Options +FollowSymlinksRewriteEngine onrewritecond %{http_host} ^domain.com [nc]rewriterule ^(.*)$ http://www.domain.com/$1 [r=301,nc]

Code to redirect www.domain.com and domain.com to https://www.domain.com , we need to use the following code in htaccess.Options +FollowSymlinksRewriteEngine OnRewriteCond %{http_host} ^(www\.)?domain\.com [NC]RewriteCond %{SERVER_PORT} 80RewriteRule ^(.*)$ https://www.domain.com/$1 [R=permanent,L]

In Windows, customers can use ISAPI rewrite using httpd.ini file. Add the ISAPI rewrite code given below in the httpd.ini file to redirect domain.com to www.domain.com:RewriteCond Host: ^domain.comRewriteRule (.*) http://www.domain.com$1 [I,RP]

Redirect using ASP.NET web.config.

Then the following code is used in the ASP.NET web.config file:

Redirect code added for accessing mobile website: GoMobi code# Begin goMobiRewriteEngine OnRewriteCond %{QUERY_STRING} ^.*redirect=true.*RewriteRule ^(.*)$ - [co=gomobi_prevent_redirect:false:.centralohiodentalforum.com:0:/] RewriteCond %{QUERY_STRING} ^.*redirect=false.*RewriteRule ^(.*)$ - [co=gomobi_prevent_redirect:true:.centralohiodentalforum.com:7200:/] RewriteCond %{HTTP_COOKIE} !gomobi_prevent_redirect=true [OR]RewriteCond %{QUERY_STRING} ^.*redirect=true.*RewriteCond %{QUERY_STRING} !^.*redirect=false.*RewriteCond %{REQUEST_URI} !(.*)cpanel(/?)$RewriteCond %{HTTP_USER_AGENT} "iphone|ipad|ipod|ios|symbian|opera m(ob|in)i|android|nokia|samsung|sec-|htc|huawei|ericsson|sonyericsson|blackberry|motorola|sagem|kyocera|zte|kddi|docomo|j-phone|kwc|lenovo|lg|mot|softbank|nec|audiovox|alcatel|sharp|sie-|sanyo|sendo|amoi|xda|bird|benq|palm|pantech|panasonic|fly|asus-|baiduispider|googlebot-mobile|nintendo|psp|dalvik|windows ce|foma|brew|webos|fennec|netfront|teleca|iemobile|obigo|vodafone|up.browser|portalmmm" [NC]RewriteRule ^(.*)$ http://m.centralohiodentalforum.com [L,R=302] # End goMobi

If the website is created using other builders or custom code and if customers complain that it is not loading in mobile, try to add the following code and check it in mobile device.

RewriteCond %{HTTP_COOKIE} !^mobile=no$RewriteCond %{HTTP_USER_AGENT} "android|iPhone|blackberry|iemobile|operamobile|palmos|webos|googlebot-mobile" [NC]RewriteRule ^(.*)$ http://m.domain.com/$1 [L,R=302]

Facebook integration in Different Web Builders

Facebook is the world's most popular social network for both businesses and individuals. In fact, people are 51% more likely to make a purchase after "liking" a brand on Facebook. A Facebook page has become an invaluable tool for advertising. Facebook pages spread awareness about a product or company, and allows customers a chance to interact with the company. Creating FaceBook Page. Here are some steps so that you can set up your own page on Facebook for your company or website.

1. Navigate to your home page and scroll all the way down until you see a link entitled "Create a Page."

2. Choose a genre that best describes what you are trying to promote.Click on the appropriate box.

3. Choose a subcategory within the larger genre.

4. Enter a title for your Facebook page, agree to the Terms of Use, and click Get Started.

5. Upload a picture for your page, or import one from your website.This picture is important, as it will become the face of your page and represent your company or product, so choose wisely!

6. Once you have chosen your picture, click Next to proceed.

7. Write a short blurb in your About section.This could include the purpose of your company, a short history, or a mission statement. Try to keep this section light, interesting and readable in order to draw viewers in. On this page, you should also add a link to your website, in addition to related links, such as to a Twitter account or Google+ page.

8. Choose a personalized Facebook web address.This will make it easier for people to find your page. A personalized address will also help people to remember the URL if they see it on a poster or a similar advertisement.

9. You have now created your Facebook page!Like your page so that people will know that they are not the first to have seen the page.

10. Invite your friends.There is no point to having a Facebook page that nobody sees. Invite all your friends, or at least some, so that your page can start to gather likes and become known.

11. Invite your email contact list to make sure that you have invited everyone you can to come and view your page.

12. Start writing!Add updates, tips, videos, and other posts to share news about your company or interact with your consumer base.

13. Fill in important dates or events in your company's history.SeeHow to Customize Your Facebook Timelinefor more tips. Click on the "Admin Panel" tab in the upper right-hand side.

14. Explore the Admin Panel.In particular, notice the Notifications section, the Messages section, and the New Likes section. Here, you will be able to see at a glance recent interaction between you and your fans.

Some examples:https://www.facebook.com/howtomarketyourhorsebusiness https://www.facebook.com/TalkingFinger https://www.facebook.com/recruitmilitaryhttps://www.facebook.com/Earthegy https://www.facebook.com/Egg.Carton.Labels.by.ADozenGirlz https://www.facebook.com/diyastraining [email protected]!23

SiteExpresso or SparkAdd Social LinksWhen you add a social link to your website, it gets added to every active page of your site. You can add links for Facebook, Twitter, LinkedIn, and Google Plus.1. On the Home page, go to the bottom righrt corner and Double-click to add Follow links.

2. Click the social link you want to add to your website.

Add link to Facebook: Click Choose Facebook Page.

Enter your log in information for your Facebook business account. Then, click "Log in with Facebook".

Set your permissions for the SPark app. Then clickAlloworSkip.

Twitter: Enter your Twitter Account. The @ has been provided for you. Click "OK".

Enter your LinkedIn profile. You'll need the full url for your profile page.

Google Plus: Select the Google +1 button checkbox.

3. Click OKEdit Social LinksSocial links can be added to any page on your website. When you change or remove a link, it changes the link on every page that has social links. To edit or remove a social link, follow these steps:

1. From any page, mouse over the following link areas of the page. Click Edit Follow Links.

2. To edit, Click Edit for social link you'd like to change. Click to save your change.

3. To remove a social link, click Remove for the profile you'd like to remove. Click OK to save your change.

Sharing Website in Weebly.

1. You can share website in FaceBook and Twitter while publishing Weebly website. When you're ready, you can get your site out on the internet by Publishing it. You can do this at any point, and you can always add more content to the site later and Publish it again. To Publish a site, click the orange Publish button in the upper right corner of the editor.

This will bring up a verification box, letting you know your site has been Published.

You can click the Published address to view your site. You can also click on Share on Facebook and Share on Twitter buttons to link your friends and followers .

Share Your Posts to Facebook and TwitterThe whole point of having a blog is for people to read all the witty, interesting, mundane, goofy, smart, informative things you have to say. And a great way to help guide folks to your posts is by sharing them on Facebook and Twitter. Which is why auto-sharing for both social networks is built right in to every post.

To the right of each new post you'll find Share switches for Facebook and Twitter in the Post Settings:

The first time you switch either of them on you'll be prompted to both log in to your Facebook / Twitter account and give Weebly permission to connect to those accounts (this permission can be revoked at any point).

Twitter is very straight forward. Log in to your account, give permission for Weebly to connect and you'll start posting the next time you Publish your blog (the title of the blog post is automatically used as the message on Twitter). Facebook is a bit more complicated in that it provides you with options the first time you connect. Let's walk through those.

Your first option is to choose where you'd like to share. Should your posts go to your personal Facebook account so all your friends can see? Or would you like to share them to a Business or Fan Page you've created?

If you choose your personal profile you're all done. But if you select "My Business Page" you'll be presented with a list of every Fan Page you manage on Facebook. You need to select the one to which you'd like to share your posts.

Once that's done you're set. Next time you Publish a blog post it'll show up on your Business Page wall and will be shared with your fans.

Social Media Icons (Facebook, Twitter, Pinterest, Google+)Each theme includes social media buttons that are designed specifically for that theme. These buttons appear in the upper right of the theme and can also be added anywhere else on the site by using the Social Icons element found under the More category of elements. They can be used to link to a Facebook fan page or profile, a Twitter feed, Google+, Pinterest, and many other services.

Scroll over the buttons to edit them.Either type or copy / paste a link to the appropriate page on Facebook, Twitter, etc. Delete any icons you don't want to use by clicking the "x" button to the right of the field (deleting an icon removes the button in the editor, but note that leaving the link field blank will make any of the icons disappear on the published site) and drag links up / down using the movement controls on the left to change the order in which the icons appear.

Click the Add More button to access more icons from more providers.

And that's all you need to do. These icons provide an easy way for site visitors to access your social media profiles and pages from any page of your site.

If you want to turn these buttons off completely, go to the Design tab and use the Social Icon On / Off switch to toggle them on or off. If you want access to these buttons but don't see them on your site, the best thing to do is go to this same section and make sure they're turned on.

And you can also drag these buttons to various pages and sections of your site using the Social Icons element under the More category.

Add a Facebook Like (Share) Button to Your SiteAdding a Facebook Like button to your site is a great way to let visitors share your site with their friends.

Get started by going here:

http://developers.facebook.com/docs/reference/plugins/like

There is a form on this page that you'll use to setup your like button.

First, enter the address of your site. If you leave this field blank, people who click your like button may end up liking something else entirely.

If you have a Facebook Fan Page and prefer visitors Like that page as opposed to just Liking your site, enter the address of that page instead. The address of your FB fan page will always be facebook.com/thenameofyourpage.

Make sure the Send Button option is turned off / unchecked. This is a new option from Facebook that we don't currently support.

Then select your layout style. This will change the example layout shown to the right of the form.

Decide whether or not you want to show the faces (profile pic thumbnails) of some of the people who've liked your site. The design usually looks cleaner if you uncheck this box.

Set the width of the like button and description. This defaults to 450 with the standard design (which would work just fine with most sites), but you may want to make it narrower if you're placing this in a 2-column layout or sidebar.

Choose a button that says Like or Recommend, which font you want to use and a light or dark color scheme. Then click the Get Code button to see the code you'll be adding to your site.

You may be prompted to "verify your developer account" at this point. If so, the first step to take is just to log in to FB and enter all the above info again. You usually won't have to verify if you're logged in.

If you're still prompted to verify, then you'll need to provide a cell phone number where FB can text you a verification code. See their help site toread their explanation behind requesting this info.

Regardless of whether or not you're prompted to verify, once you're able to click the "Get Code" button, you'll be presented with a dialog box. Select the iframe code and copy it. This is important as the XFBML code will not work properly.

Open your site in the editor and drag a Custom HTML element to a page.

Click within the element and paste the code there.

Click out of the element and you'll see the like button with what may be a lot of extra white space beneath it. If you do see a lot extra white space, pay this no mind as it will disappear after you publish the site.

You're now ready to Publish this to your live site. Once you do, you'll see your Like Button there waiting for you. As people Like your site, you (and everyone else) will see how many have liked it. And if people have previously liked your site on Facebook through some other Like button, you'll see that reflected in the numbers here.

You can use this same button code on as many pages as you want. That way visitors can like your site no matter which page they're on.

LightBox (Java Script)

Lightboxis aJavaScripttechnique used to display images and other web content usingmodal dialogs.Lightboxwas originally the name of a specific JavaScript plugin, written by Lokesh Dhakar.However, common usage of the term has evolved to encompass Lightbox-style JavaScript plugins and effects in general.

Functionality:On Lightbox-enabled links, direct links to image files (or HTML content viaAjax) are displayed in an overlay on the current page instead of causing a new page load.While the overlay is displayed, the rest of the page content is darkened (and, in effect, temporarily disabled) to focus the user on the overlay. Depending on the plugin's settings, the overlay may be positioned, sized to the user's browser window, and animated. The plugin determines which links are enabled by means of the HTML "rel" attribute, which is used on tags. Lightbox plugins also provide ways to display captions and to run slide shows, which can be navigated using the arrow keys or mouse.Lightboxscripts are dependent upon a browser's JavaScript compatibility, though the simplicity of implementations and the maturity of such scripts make this dependency mostly irrelevant. Many Lightbox scripts useunobtrusive JavaScript. Browsers that do not load the script for whatever reason can instead simply load the image as a separate page load, losing the Lightbox effect but still retaining the ability to display the image.

In Weebly, if you are trying to add image, you can enable or disable LightBox. LightBox options are available for Gallery where images can be displayed in different format.

FormsAwebform,web formorHTML formon aweb pageallows a user to enter data that is sent to aserverfor processing. Forms can resemblepaperordatabaseforms because web users fill out the forms using checkboxes,radio buttons, ortext fields. For example, forms can be used to entershippingorcredit carddata to order a product, or can be used to retrieve search results from asearch engine.

Submission:When data that has been entered into HTML forms is submitted, the names and values in the form elements are encoded and sent to the server in anHTTPrequest message usingGETorPOST. What is Get method?When you specify method=get in your tag, the information that is entered in your form will be tracked in the last part of the action URL.For example, go to http://www.voiceofdiya.com and type test in the search area. After you click on the Search button, look at the browser address bar. It shows:http://www.voiceofdiya.com/?s=testThe first part in red is the action URL. The part in green includes the word you typed.

What is Post method?The post method is similar to the Get method. However, this method sends your data entered in the form to the server behind the scenes. (Usually, in login forms post method is used.)

HTML pages support Post method only within our servers. If customers are using post method from external servers, it is not accepted. However, Post and Get requests is supported on IIS for .NET and ASP. Also, customers can use Post and Get request through the PHP cURL.

To learn more about form, please refer the following URL:http://www.w3schools.com/html/html_forms.asp A submit button is used to send form data to a server. The data is sent to the page specified in the form's action attribute. The file defined in the action attribute usually does something with the received input:

Username:

How the HTML code above looks in a browser:Top of FormUsername:Bottom of FormIf you type some characters in the text field above, and click the "Submit" button, the browser will send your input to a page called "html_form_action.asp". The page will process the information and display the text.

Creating simple PHP contact formWhen you need user to send feedback to your email, you can use contact form. In this tutorial you'll learn how to create contact form with php script.In this tutorial, create 2 files1. contact.html2. send_contact.php

Steps1. Create file contact.html.2. Create file send_contact.php.STEP1: Create file contact.html

############### Code

Contact Form

Subject:

Detail:

Name:

Email:

STEP2: Create file send_contact.php

############### Code