Geekly Articles each Day
📜 ⬆️ ⬇️

Russification Launchrock file


How does a startup start? For you with a mega-super-cool idea, and for your first visitors - from a stub site or landing page. Many copies are broken on the subject of their design and functionality, but in the end the page should be technically developed and run. You can make a bike, you can take Wordpress, or you can use a ready-made service. We chose Launchrock, which, however, “out of the box” is completely inoperative for any languages ​​other than English. I will share with you my experience of working out a file for the Russian language.

Why Launchrock? There are many options and services, for example, here is a useful discussion on the Quarter. A couple of them have long been bent and available in Russian. There were two arguments for me - the service does absolutely everything I need. And it is totally and without options is free, without advertising and SMS.

Russification


All shamanic actions will be performed in the admin panel of our project, in particular using the magic button in the lower right corner:


The texts of the page itself - some part of the texts is corrected in the admin panel, but in html you need to manually correct all the texts in the input fields by default and the names of the buttons. Nothing complicated, just need not forget to go through all the options, there are a lot of them.
')
Russification email, which come to the user after the recording, and that come to his friends after the invitation - this is the most serious challenge. The problem is standard: as true Americans, developers are not aware of the existence of other languages ​​and encodings. All letters are permanently distorted. But there is a way out, we smoke docks as the email works in our world and fix it.

Topic of the letter


The subject of your letter will look like this:


The magic format =? Charset? Encoding? Encoded text? = Is described here: en.wikipedia.org/wiki/MIME#Encoded-Word

Strange type icons = D1 = 81 are Quoted-printable encoding en.wikipedia.org/wiki/Quoted-printable , an online encoder is available, for example, here .

Take your letter subject, encode it in Qp, insert it into the template =? Utf-8? Q? here_QP_coded_them? = and write it to the admin area. All, the topic is now displayed in Russian. There is a jamb, which I have already encountered, when I sent out through American services, and which I don’t know exactly how to overcome - tell in the comments if there is a solution. According to the standard email header lines have a maximum length, and some email clients incorrectly read long headers in the format described above, it turns out:


The iron decision is to make the letter subject short, 2-3 words :)

Text of the letter


With the text also have to pohamanit. First, keep in mind that if there is a non-Latin letter in the text of the letter, then you will receive in the letter the wrong text that you entered in the admin panel! Why Launchrock is so arranged - I have no idea :) The text should not contain a single Cyrillic character - it means that it must be disguised.


There are plenty of converters on the Internet, for example , this one . Likewise, do not forget to correct not only the confirmation of the recording on the beta, but also the referral letter that will be sent to friends by email - it is in the “Sharing Page” tab, not “Email confirmation”!

Another ambush - by default, the user has a field for entering his subject and text of the letter, and this text will be displayed in the letter. Of course, in krakozyabrah. This is not treated, so the fields are completely hidden:


And reset the textarea tag, where the user could enter his text:


Everything, now all letters will come in Russian without problems.

Work as a file


Another couple of hacks that will make the page better. For example, after writing to the beta, a viral page appears with different sharing methods. By default, the Twitter button will not have the name of your product - because the name is not displayed if the button is rendered in an invisible element. Fix it by disabling the standard button in the admin panel and inserting your own page switch event:


Twitter Button Code
container.find( ".LR-connect-share-links" )
.append('
');

In the same block, you can work with a page - for example, make a block with an email input, as we did:


Want to insert a Vkontakte button? No problem - in the head scripts and tags where you need a button. And it is better to put two of them - on the start page and to confirm the record, vk_like and vk_like2 in our case.




For those who wish - under the spoiler, the full code of our doped sign-up page for Launchrock, take and use:
HTML, CSS and JS
 <!DOCTYPE html> <head> <script type="text/javascript"> window.vkAsyncInit = function() { VK.init({apiId: 3861954, onlyWidgets: true}); VK.Widgets.Like("vk_like", {type: "mini", height: 20, width:145, pageUrl:"http://www.duskrift.ru"}); VK.Widgets.Like("vk_like2", {type: "mini", height: 20, width:145, pageUrl:"http://www.duskrift.ru"}); $( "#vk_like, #vk_like2" ).css({ clear:"auto", display:"inline-block", width:"145px" }); }; setTimeout(function() { var el = document.createElement("script"); el.type = "text/javascript"; el.src = "http://vk.com/js/api/openapi.js"; el.async = true; document.getElementById("vk_api_transport").appendChild(el); }, 0); </script> </head> <body style="overflow:hidden; margin:0;"> <div id="vk_api_transport"></div> <div id="content" class="LR-content LR-site-bg-color-container"><!-- LR-sharing-page LR-stats LR-lx --> <div class="LR-announcement-bar LR-announcement-bg-color-container"> <h4 class="LR-announcement">Special Announcement About Important Things!</h4> </div><!-- .announcementBar --> <div class="LR-bg-img LR-site-bg-image-container LR-site-show-on-bg-image"></div> <div class="LR-box-wrapper" style="margin-top:-1000px"> <div class="LR-box"> <div class="LR-box-container LR-clearfix"> <div class="LR-box-inner"> <!--<h1 class="LR-site-title">Site Title</h1>--> <!--<div class="LR-site-logo"><img src="js/ignition/themes/classic/img/logo.png" alt="Site Logo"/></div><!-- .site-logo --> <div class="LR-sign-up"> <h2 class="LR-site-tagline montserrat">We Get Users</h2> <div class="LR-site-description"> <p>Set up a "launching soon" page in minutes. Collect interest, increase sharing, and build your audience.</p> </div><!-- .site-description --> <span class="LR-sign-up-label">Invite people to signup by entering their e-mail address:</span> <div class="LR-sign-up-container"> <div class="LR-sign-up-container-inner LR-clearfix"> <input type="email" class="LR-sign-up-input signup-email" placeholder=" e-mail,    "> <input type="submit" name="submit" title="SIGN UP" value="!" class="LR-sign-up-submit"> </div><!-- .sign-up-container-inner --> <iframe allowtransparency="true" frameborder="0" scrolling="no" src="https://platform.twitter.com/widgets/follow_button.1378258117.html#_=1378363174496&dnt=true&id=twitter-widget-16&lang=ru&preview=true&screen_name=DuskRift_RU&show_count=false&show_screen_name=true&size=m" class="twitter-follow-button twitter-follow-button" title="Twitter Follow Button" data-twttr-rendered="true" style="width: 150px; height: 20px;"></iframe> <iframe scrolling="no" style="border: none; overflow: hidden; height: 20px; width: 120px;" title="Like this content on Facebook." class="fb_ltr" src="http://www.facebook.com/plugins/like.php?api_key=255930487765390&channel_url=http%3A%2F%2Fstatic.ak.facebook.com%2Fconnect%2Fxd_arbiter.php%3Fversion%3D27%23cb%3Df3c6e3498c%26domain%3Dsignup.duskrift.ru%26origin%3Dhttp%253A%252F%252Fsignup.duskrift.ru%252Ffaad92b74%26relation%3Dparent.parent&colorscheme=light&extended_social_context=false&href=http%3A%2F%2Fsignup.duskrift.ru&layout=button_count&locale=ru_RU&node_type=link&sdk=joey&show_faces=false&width=120"></iframe> <div id="vk_like"></div> </div><!-- .sign-up-container --> </div> </div> <div class="LR-site-share"> <div class="LR-site-incentive"> <p>Relationships are a two way street. You are asking people to give you their recommendation, so what are you giving them?</p> </div><!-- .site-incentive --> <div class="LR-site-share-container"> <div class="LR-site-share-inner"> <div class="LR-site-social-share"> <ul class="LR-clearfix"> <li class="LR-share-facebook-like"></li> <li class="LR-share-facebook-send"></li> <li class="LR-share-tweet"></li> <li><div id="vk_like2"></div></li> </ul> </div><!-- .site-social-share --> <div class="LR-site-share-email"> <div class="LR-share-label">   e-mail:</div> <div class="LR-share-email-inner"> <div class="LR-email-wrapper"> <input type="email" class="LR-share-email-emails" placeholder=" e-mail   "> <div class="LR-share-email-import"></div> </div> <div class="LR-share-email-hide"> <input type="text" class="LR-share-email-subject" placeholder="   Dusk Rift!"> <textarea class="LR-share-email-message" rows="4"></textarea> <input type="submit" name="submit" title=" " value=" " class="LR-share-email-send"> </div><!-- .share-email-hide --> </div><!-- .share-email-inner --> </div><!-- .site-share-email --> <div class="LR-site-share-link"> <span class="LR-share-label">:</span> <input type="text" class="LR-share-link" placeholder="" value=""> </div><!-- .site-share-link --> </div><!-- .site-share-inner --> </div><!-- .site-share-container --> <div class="LR-site-live-stats LR-clearfix"> <div class="LR-site-live-stats-container"> <span class="LR-share-label">Your live stats:</span> <div class="LR-live-stats-data"> <div class="LR-stats-clicks"></div> clicks </div> <div class="LR-live-stats-data signups"> <div class="LR-stats-signups"></div> signups </div> </div><!-- .site-live-stats-container --> </div><!-- .site-live-stats --> <div class="LR-site-connect"> <span class="LR-share-label">:</span> <ul class="LR-connect-share-links LR-clearfix"> <li><a href="#" class="LR-connect-icon connect-facebook" title="   Dusk Rift  Facebook">DuskRift</a></li> <li><a href="http://vk.com/duskrift" class="LR-connect-icon connect-vk" title="   Dusk Rift " target="_blank">DuskRift</a></li> </ul> </div><!-- .site-connect --> </div><!-- .site-share --> </div><!-- .box-container --> </div><!-- .box --> </div><!-- .box-wrapper --> <div class="LR-pwd-lr"> <a target="_blank" href="http://discover.launchrock.com?ref=hm"></a> </div> </div><!-- #content --> </body> 


 /* Insert CSS overrides here */ @media only screen and (min-device-width : 320px) and (max-device-width : 480px) { /* Insert mobile CSS overrides here */ input[type="email"].LR-sign-up-input { max-width: 134px; } .LR-box-wrapper { max-width: 290px; } .LR-site-share-email input[type="email"], .LR-site-share-email textarea, input[type="text"].LR-share-link { width: 164px; } } .LR-bg-img { background-attachment:scroll; } input[type="email"].LR-sign-up-input { width: 296px; } input[type="submit"].LR-sign-up-submit{ min-width: 97px; } .LR-box-wrapper { width: 500px; position: absolute; /* width:auto;*/ } .LR-site-social-share ul li { float: none; display: inline-block; height: 16px; } .LR-content { font-size: 16px; } input.LR-share-link { width: 72%; } .LR-sign-up-container { margin: 10px auto; } .LR-connect-share-links li { float: left; margin-left:10px; } .LR-connect-icon.connect-facebook { padding-left: 20px; line-height: 16px; color: white; font-size: 14px; width: 54px; text-decoration: none; } .LR-connect-icon.connect-vk { padding-left: 20px; line-height: 16px; color: white; font-size: 14px; width: 54px; text-decoration: none; background: url('http://vk.com/images/faviconnew.ico') 0 0 no-repeat; } input.LR-share-email-emails[type="email"] { padding-right: 45px; } .LR-connect-share-links { width:480px; } .LR-box-inner { margin: 10px 2% 0; } .LR-site-share .LR-site-share-container { padding:0; } .LR-site-share-email { padding-bottom:0; margin: 0; } .LR-site-description { font-size: 28px; } input[type="submit"].LR-sign-up-submit { background: #ffb000; background: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #ffc440), color-stop(4%, #ffc440), color-stop(4%, #ffb000), color-stop(100%, #ff8f00)); background: -webkit-linear-gradient(#ffc440, #ffc440 4%, #ffb000 4%, #ff8f00); background: -moz-linear-gradient(#ffc440, #ffc440 4%, #ffb000 4%, #ff8f00); background: -o-linear-gradient(#ffc440, #ffc440 4%, #ffb000 4%, #ff8f00); background: linear-gradient(#ffc440, #ffc440 4%, #ffb000 4%, #ff8f00); } input[type="submit"].LR-sign-up-submit:hover { background: #ff8800; background: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #ffa325), color-stop(4%, #ffa325), color-stop(4%, #ff8800), color-stop(100%, #ff6200)); background: -webkit-linear-gradient(#ffa325, #ffa325 4%, #ff8800 4%, #ff6200); background: -moz-linear-gradient(#ffa325, #ffa325 4%, #ff8800 4%, #ff6200); background: -o-linear-gradient(#ffa325, #ffa325 4%, #ff8800 4%, #ff6200); background: linear-gradient(#ffa325, #ffa325 4%, #ff8800 4%, #ff6200); } .LR-site-share-inner { padding-bottom: 20px; } .LR-site-incentive { margin: 20px 2%; } .LR-site-share-container { padding-top: 10px; } .LR-share-email-subject, .LR-share-email-message { display:none; } 


 window.lrignition.themesJS.customTheme = function() { /* DO NOT MODIFY ABOVE THIS LINE UNLESS YOU KNOW WHAT YOU ARE DOING */ this.init.push(function() { /* Your code here to run on initialization */ //var container = ignition.getContainer(); // jQuery setTimeout(function(){$( ".LR-box-wrapper" ).css({"margin-left":"-1000px","margin-top":"70px",display:"block"}).animate({"margin-left":"40px"}, 700);}, 3000); }); // Uncomment to override default mode set behavior this.setMode = function( ignition, mode ) { var container = ignition.getContainer(); // jQuery if( mode === "main" ) { container.find( ".LR-content" ).removeClass( "LR-sharing-page" ); container.find( ".LR-site-share" ).hide(); container.find( ".LR-sign-up-container" ).show(); } else if( mode === "postsignup" ) { container.find( ".LR-content" ).addClass( "LR-sharing-page" ); container.find( ".LR-sign-up-container" ).hide(); container.find( ".LR-site-share" ).show(); container.find( ".LR-connect-share-links" ).append('<li><iframe allowtransparency="true" frameborder="0" scrolling="no" src="https://platform.twitter.com/widgets/follow_button.1378258117.html#_=1378363174496&dnt=true&id=twitter-widget-16&lang=en&preview=true&screen_name=DuskRift_RU&show_count=false&show_screen_name=true&size=m" class="twitter-follow-button twitter-follow-button" title="Twitter Follow Button" data-twttr-rendered="true" style="width: 150px; height: 20px;"></iframe></li>'); container.find( ".LR-share-email-send" ).attr({"value":" !"}); } }; /* DO NOT MODIFY BELOW THIS LINE UNLESS YOU KNOW WHAT YOU ARE DOING */ }; window.lrignition.themesJS.customTheme.prototype = new ( window.lrignition.themesJS.classic || window.lrignition.themesJS.common )( "customTheme" );


Summary


After completion with a file from Launchrock, an excellent and absolutely free service is obtained for landing pages and stub sites, with viral, analytics and mailings. Startups, use :)

Source: https://habr.com/ru/post/194024/

More articles:


All Articles