Работа социальных кнопок, требуется помощь.

[slo_nik]

Добрый вечер.
На сайте требуется разместить блок социальных кнопок, самые популярные сети(facebook, google+, twitter, pinterest).
Перепробовал несколько готовых решений, от "Яндекс"(https://tech.yandex.ru/share/), "Pluso"(https://share.pluso.ru/) и парочки готовых плагинов для framework yii.

Но меня не устроила работа данных решений. Нет возможности менять изображение, которое крепится к посту в соц. сети. Прочитал в нете, что соц. сеть кэширует изображение и данные о сайте и нет возможности изменить эту информацию. Можно изменить только в том случае, если разные страницы(разные адреса) одного и того же сайта расшариваются в соц. сети.

Мне надо установить share кнопки на одной странице, где расположен слайдер с изображениями и сделать возможным расшаривать отдельно взятое изображение.

В конкретном случае, для "Pluso" сделал:

1) Прописал meta теги.

2) Разместил js код на странице

 

Выглядит это так:

 

HTML

  <meta property="og:title" content="Название сайта" />  <meta property="og:description" content="Описание, лучший художник на свете!!!" />  <meta property="og:url" content="http://address_site/photoyii" />  <meta property="og:image" content="http://address_site/photoyii/image/download/75" />  <meta name="title" content="Название сайта" />  <meta name="description" content="Описание, лучший художник на свете!!!" />  <link rel="image_src" href="http://address_site/photoyii/image/download/75" />

JS

<script type="text/javascript">(function() {  if (window.pluso)if (typeof window.pluso.start == "function") return;  if (window.ifpluso==undefined) { window.ifpluso = 1;    var d = document, s = d.createElement('script'), g = 'getElementsByTagName';    s.type = 'text/javascript'; s.charset='UTF-8'; s.async = true;    s.src = ('https:' == window.location.protocol ? 'https' : 'http')  + '://share.pluso.ru/pluso-like.js';    var h=d[g]('body')[0];    h.appendChild(s);  }})();</script><div class="pluso" data-background="#ebebeb" data-options="medium,round,line,horizontal,nocounter,theme=04" data-services="facebook,pinterest,google,twitter"></div>

В независимости от того, руками или при помощи jquery, менял значение атрибутов для <meta property="og:image"> и <link rel="image_src">, изображение оставалось одним и тем же.

 

Как можно обойти эту проблему? Что бы находясь на одной и той же странице можно было "делиться" изображением в соц. сетях.

[Great Rash]

Изображения для шаринга и правда кешируются соц.сетью. Вам нужно сбросить кеш. Например для фейсбука. В каждой социальной сети кеш сбрасывается по-разному (если сбрасывается вообще). Но даже если он не сбрасывается руками, то со временем он обязательно протухнет. Я рекомендую вам начать с фейсбука (и.к. там он 100% сбрасывается), таким образом вы точно поймёте что проблема в кеше, а не где-то ещё.

[slo_nik]

Изображения для шаринга и правда кешируются соц.сетью. Вам нужно сбросить кеш. Например для фейсбука. В каждой социальной сети кеш сбрасывается по-разному (если сбрасывается вообще). Но даже если он не сбрасывается руками, то со временем он обязательно протухнет. Я рекомендую вам начать с фейсбука (и.к. там он 100% сбрасывается), таким образом вы точно поймёте что проблема в кеше, а не где-то ещё.

 

Получается, что нет возможности при помощи кнопки "поделиться" для какой-либо сети шарить разные изображения?

 

P.S. Ваша ссылка не помогла((( Требует авторизации, а не зарегистрирован в facebook)))

Edited November 20, 2015 by slo_nik

[Great Rash]

Получается, что нет возможности при помощи кнопки "поделиться" для какой-либо сети шарить разные изображения?

Такая возможность есть, но её надо ручками реализовывать, т.к. у каждой соц. сети свой формат данных с которыми они работают. Open Graph хорош тем, что пытается унифицировать эти данные, но минус в том, что на странице может быть лишь один тег <meta property="og:image" />. Поэтому, если вы хотите шарить разные картинки для разных соцсетей, вам придётся написать свой скрипт для шаринга.

P.S. Ваша ссылка не помогла((( Требует авторизации, а не зарегистрирован в facebook)))

Ну так зарегистрируйтесь, иначе кеш не сбросить.

[slo_nik]

но минус в том, что на странице может быть лишь один тег

 

 

Изображений много, тег один, это понятно...

А если при помощи js менять значение meta тега, чтобы разные люди, каждый кликнув по своей, выбранной картинке, расшаривали именно её?

 

 

 

Поэтому, если вы хотите шарить разные картинки для разных соцсетей, вам придётся написать свой скрипт для шаринга.

 

Не только для разных сетей, а и для одной и той же, но разные картинки, дать возможность расшарить несколько изображений одним и тем же посетителем сайта для выбранной соц. сети. Вот это главное, что надо сделать. Возможно ли такое реализовать или нет? Или только одно изображение с сайта?

Edited November 20, 2015 by slo_nik

[Great Rash]

А если при помощи js менять значение meta тега, чтобы разные люди, каждый кликнув по своей, выбранной картинке, расшаривали именно её?

Так сделать нельзя. Точнее можно, но сама соц. сеть должна поддерживать такой функционал. На сколько я знаю например Facebook, Однокласники, Вконтакте подобный фунционал не поддерживают.

 

Не только для разных сетей, а и для одной и той же, но разные картинки, дать возможность расшарить несколько изображений одним и тем же посетителем сайта для выбранной соц. сети.

Нельзя к сожалению. Если не ошибаюсь (нужно уточнять) можно шарить разные картинки для разных страниц сайта, но чтоб шарить разные картинки для одной страницы - нет.

[slo_nik]

Добрый вечер.

Прошло достаточно времени, но чтобы не создавать новую тему продолжу здесь.

Поискал немного информации, посмотрел другие сайты, почитал документацию. Дело немного сдвинулось.

Получилось сделать для fb и vk шаринг разных изображений с одной страницы, через get параметр передаю путь к изображению, url к изображению формируется динамически, в зависимости от того, какая картинка выбрана.

// для fb
<a target="_blank" title="Опубликовать в Facebook" id="fb" href="https://www.facebook.com/sharer/sharer.php?u=' + encodeURIComponent(murl) + '&picture=' + url + '"></a>

// для vk
'<a target="_blank" title="Опубликовать в ВК" id="vk" href="http://vk.com/share.php?url=' + encodeURIComponent(murl) + '&image=' + url + '"></a>

вот рабочий пример

Но надо сделать для twitter и для google+.

Для этих сетей не получается подставить динамическое изображение. Нашёл пример в сети, на этом сайте как раз то, что мне нужно. С одной и той же страницы можно расшарить разные изображения для twitter и google+. 

Самостоятельно я не смог разобраться, как там всё работает.

Если кто-то может помочь, пожалуйста, подскажите, как это работает?

Заранее благодарю.

Edited March 30, 2016 by slo_nik

[ishurgaya]

вот этот Javascript используется для шаринга на adme.ru :

<script type="text/javascript" src="//iface.adme.ru/assets/js-common-ab74d1fdab35ef7f1acb0183bfaf3ad7aec710d1.js"></script>

[ishurgaya]

вот кусок кода по которому видно какие должны быть ссылки и какие параметры должны содержать:

        vk: function(data) {
            data = this.getData(data);
            url = 'http://vk.com/share.php?';
            url += 'url=' + encodeURIComponent(data.url);
            url += '&title=' + encodeURIComponent(data.title);
            url += '&description=' + encodeURIComponent(data.description);
            url += '&image=' + encodeURIComponent(data.image);
            url += '&noparse=true';
            this.popup(url);
        },
        od: function(data) {
            data = this.getData(data);
            url = 'http://www.odnoklassniki.ru/dk?st.cmd=addShare&st.s=1';
            url += '&st.comments=' + encodeURIComponent(data.description);
            url += '&st._surl=' + encodeURIComponent(data.url);
            this.popup(url);
        },
        pin: function(data) {
            data = this.getData(data);
            url = 'https://www.pinterest.com/pin/create/button/';
            url += '?url=' + encodeURIComponent(data.url);
            url += '&media=' + encodeURIComponent(data.image);
            url += '&description=' + encodeURIComponent(data.title);
            this.popup(url);
        },
        fb: function(data) {
            data = this.getData(data);
            if ($('body').hasClass('mobile')) {
                FB.ui({
                    method: 'share',
                    href: data.url
                }, function(response) {});
            } else {
                url = 'http://www.facebook.com/sharer.php?s=100';
                url += '&p[title]=' + encodeURIComponent(data.title);
                url += '&p[summary]=' + encodeURIComponent(data.description);
                url += '&p[url]=' + encodeURIComponent(data.url);
                url += '&p[images][0]=' + encodeURIComponent(data.image);
                this.popup(url);
            }
        },
        tw: function(data) {
            data = this.getData(data);
            url = 'http://twitter.com/share?';
            url += 'text=' + encodeURIComponent(data.twitterTitle ? data.twitterTitle : data.title);
            url += '&url=' + encodeURIComponent(data.url);
            url += '&via=' + AdMeCommon.Config.get('twitterAccount');
            url += '&counturl=' + encodeURIComponent(data.url);
            this.popup(url);
        },
        ml: function(data) {
            data = this.getData(data);
            url = 'http://connect.mail.ru/share?';
            url += 'url=' + encodeURIComponent(data.url);
            url += '&title=' + encodeURIComponent(data.title);
            url += '&description=' + encodeURIComponent(data.description);
            url += '&imageurl=' + encodeURIComponent(data.image);
            this.popup(url);
        },
        gl: function(data) {
            data = this.getData(data);
            url = 'https://plus.google.com/share?hl=ru';
            url += '&url=' + encodeURIComponent(data.url);
            this.popup(url);
        },