-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathwebsite-setup.html
197 lines (167 loc) · 8.99 KB
/
website-setup.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="Setup Betterlink JavaScript Library">
<meta name="author" content="Betterlink">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Betterlink - Website Script Setup</title>
<link href="http://fonts.googleapis.com/css?family=Lato:300,400,700,300italic,400italic,700italic" rel="stylesheet" type="text/css">
<link href="/css/bootstrap.min.css" rel="stylesheet">
<link href="/css/blog-post.css" rel="stylesheet">
<link href="/css/betterlink-site.css" rel="stylesheet">
<!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!--[if lt IE 9]>
<script src="/js/html5shiv.js"></script>
<script src="/js/respond.min.js"></script>
<![endif]-->
<link rel="shortcut icon" type="image/x-icon" href="/favicon.ico" />
<link rel="canonical" href="http://www.betterlink.io/website-setup"/>
</head>
<body id="information-page">
<nav class="navbar navbar-fixed-bottom navbar-inverse" role="navigation">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="/index.html">Betterlink</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div id="betterlink-site-nav" class="collapse navbar-collapse navbar-ex1-collapse">
<ul class="nav navbar-nav">
<li class="active"><a href="/index.html">Get Betterlink</a></li>
<li><a href="/docs/basic-setup.html">Documentation</a></li>
<li><a href="/contact.html">Contact</a></li>
<li class="content-tbd"><a href="#about">About</a></li>
</ul>
<ul class="nav navbar-nav navbar-right content-tbd">
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Developers <b class="caret"></b></a>
<ul class="dropdown-menu">
<li><a href="#">Contribute</a></li>
<li><a href="#">API and Docs</a></li>
<li><a href="https://github.com/betterlink">On GitHub</a></li>
</ul>
</li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container -->
</nav>
<div class="container">
<div class="row">
<div class="col-md-8">
<h1>Betterlink - Webmaster Setup</h1>
<ul id="intro-bullets">
<li>Step 1 of 2: Integrate JavaScript Library</li>
</ul>
<hr>
<p class="lead">Adding Betterlink to your website is easy. We'll do most of the heavy-lifting for you.</p>
<p>Betterlink comes in two flavors: the <a href="/docs/basic-setup.html">standard setup</a> for most clients, and a <a href="/docs/advanced-setup.html">customizable setup</a> for advanced users. Below, we'll sprint through the one-size-fits-most setup.</p>
<p>For more details on:</p>
<ul>
<li>customization options</li>
<li>handling dyanmic content on pages</li>
<li>supporting links for desktop and mobile</li>
</ul>
<p>...or anything else, please refer to our full <a href="/docs/basic-setup.html">documentation</a>.</p>
<hr>
<h3>Bullet Point Setup</h3>
<p>In most cases, there's two basic steps:</p>
<p><ol>
<li>Copy the Betterlink script</li>
<li>Paste into your webpages</li>
</ol></p>
<p><b>1.</b> Copy the below script.</p>
<h4 class="detailed-description">Script Text</h4>
<pre class="prettyprint detailed-description"><code> <script>
(function(d,s,id){
var js,fjs = d.getElementsByTagName(s)[0];
if(!d.getElementById(id)){
js=d.createElement(s); js.id = id; js.defer = true;
js.src="//code.betterlink.io/betterlink.js";
js.setAttribute('data-script-source','within source');
fjs.parentNode.insertBefore(js,fjs);}
}(document,'script','betterlink-js'));
</script></code></pre>
<p class="detailed-description">In simpler terms, this creates the following script element for your page:</p>
<pre class="prettyprint detailed-description"><code> <script defer id="betterlink-js" src="//code.betterlink.io/betterlink.js" data-script-source="within source"></script></code></pre>
<p class="detailed-description">The only difference is that we structure the script tag specially so that it doesn't block any other content on your page from loading.</p>
<p><b>2.</b> Paste into your webpages.</p>
<p class="detailed-description">Make sure you get it on <strong>all</strong> of the pages on your site.</p>
<div class="well well-sm message-block detailed-description"><p>Quick and simple answer: you should add Betterlink just before the closing <code></body></code> tag on your webpages</p></div>
<h4>Initializing Betterlink</h4>
<p>The good news: If you're following this simple setup, you're all done!</p>
<p>When your browser loads the Betterlink script, it will automatically enable content sharing. We'll also automatically check if a visitor followed one of your new special links. If so, we'll take them to the requested portion of the page and highlight the content.</p>
<span class="content-tbd"><p>If you're concerned about any of the below topics, check out our <a href="#">Advanced Setup</a>:</p>
<ul>
<li>Redirecting mobile users <small><em>(so they can see the same highlighted content)</em></small></li>
<li>Linking to dynamic content on a page <small><em>(content that changes or displays sometime after the page initially loads)</em></small></li>
<li>Linking to content that displays when a hash is loaded in the URL <small><em>(like <code>http://example.com#my_content</code>)</em></small></li>
<li>Customizing the look and feel of the highlights</li>
<li>Using permalinks to link to pages that change their address</li>
</ul></span>
<a id="setup-next-step-button" href="/webmaster-customize.html" class="btn btn-success btn-lg btn-wrap">Next Step ›› Customize</a>
</div>
<div class="col-md-4">
<div class="well documentation-index">
<h4>Get Betterlink</h4>
<ul class="list-unstyled">
<li><a href="/index.html">Introduction and Demo</a></li>
<li class="active">Betterlink Setup
<ul>
<li class="active">For Webmasters
<ul>
<li><a href="/webmaster-overview.html">Overview</a></li>
<li class="active">Website Setup</li>
<li><a href="/webmaster-customize.html">Customize</a></li>
</ul>
</li>
<li><a href="/browser-extension-setup.html">For Everyone</a></li>
</ul>
</li>
<li><a href="/docs/basic-setup.html">Documentation</a></li>
</ul>
</div><!-- /.well -->
</div>
</div><!-- /row -->
<!--
<hr>
<footer>
<div class="row">
<div class="col-lg-12">
<p>Copyright © Ben Getson 2013 · Facebook · Twitter · Google+</p>
</div>
</div>
</footer> -->
</div><!-- /.container -->
<!-- javascript -->
<script src="//code.jquery.com/jquery-1.11.2.min.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
<script src="/js/google-code-prettify/run_prettify.js"></script>
<!-- Example use of betterlink.js script here -->
<script>
(function(d,s,id){
var js,fjs = d.getElementsByTagName(s)[0];
if(!d.getElementById(id)){
js=d.createElement(s); js.id = id; js.defer = true;
js.src="//code.betterlink.io/betterlink.js";
js.setAttribute('data-script-source','within source');
fjs.parentNode.insertBefore(js,fjs);}
}(document,'script','betterlink-js'));
</script>
<script>
// GA
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','//www.google-analytics.com/analytics.js','ga');
ga('create', 'UA-45392465-1', 'betterlink.io');
ga('send', 'pageview');
</script>
</body>
</html>