Instagram в материале Joomla 3

Тема в разделе "Интерактивные возможности", создана пользователем Kit_Solo, 31.03.2016.

Метки:
  1. Offline

    Kit_Solo Недавно здесь

    Регистрация:
    20.01.2016
    Сообщения:
    12
    Симпатии:
    1
    Пол:
    Мужской
    Всем привет! Появилась необходимость выложить пост из инстаграма на сайте Joomla 3.
    В редакторе материалов (TinyMCE,JCE) жму на source code, вставляю код

    Код (CODE):
    1. <blockquote class="instagram-media" data-instgrm-captioned data-instgrm-version="6" style=" background:#FFF; border:0; border-radius:3px; box-shadow:0 0 1px 0 rgba(0,0,0,0.5),0 1px 10px 0 rgba(0,0,0,0.15); margin: 1px; max-width:658px; padding:0; width:99.375%; width:-webkit-calc(100% - 2px); width:calc(100% - 2px);"><div style="padding:8px;"> <div style=" background:#F8F8F8; line-height:0; margin-top:40px; padding:50.0% 0; text-align:center; width:100%;"> <div style=" background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACwAAAAsCAMAAAApWqozAAAAGFBMVEUiIiI9PT0eHh4gIB4hIBkcHBwcHBwcHBydr+JQAAAACHRSTlMABA4YHyQsM5jtaMwAAADfSURBVDjL7ZVBEgMhCAQBAf//42xcNbpAqakcM0ftUmFAAIBE81IqBJdS3lS6zs3bIpB9WED3YYXFPmHRfT8sgyrCP1x8uEUxLMzNWElFOYCV6mHWWwMzdPEKHlhLw7NWJqkHc4uIZphavDzA2JPzUDsBZziNae2S6owH8xPmX8G7zzgKEOPUoYHvGz1TBCxMkd3kwNVbU0gKHkx+iZILf77IofhrY1nYFnB/lQPb79drWOyJVa/DAvg9B/rLB4cC+Nqgdz/TvBbBnr6GBReqn/nRmDgaQEej7WhonozjF+Y2I/fZou/qAAAAAElFTkSuQmCC); display:block; height:44px; margin:0 auto -44px; position:relative; top:-22px; width:44px;"></div></div> <p style=" margin:8px 0 0 0; padding:0 4px;"> <a href="https://www.instagram.com/p/BDlbA1HRjlh/" style=" color:#000; font-family:Arial,sans-serif; font-size:14px; font-style:normal; font-weight:normal; line-height:17px; text-decoration:none; word-wrap:break-word;" target="_blank">Мой новый альбом &#34;Джига&#34; почти готов!  Чуть позже я начну рассказывать о нем подробнее! А сейчас представляю вам одного из главных приглашенных гостей : @bastaakanoggano / Огромное уважение Василию!!! </a></p> <p style=" color:#c9c8cd; font-family:Arial,sans-serif; font-size:14px; line-height:17px; margin-bottom:0; margin-top:8px; overflow:hidden; padding:8px 0 7px; text-align:center; text-overflow:ellipsis; white-space:nowrap;">Фото опубликовано Джиган (@iamgeegun) <time style=" font-family:Arial,sans-serif; font-size:14px; line-height:17px;" datetime="2016-03-30T16:58:22+00:00">Мар 30 2016 в 9:58 PDT</time></p></div></blockquote>
    2. <script async defer src="//platform.instagram.com/en_US/embeds.js"></script>

    Сохраняю,но он вставился некорректно. Нет фото и еще некоторых элементов.
    Плагин Sourcerer не помог - выдал вообще текст.
    Фильтрация отключена, в том числе и в настройках плагинов.
    Подскажите, может кто сталкивался?

     
    Kit_Solo, 31.03.2016
    #1

  2. Наши спонсоры

     
    3. Лучший ответ:
    Сообщение #4 от 01.04.2016, автор CB9T
  3. CB9T
    Offline

    CB9T Преподаватель по J! Команда форума ⇒ Профи ⇐

    Регистрация:
    21.05.2010
    Сообщения:
    2 604
    Симпатии:
    322
    Пол:
    Мужской
    Просто выключить редактор и вставить код? вообще я бы под это дело сделал бы через nonumber snippets.

    пример был бы:

    {snippet instagramm-begin}ID_поста{snippet instagramm-end}
     
    CB9T, 01.04.2016
    #2
  4. Offline

    Kit_Solo Недавно здесь

    Регистрация:
    20.01.2016
    Сообщения:
    12
    Симпатии:
    1
    Пол:
    Мужской
    Т.е я должен в Snippets задать заголовок (в моем случае пусть будет Instagram),Идентификатор заготовки я пишу {instagram} а далее в редакторе,я так понимаю, мне нужно вставить код? Но какой? Не этот же,который я копировал. Что я должен сделать?
     
    Kit_Solo, 01.04.2016
    #3
  5. CB9T
    Offline

    CB9T Преподаватель по J! Команда форума ⇒ Профи ⇐

    Регистрация:
    21.05.2010
    Сообщения:
    2 604
    Симпатии:
    322
    Пол:
    Мужской
    Лучший ответ
    Это будет 3 объекта.

    1. Начало кода
    2. ID материала
    3. Конец кода


    Код (CODE):
    1. <blockquote class="instagram-media" data-instgrm-captioned data-instgrm-version="6" style=" background:#FFF; border:0; border-radius:3px; box-shadow:0 0 1px 0 rgba(0,0,0,0.5),0 1px 10px 0 rgba(0,0,0,0.15); margin: 1px; max-width:658px; padding:0; width:99.375%; width:-webkit-calc(100% - 2px); width:calc(100% - 2px);"><div style="padding:8px;"> <div style=" background:#F8F8F8; line-height:0; margin-top:40px; padding:50.0% 0; text-align:center; width:100%;"> <div style=" background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACwAAAAsCAMAAAApWqozAAAAGFBMVEUiIiI9PT0eHh4gIB4hIBkcHBwcHBwcHBydr+JQAAAACHRSTlMABA4YHyQsM5jtaMwAAADfSURBVDjL7ZVBEgMhCAQBAf//42xcNbpAqakcM0ftUmFAAIBE81IqBJdS3lS6zs3bIpB9WED3YYXFPmHRfT8sgyrCP1x8uEUxLMzNWElFOYCV6mHWWwMzdPEKHlhLw7NWJqkHc4uIZphavDzA2JPzUDsBZziNae2S6owH8xPmX8G7zzgKEOPUoYHvGz1TBCxMkd3kwNVbU0gKHkx+iZILf77IofhrY1nYFnB/lQPb79drWOyJVa/DAvg9B/rLB4cC+Nqgdz/TvBbBnr6GBReqn/nRmDgaQEej7WhonozjF+Y2I/fZou/qAAAAAElFTkSuQmCC); display:block; height:44px; margin:0 auto -44px; position:relative; top:-22px; width:44px;"></div></div> <p style=" margin:8px 0 0 0; padding:0 4px;"> <a href="https://www.instagram.com/p/BDoXfn3oPr7/" style=" color:#000; font-family:Arial,sans-serif; font-size:14px; font-style:normal; font-weight:normal; line-height:17px; text-decoration:none; word-wrap:break-word;" target="_blank">All is fine, I&#39;m still alive! Prepare new original creations for you now Will you be glad to see some new out-of-cosplay photos? #fantasy #fantasyphoto #photography #modeling #mermaid #model #modelworking #original #sea</a></p> <p style=" color:#c9c8cd; font-family:Arial,sans-serif; font-size:14px; line-height:17px; margin-bottom:0; margin-top:8px; overflow:hidden; padding:8px 0 7px; text-align:center; text-overflow:ellipsis; white-space:nowrap;">Фото опубликовано Mariya (@fenixfatalist) <time style=" font-family:Arial,sans-serif; font-size:14px; line-height:17px;" datetime="2016-03-31T20:25:21+00:00">Мар 31 2016 в 1:25 PDT</time></p></div></blockquote>
    2. <script async defer src="//platform.instagram.com/en_US/embeds.js"></script>


    Если убрать всякое... (хотя можно и оставить - будет вот так).

    https://jsfiddle.net/kqk7oLw5/

    Получаем код:

    Код (CODE):
    1. <blockquote class="instagram-media" data-instgrm-captioned data-instgrm-version="6"> <a href="https://www.instagram.com/p/BDoXfn3oPr7/" target="_blank"></a></blockquote>
    2. <script async defer src="//platform.instagram.com/en_US/embeds.js"></script>


    Далее дробим код:

    1-ая часть
    Код (CODE):
    1. <blockquote class="instagram-media" data-instgrm-captioned data-instgrm-version="6"> <a href="https://www.instagram.com/p/

    2-ая часть - тут ID будете ставить.
    Код (CODE):
    1. BDoXfn3oPr7

    3-ая часть
    Код (CODE):
    1. /" target="_blank"></a></blockquote>
    2. <script async defer src="//platform.instagram.com/en_US/embeds.js"></script>


    В итоге получите

    015103.png
     
    CB9T, 01.04.2016
    #4
  6. Offline

    Kit_Solo Недавно здесь

    Регистрация:
    20.01.2016
    Сообщения:
    12
    Симпатии:
    1
    Пол:
    Мужской
    Тоесть я копирую код и вставляю в редакторе snippets.А как мне раздробить код?И <script> все равно съедается
     
    Kit_Solo, 01.04.2016
    #5
  7. CB9T
    Offline

    CB9T Преподаватель по J! Команда форума ⇒ Профи ⇐

    Регистрация:
    21.05.2010
    Сообщения:
    2 604
    Симпатии:
    322
    Пол:
    Мужской
    Все делать в режиме без редактора.

    Пример сниппетов я привел выше.

    В итоге вы сможете:

    {snippet instagramm-begin}ID_posta{snippet instagramm-end}

    вставлять посты инсты.
     
    CB9T, 01.04.2016
    #6
  8. Offline

    Kit_Solo Недавно здесь

    Регистрация:
    20.01.2016
    Сообщения:
    12
    Симпатии:
    1
    Пол:
    Мужской
    @CB9T
    Я прошу прощения, в режиме "без редактора" мне просто нужно вставить это
    и нажать сохранить.
    Далее в посте просто прописать теги и между ними вставить ID поста.
    Проще говоря,я не понял,как мне раздробить код.
     
    Kit_Solo, 01.04.2016
    #7
  9. CB9T
    Offline

    CB9T Преподаватель по J! Команда форума ⇒ Профи ⇐

    Регистрация:
    21.05.2010
    Сообщения:
    2 604
    Симпатии:
    322
    Пол:
    Мужской
    не не... по сути в режиме редактора кода - Вы можете постить любой код.

    Я говорю же об автоматизации - т.е. сделать сниппеты (заготовки) с помощью которых будет легко пользоваться.

    Код я на 3 части поделил выше: https://joomla-support.ru/thread/46914/#post-186319

    Вам требуется - установить сниппетс
    сделать 2 сниппета (или три) - с приведеном кодом выше.

    И просто эту конструкцию вставлять куда нужно.
     
    CB9T, 01.04.2016
    #8
  10. Offline

    Kit_Solo Недавно здесь

    Регистрация:
    20.01.2016
    Сообщения:
    12
    Симпатии:
    1
    Пол:
    Мужской
    @CB9T Понял,нужно 2 сниппета))))
     
    Kit_Solo, 01.04.2016
    #9
  11. CB9T
    Offline

    CB9T Преподаватель по J! Команда форума ⇒ Профи ⇐

    Регистрация:
    21.05.2010
    Сообщения:
    2 604
    Симпатии:
    322
    Пол:
    Мужской
    или для комфорта третий - который совмещает в себе 2 других - просто для удобства вставки)
     
    CB9T, 01.04.2016
    #10
  12. Offline

    Kit_Solo Недавно здесь

    Регистрация:
    20.01.2016
    Сообщения:
    12
    Симпатии:
    1
    Пол:
    Мужской
    Kit_Solo, 01.04.2016
    #11
  13. CB9T
    Offline

    CB9T Преподаватель по J! Команда форума ⇒ Профи ⇐

    Регистрация:
    21.05.2010
    Сообщения:
    2 604
    Симпатии:
    322
    Пол:
    Мужской
    Пашет пашет - просто забыл сказать - уберите HTML комментарии в плагине, поэтому не совсем пашет)

    013947.png
     
    CB9T, 01.04.2016
    #12
  14. Offline

    Kit_Solo Недавно здесь

    Регистрация:
    20.01.2016
    Сообщения:
    12
    Симпатии:
    1
    Пол:
    Мужской
    @CB9T Отключил,но результат тот же. Нет картинки
     
    Kit_Solo, 01.04.2016
    #13
  15. CB9T
    Offline

    CB9T Преподаватель по J! Команда форума ⇒ Профи ⇐

    Регистрация:
    21.05.2010
    Сообщения:
    2 604
    Симпатии:
    322
    Пол:
    Мужской
    014607.png

    open your eyes :)
     
    CB9T, 01.04.2016
    #14
  16. Offline

    Kit_Solo Недавно здесь

    Регистрация:
    20.01.2016
    Сообщения:
    12
    Симпатии:
    1
    Пол:
    Мужской
    @CB9T Инста заблочена на работе :DDD Спасибо большое!!!!)))
     
    Kit_Solo, 01.04.2016
    #15
    CB9T нравится это.
  17. OlegK
    Offline

    OlegK Russian Joomla! Team Команда форума ⇒ Профи ⇐

    Регистрация:
    17.01.2011
    Сообщения:
    7 812
    Симпатии:
    771
    Пол:
    Мужской
    Я перенесу тему и закреплю верху. Нет возражений ?
     
    OlegK, 02.04.2016
    #16
    CB9T нравится это.
  18. CB9T
    Offline

    CB9T Преподаватель по J! Команда форума ⇒ Профи ⇐

    Регистрация:
    21.05.2010
    Сообщения:
    2 604
    Симпатии:
    322
    Пол:
    Мужской
    конечно ;)
     
    CB9T, 02.04.2016
    #17
< Instagram в материале Joomla 3 | Instagram в материале Joomla 3 >

Поделиться этой страницей

Загрузка...