1. Крок 1. Створення HTML кнопки.
2. Крок 2. Отримання кількості репоста через API вконтакте
3. Спосіб 1. Через cURL
4. Спосіб 2. Через WordPress HTTP API
5. Миша Рудрастих

А сьогодні вересневий преміум-пост. Ідея посту виникла у мене в результаті переїзду зі стандартних соціальних кнопок «Поділитися» на власні кастомниє. Основна причина звичайно - це продуктивність сайту, у мене навіть є старий-престарий пост, в якому я описую, чому не варто використовувати стандартні кнопки соц. мереж , І цей пост до цих пір актуальне!

Приклад кнопки - відразу під постом, перед формою підписки. Ви можете самі переконатися в рабочесті моєї кнопки, тільки зверніть увагу - для прискорення завантаження сторінок мій сайт кешируєт лічильник кнопки на 2 години. Тобто після того, як ви поділилися постом у вконтакте, вам потрібно почекати до 2 годин (максимум), щоб лічильник змінив своє значення.

Крок 1. Створення HTML кнопки.

Навіть jQuery нам не знадобиться, просто вставляєте код в те місце, в якому хочете відобразити кнопку. Як ви бачите, по суті тут чистий HTML і трохи JavaScript, причому якщо його видалити, то це буде просто кнопка-посилання, але в той же час лічильник буде працювати як належить (WordPress або чистий PHP обов'язковий).

1 2 3 4 5 6 7 8 9 &lt;? Php $ permalink = get_permalink ($ post_id); // в цій змінній вкажіть посилання на пост $ title = get_the_title ($ post_id); // тут вкажіть заголовок $ description = get_the_excerpt ($ post_id); // опис $ thumbnail = wp_get_attachment_image_src (get_post_thumbnail_id ($ post_id)); $ Thumbnail = $ thumbnail [0]; // URL картинки?> <a href="http://vk.com/share.php?url= &lt;?php echo urlencode ($permalink) ?> & amp; title = &lt;? Php echo urlencode ($ title)? > & amp; description = &lt;? php echo urlencode ($ description)?> & amp; image = &lt;? php echo urlencode ($ thumbnail)?> & amp; noparse = true "onclick =" window.open (this.href, this. title, \ 'toolbar = 0, status = 0, width = 548, height = 325 \'); return false "title =" Поділитися у Вконтакте "target =" _ parent "class =" misha-vk "> Поділитися <span> &lt;? php echo get_vk_counts_wp ($ permalink, $ post_id)?> </ span> </a>

• Рядок 2 - в цій змінній вкажіть URL, на якому знаходиться кнопка «Поділитися», якщо у вас WordPress, то можете використовувати функцію get_permalink () .
• 3 - заголовок або назва сторінки, знову-таки для WordPress його можна отримати функцією get_the_title () .
• 4 - короткий опис.
• 5 - URL зображення-мініатюри, яке повинно буде відобразитися у вконтакте. У коді ж я показав приклад для WP, грунтуючись на його функціонал мініатюр - спочатку я отримав ID мініатюри функцією get_post_thumbnail_id () , А потім, вже за допомогою wp_get_attachment_image_src () , На основі цього ID, отримав URL картинки.
• 8 - так, саме на цій сходинці ми і отримуємо кількість репоста з API, в прикладі використовується функція з другого способу (для WordPress), але ви зрозуміло можете скористатися першим з розглянутих нижче методів.

Крок 2. Отримання кількості репоста через API вконтакте

Зараз я покажу два найпростіших способу отримання кількості репоста тієї чи іншої сторінки. Ви спокійно можете використовувати той спосіб, який вам подобається (зверніть увагу - другий спосіб підійде тільки для WP) і вам зовсім не обов'язково розбиратися в тому, як працює код всередині функцій - просто вставляєте їх до себе на сайт і використовуєте.

Спосіб 1. Через cURL

Цей спосіб хороший тим, що його ви можете використовувати на своєму сайті незалежно від того, яка CMS у вас стоїть - це може бути WordPress, а може бути і взагалі який-небудь самопісний движок.

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 function get_vk_counts_curl ($ url) {$ api_url = 'https://vk.com/share.php?act=count&index=1&url='. $ Url; $ Vk_connect = curl_init (); curl_setopt ($ vk_connect, CURLOPT_URL, $ api_url); curl_setopt ($ vk_connect, CURLOPT_RETURNTRANSFER, 1); // повернути результат, а не виводити curl_setopt ($ vk_connect, CURLOPT_TIMEOUT, 20); $ Return = curl_exec ($ vk_connect); curl_close ($ vk_connect); // закриваємо з'єднання return intval (str_replace (array ( 'VK.Share.count (1,', ');'), '', $ return)); }

Розбір по рядках.

Спосіб 2. Через WordPress HTTP API

Ну думаю тут ясно, що цей спосіб тільки для WordPress. А це означає, що код з великою часткою ймовірності відправиться в functions.php вашої поточної теми.

1 2 3 4 5 6 7 8 9 10 11 12 13 14 function get_vk_counts_wp ($ url, $ post_id) {$ cache_key = 'misha_shares_vk'. $ Post_id; $ Count = get_transient ($ cache_key); // спробуємо спочатку витягнути значення з кешу WP if ($ count === false) {$ response = wp_remote_get ( 'https://vk.com/share.php?act=count&index=1&url='. $ Url); $ Body = json_decode ($ response [ 'body']); $ Count = intval (str_replace (array ( 'VK.Share.count (1,', ');'), '', $ response [ 'body'])); set_transient ($ cache_key, $ count, 3600); // зберігаємо в кеш на годину} return $ count; }

• 2-5 і 11 - так як я не хочу, щоб підключення до VK API зайвий раз навантажувати сторінки мого сайту, то я Кешуються число репоста на годину.

Ну от і все. Я спеціально не став давати CSS стилі, щоб ви самі могли оформити кнопку, як забажаєте. Також я не забороняю використовувати дизайн кнопки як у мене на сайті.

Миша Рудрастих

Вперше познайомився з WordPress в 2009 році. З 2014 року мене можна зустріти на WordCamp - офіційної конфе по WordPress, іноді там виступаю. Також в даний час веду курси по WordPress в Epic Skills .

Якщо вам потрібна допомога з вашим сайтом або може навіть розробка з нуля - пишіть мені .