Як додати twitter card до блогу (blogger)

По замовчуванню коли твітнути статтю на платформі blogger, то в twitter з'являється не дуже привабливий tweet. Це можна виправити налаштувавши на нашому блозі twitter card (карточку твітера). 

Це можна зробити кількома способами. Спосіб один заходимо в налаштування блогу Тема/Редагувати html і додаємо такі рядки перед тегом </head> :

<meta content='summary_large_image' name='twitter:card'/>
<meta content='@your-name' name='twitter:site'/>
<meta content='@your-name' name='twitter:creator'/>

Інший спосіб надає більш розширенні можливості, зокрема можна вказали посилання на logo, яке буде з'являтися коли постити не пост, а головну сторінку, або сторінки блогу на blogger. Так же само додаємо наступний текст (взято тут):

<!--Twitter Card-->
<b:if cond='data:blog.pageType == "index"'> <!--homepage-->
    <meta name="twitter:card" content="summary" />
    <meta name="twitter:description" expr:content='data:blog.metaDescription' />
    <meta name="twitter:title" expr:content="data:blog.pageTitle" />
    <meta name="twitter:site" content="@username" />
    <meta name="twitter:image" content="YOUR_LOGO_URL" />
    <meta name="twitter:creator" content="@username" />
</b:if>
<b:if cond='data:blog.pageType == "static_page"'> <!--page-->
    <meta name="twitter:card" content="summary" />
    <meta name="twitter:description" expr:content='data:blog.metaDescription' />
    <meta name="twitter:title" expr:content="data:blog.pageTitle" />
    <meta name="twitter:site" content="@username" />
    <meta name="twitter:image" content="YOUR_LOGO_URL" />
    <meta name="twitter:creator" content="@username" />
</b:if>
<b:if cond='data:blog.pageType == "item"'> <!--blog post-->
    <meta name="twitter:card" content="summary_large_image" />
    <meta name="twitter:description" expr:content='data:blog.metaDescription' />
    <meta name="twitter:title" expr:content="data:blog.pageName" />
    <meta name="twitter:site" content="@username" />
    <meta name="twitter:image" expr:content="data:blog.postImageUrl" />
    <meta name="twitter:creator" content="@username" />
</b:if>
<!--End Twitter Card-->

@username заміняємо на власний логін на твітері.
Переглянути результат можна використавши Twitter card validator.

Інколи не завжди з першого разу карточка нормально відображається в твітері і потребується повторний твіт. Або ж спочатку необхідно переглянути на валідаторі карточки, а згодом твітнути в твітері. Результат виглядає в моєму випадку так:

:

Покращені коментарі під статтями Blogger (Blogspot)

Стандартне здійснення коментарів в даний час на Blogger доволі незручне. Це можна покращити за допомогою плагіна від disqus.com. Встановлення доволі просте і показане на наступному відео.

Математичні формули на Blogger (LaTeX)

Якщо на блозі необхідне відображення формул, то можна або додавати формули рисунками або ж залучити підтримку LaTeX до свого блогу. Для цього необхідно додати відповідний скрипт до нашого блогу.

Спосіб один, додаємо в режимі редагування HTML (Тема/Редагувати HTML) в середині тегу head наступні рядки:

<script type="text/javascript" src="http://cdn.mathjax.org/mathjax/latest/MathJax.js">
MathJax.Hub.Config({
 extensions: ["tex2jax.js","TeX/AMSmath.js","TeX/AMSsymbols.js"],
 jax: ["input/TeX", "output/HTML-CSS"],
 tex2jax: {
     inlineMath: [ ['$','$'], ["\\(","\\)"] ],
     displayMath: [ ['$$','$$'], ["\\[","\\]"] ],
 },
 "HTML-CSS": { availableFonts: ["TeX"] }
});
</script> 

Далі можемо використовувати наші формули написані у форматі LaTex:

x=x^{2}+\frac{a}{b}

Формулу необхідно оточити знаками долара і вуаля: $x=x^{2}+\frac{a}{b}$

Інший спосіб використати рішення від latex.codecogs.com. В даному випадку код з адресою скрипта додаємо у HTML/JavaScript гаджет, що наявний у блозі на платформі blogger(blogspot):

<script type="text/javascript" src="http://latex.codecogs.com/latexit.php?p&li&div></script>

При використанні цього рішення формули необхідно додатково розмістити в теги абзацу або списку: <p>...</p> та <li>...</li>.

Крім того, для тих хто не хоче особливо заморочуватися з синтаксисом LaTeX на даному сайті є відповідний графічний редактор формул, який сформатує нам формулу у форматі LaTeX: www.codecogs.com/latex/eqneditor.php

Перше рішення мені більше сподобалось, оскільки код від latex.codecs.com викликав деякі проблеми із відображенням одного з моїх лічильників на блозі.

Підсвітка синтаксису на Blogger (google-code-prettify)

Свого часу написав статтю про підсвітку синтаксису для блогів на платформі Blogger (blogspot.com): Підсвітка синтаксису на Blogger. Підсвітка від Алекса Горбачева получалась доволі красивою з реалізацією під різні мови, проте доволі часто через завантажування скриптів блог починав підвисати і час його завантаження збільшився. Тому вирішив відмовитися від неї і користуватися тегом pre. Проте хочеться все ж хоч якось прикрасити код) Тому знайшов інший вихід скрипти google-code-prettify.

Як і в попередньому випадку заходимо в управління блогом, знаходимо пункт "Тема" і тиснемо кнопку "Редагувати HTML" і там перед тегом <head> або ж після нього вставляємо:

<script src='https://cdn.jsdelivr.net/gh/google/code-prettify@master/loader/run_prettify.js'/>

В html коді нашої статті оточуємо програмний код тегами pre:

<pre class="prettyprint">наш програмний код</pre>

або ж з вказанням мови

<pre class="prettyprint lang-html">
наш код
</pre>

Дивіться також давнішу публікацію:

• Підсвітка синтаксису на Blogger