За последние 24 часа нас посетили 21554 программиста и 1020 роботов. Сейчас ищет 631 программист ...

Кнопки поделится

Тема в разделе "JavaScript и AJAX", создана пользователем Виктор К., 7 июн 2016.

  1. Виктор К.

    Виктор К. Новичок

    С нами с:
    1 апр 2016
    Сообщения:
    139
    Симпатии:
    6
    Адрес:
    Украина
    Здраствуйте. Сделал на сайте кнопки поделится, использовал этот скрипт(может кому пригодится):
    Код (Text):
    1. Share = {
    2.     /**
    3.      * Показать пользователю диалог шаринга в сооветствии с опциями
    4.      * Метод для использования в inline-js в ссылках
    5.      * При блокировке всплывающего окна подставит нужный адрес и ползволит браузеру перейти по нему
    6.      *
    7.      * @example <a href="" onclick="return share.go(this)">like+</a>
    8.      *
    9.      * @param Object _element - элемент DOM, для которого
    10.      * @param Object _options - опции, все необязательны
    11.      */
    12.     go: function(_element, _options) {
    13.         var
    14.             self = Share,
    15.             options = $.extend(
    16.                 {
    17.                     type:       'vk',    // тип соцсети
    18.                     url:        location.href,  // какую ссылку шарим
    19.                     count_url:  location.href,  // для какой ссылки крутим счётчик
    20.                     title:      document.title, // заголовок шаринга
    21.                     image:        '',             // картинка шаринга
    22.                     text:       '',             // текст шаринга
    23.                 },
    24.                 $(_element).data(), // Если параметры заданы в data, то читаем их
    25.                 _options            // Параметры из вызова метода имеют наивысший приоритет
    26.             );
    27.  
    28.         if (self.popup(link = self[options.type](options)) === null) {
    29.             // Если не удалось открыть попап
    30.             if ( $(_element).is('a') ) {
    31.                 // Если это <a>, то подставляем адрес и просим браузер продолжить переход по ссылке
    32.                 $(_element).prop('href', link);
    33.                 return true;
    34.             }
    35.             else {
    36.                 // Если это не <a>, то пытаемся перейти по адресу
    37.                 location.href = link;
    38.                 return false;
    39.             }
    40.         }
    41.         else {
    42.             // Попап успешно открыт, просим браузер не продолжать обработку
    43.             return false;
    44.         }
    45.     },
    46.  
    47.     // ВКонтакте
    48.     vk: function(_options) {
    49.         var options = $.extend({
    50.                 url:    location.href,
    51.                 title:  document.title,
    52.                 image:  '',
    53.                 text:   '',
    54.             }, _options);
    55.  
    56.         return 'http://vkontakte.ru/share.php?'
    57.             + 'url='          + encodeURIComponent(options.url)
    58.             + '&title='       + encodeURIComponent(options.title)
    59.             + '&description=' + encodeURIComponent(options.text)
    60.             + '&image='       + encodeURIComponent(options.image)
    61.             + '&noparse=true';
    62.     },
    63.  
    64.     // Facebook
    65.     fb: function(_options) {
    66.         var options = $.extend({
    67.                 url:    location.href,
    68.                 title:  document.title,
    69.                 image:  '',
    70.                 text:   '',
    71.             }, _options);
    72.  
    73.         return 'http://www.facebook.com/sharer.php?s=100'
    74.             + '&p[title]='     + encodeURIComponent(options.title)
    75.             + '&p[summary]='   + encodeURIComponent(options.text)
    76.             + '&p[url]='       + encodeURIComponent(options.url)
    77.             + '&p[images][0]=' + encodeURIComponent(options.image);
    78.     },
    79.  
    80.     // Твиттер
    81.     tw: function(_options) {
    82.         var options = $.extend({
    83.                 url:        location.href,
    84.                 count_url:  location.href,
    85.                 title:      document.title,
    86.             }, _options);
    87.  
    88.         return 'http://twitter.com/share?'
    89.             + 'text='      + encodeURIComponent(options.title)
    90.             + '&url='      + encodeURIComponent(options.url)
    91.             + '&counturl=' + encodeURIComponent(options.count_url);
    92.     },
    93.  
    94. // Google+
    95.     gg: function (_options) {
    96.         var options = $.extend({
    97.             url: location.href        
    98.         }, _options);
    99.  
    100.         return 'https://plus.google.com/share?url='
    101.             + encodeURIComponent(options.url);
    102.     },
    103.  
    104.  
    105.     // Открыть окно шаринга
    106.     popup: function(url) {
    107.         return window.open(url,'','toolbar=0,status=0,scrollbars=1,width=626,height=436');
    108.     }
    109. }
    Проблема в том, что соцсети сами выбирают картинку для шаринга. Мне же необходимо подставить картинку, адрес которой находится в php переменной $Row['thumbnail'].

    Как это возможно сделать,? Скорее всего это очень простая задача, но очень прошу помочь, так как Javascript практически не знаю.
     
    #1 Виктор К., 7 июн 2016
    Последнее редактирование: 7 июн 2016
    TeslaFeo нравится это.
  2. denis01

    denis01 Суперстар
    Команда форума Модератор

    С нами с:
    9 дек 2014
    Сообщения:
    12.230
    Симпатии:
    1.715
    Адрес:
    Молдова, г.Кишинёв
    Вроде картинку надо указывать через http://ogp.me/
     
  3. Виктор К.

    Виктор К. Новичок

    С нами с:
    1 апр 2016
    Сообщения:
    139
    Симпатии:
    6
    Адрес:
    Украина
    Сделал через OGP, все равно случайную фотографию выбирает.
     
  4. denis01

    denis01 Суперстар
    Команда форума Модератор

    С нами с:
    9 дек 2014
    Сообщения:
    12.230
    Симпатии:
    1.715
    Адрес:
    Молдова, г.Кишинёв
    Ты пробуй на новых страницах, он те что ты уже ему указывал мог закэшировать на время.
    Ещё попробуй определять по USER AGENT бота соц сетей и ему показывать только одно фото.
     
    Виктор К. нравится это.
  5. Виктор К.

    Виктор К. Новичок

    С нами с:
    1 апр 2016
    Сообщения:
    139
    Симпатии:
    6
    Адрес:
    Украина
    Да нет, даже в другом браузере:(
    Причем ссылка формируется нормально, а изображение все равно одно и тоже на разных страницах выбирается.
    Код (Text):
    1. <meta property="og:image" content="http://site.com<?php echo $Row['thumbnail'] ;?>" />
     
  6. denis01

    denis01 Суперстар
    Команда форума Модератор

    С нами с:
    9 дек 2014
    Сообщения:
    12.230
    Симпатии:
    1.715
    Адрес:
    Молдова, г.Кишинёв
    Это пробуй

    может на одной странице разные изображения, а не на разных страницах?