Как автоматически создавать короткие URL-адреса/ссылки своих страниц и сообщений в Blogger с помощью сервиса Bit.ly

В нашем предыдущем уроке я уже рассказывал и показал вам, как создавать короткие URL-адреса для своего блог с помощью Google URL Shortener. Тем не менее, людям иногда нужно, чтобы все было сделано точно и автоматически. Bit.ly является достаточно популярным сервисом для сокращения ссылок, что автоматически обеспечивает вам короткий URL-адрес вашего поста или страницы.

Создаем автоматические короткие URL-адреса в Blogger с Bit.ly

Это не только поможет вам сэкономить свое драгоценное время, но и будет отображать короткий URL-адрес в нижней части ваших постов, так что посетители смогут легко делиться ими тоже. В этой статье я покажу вам, как автоматически создавать короткие адреса ссылок своих сообщений в Blogger с Bit.ly.

Что такое Bit.ly:

Bit.ly – это интернет-сервис, который предоставляет людям возможность сокращать свои URL-адреса сообщений, так чтобы люди могли поделиться ими с друзьями, близкими, и с кем захотят в интернете. Данная услуга является довольно популярной в социальной сети Twitter. Сокращать эти ссылки он начал с 6 мая 2009 года. Короткие ссылки, созданные с помощью этого сервиса, являются постоянным и выглядят они следующим образом http://bit.ly/6wgJO.

Как автоматически создавать короткие адреса в Blogger с Bit.ly

Первое, что вам нужно будет сделать, это перейти в панели инструментов Blogger. После входа в систему, перейдите на любой свой блог >> Шаблон >>  Изменить HTML и в поиск видите тег ]]></b:skin>. Как только вы найдете этот тег, просто над ним вставьте следующий CSS код.

#shorturl {
float: left;
background: #F8F8F8;
padding-bottom: 10px;
border-top: 1px solid #d2d2d2;
border-bottom: 1px solid #d2d2d2;
padding-top: 10px;
width: 650px;
}
#shorternh2 {
float: left;
padding-left: 20px;
padding-right: 10px;
}
.textinpo {
float: left;
font-family: «verdana»,helvetica,Tahoma,Arial,sans-serif;
font-size: 12px;
color: #666;
border: 1px solid #ccc;
border-radius: 3px;
background: #fff;
width: 215px;
padding: 0px!important;
padding-left: 10px!important;
height: 20px!important;
margin: -4px!important;
}

Теперь после вставки кода каскадной таблицы стилей в шаблон, пришло время, двигаться вперед, и заняться немного более серьезным делом. Опять же в шаблоне найдите <div class='post-footer'> и прямо над ним вставьте следующий JavaScript код, которые создадут короткие URL-адреса и будут показывать их в конце каждого вашего сообщения.

<!-- Short URLs Script -->
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div id='shoternUrl'>
<form id='shorturl'/>
<!-- short url widget script start -->
<script charset='utf-8' src='http://bit.ly/javascript-api.js?version=latest&amp;login=unbfacts&amp;apiKey=R_cb436480530becb8bb6e628aa34520f2' type='text/javascript'/>
<script charset='utf-8' type='text/javascript'>
BitlyClient.addPageLoadEvent (function (){
BitlyCB.myShortenCallback = function (data) {
// this is how to get a result of shortening a single url
var result;
for (var r in data.results) {
result = data.results[r];
result[&#39;longUrl&#39;] = r;
break;
}
document.getElementById (&quot;shorturl&quot;).innerHTML = &quot;<div id='shorternh2'>Surprise your friend with this fact! Share this link in your Status!</div> &lt;input type=&#39;text&#39;  class=&#39;textinpo&#39; value=&#39;&quot; + result[&#39;shortUrl&#39;] + &quot;&#39; name=&#39;bitlyurl&#39;/&gt;&quot;;}
BitlyClient.shorten (document.location, &#39;BitlyCB.myShortenCallback&#39;);
});
</script></div>
</b:if>
<!-- Short URLs Script  -->

Поздравляю: После того как все сделаете, просто нажмите на кнопку «Сохранить» и скрипт автоматического сокращения гиперссылок готово, все превосходно! Теперь идите и проверьте свой блог, чтобы увидеть автоматический созданные короткие URL-адреса в ваших постах на Blogger.

Я надеюсь, что эта статья поможет вам создавать с Bit.ly на автомате короткие гиперссылки ваших сообщений на BlogSpot. Что вы думаете по поводу этой темы, нужно ли это все в блоге? Какими онлайн-сервисами для сокращения url вы пользуетесь? Если у кого-то возникли какие-либо проблемы при применении этого урока на практике, то, не стесняйтесь оставлять комментарий ниже.

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>