Comparte con amigos de Yandex. Botones sociales Compartir - Escribirnos Añadir a compartir 5 más

Del autor: Saludos. Hoy en día, las redes sociales se han desarrollado a un nivel así que más de 3 mil millones de personas están registradas en ellas. Potencialmente, es una audiencia muy poderosa, por lo que hoy le diré cómo agregar botones de redes sociales al sitio.

Situación a sitio web de WordPress

Comenzará con el hecho de que más manera simpleSi tiene WordPress, es fácil instalar algún complemento para este negocio. ¿Qué? Por ejemplo, usé Juiz Social Post Sharer. En general, simplemente ingrese la palabra social palabra en la búsqueda de complementos y mire lo que hay allí. La ventaja es aquí solo que probablemente no tengas que configurar nada.

Yandex también desarrolló una página donde puedes configurar y poner los botones. En esta página puedes elegir servicios requeridos (y unos 25 de ellos). A la derecha puedes elegir apariencia Cuadra. Puede ser contadores que mostrarán cuántas veces los usuarios han sido presionados. Esto, a su vez, le ayudará a rastrear si el material es útil para los lectores.

JavaScript. Comienzo rápido

Naturalmente, usted no necesita usar las tres opciones, alguien es mejor. Aunque vi los sitios donde el bloque era y al principio, y al final de la página.

Ahora necesita encontrar un archivo con un código que muestre artículos. En WordPress, por ejemplo, es comúnmente llamado única.php o de una manera similar. Por lo tanto, si necesita poner un bloque con botones después del artículo, buscando la línea the_content. Está detrás de él que se puede insertar. Usted lo ayudará, si el desarrollador de su plantilla hizo comentarios en el código.

Editar archivos del sitio puede ser de alguna manera. Por ejemplo, para hacerlo directamente a través del intercambiador del motor (Apariencia - Editor). En este caso, el código no está resaltado, por lo que no es tan conveniente orientarlo. Otro método - a través de FTP. Conéctese al sitio con el cliente FTP, vaya a WP-Content - Temas. Aquí necesitas encontrar la plantilla que está activa en ti en este momento. Vamos a ello y encontramos el mismo single.php o estamos buscando algo similar por el título.

En el archivo de código en sí, encuentre la línea the_content buscando (Ctrl + F). Inserte en algún lugar después de que este código.

Comentarios Es que en esta captura de pantalla de arriba se resalta en verde. Como puede ver, el desarrollador indicó claramente que el texto del propio artículo se muestra en este lugar. Esto es genial, simplemente inserte el código inmediatamente después del artículo y obtenga el resultado deseado.

Botones de Pluso.

JavaScript. Comienzo rápido

Explora los fundamentos de JavaScript en ejemplo práctico En la creación de una aplicación web

Puede elegir el estilo de los botones, personalizar su fondo, posición y tamaño. También puede seleccionar iconos con un medidor incorporado. Y otra ventaja de los botones de PlusO es su apariencia increíble y la capacidad de incrustarlos en casi cualquier diseño.

Cuando todo está configurado, simplemente copie el código e insértelo en el lugar donde queremos ver el bloque correspondiente.

Otra opción - Share42

Si las opciones anteriores no les gustaron algo, hay otra forma en que colocar los botones de las redes sociales al sitio. Este es un servicio de share42.com. Nombrado, probablemente porque en el momento de la creación hubo 42 botones de servicios sociales, aunque son 43 en este momento.

No describiré el proceso en detalle, porque todo ya está decorado en el sitio como instrucciones paso a paso. No puede cambiar estos iconos de diseño, sino solo tamaño. Sin embargo, se ven los pulgares hacia arriba.

Los iconos que necesitas elegir haciendo clic en ellos con el mouse. Por separado, quiero notar la presencia de tales características interesantes, como agregar a su navegador favorito, enlace a RSS y el botón "UP".

A continuación, puede elegir el tipo de panel: horizontal o vertical? Y si se selecciona el segundo, el número de botones puede ser limitado. Recomiendo la codificación para dejar UTF-8. También puede agregar el icono del propio servicio al conjunto de botones para que los usuarios de su página puedan cambiarlo e instalar estos botones también.

Además, si planea agregar un ícono RSS, debe especificar la dirección de su FIDDA, y si desea mostrar el número de clics en los botones, se deben marcar dos garrapatas recientes.

A continuación se presentan 2 botones. El primero le permite ver cómo se verá los botones sociales que configuró. Usando el segundo script de descarga. Necesita ser descargado a través de FTP a su sitio en carpeta raíz.

El siguiente paso, especifique la ruta a esta carpeta en la página de servicio. A menudo, es suficiente para reemplazar el sitio.com a su nombre de dominio. Todo queda por insertar el código seleccionando CMS antes de esto, que ejecuta el recurso. Dónde insertar el código que debe entender, espero.

No tengo ninguna duda de que todavía hay un par de servicios normales, donde puede hacer botones sociales, y simplemente hay muchos scripts y complementos que los agregan. Hoy te enumeré lo mejor, en mi opinión, opciones.

Bueno, hoy aprendimos a agregar botones a las redes y servicios sociales a su proyecto de Internet. Ahora tuyo materiales útiles Se puede distribuir automáticamente en las redes sociales a sus lectores agradecidos. Y lo tengo todo en él.

JavaScript. Comienzo rápido

Explore los conceptos básicos de JavaScript en un ejemplo práctico de la creación de una aplicación web

FriendFeed - Agregador de información recolectado de redes sociales, blogs, microblogging, que funciona en tiempo real. ¡Con FriendFeed, puedes aprender y discutir materiales interesantes que encontrarán a sus amigos en Internet!

SurfingBird es un servicio que ofrece el contenido más interesante en Internet. Para hacer esto, debe registrarse, especifique sus intereses, y a su vez este servicio Ofrecerá fotos interesantes, videos, notas dependiendo de los intereses especificados. ¡Un servicio interesante, será necesario familiarizarse con más detalle con él!

Estimados lectores de mi blog, ¿hay alguna cuenta en los últimos cuatro servicios presentados? Me interesé en mí, definitivamente me registraré!

Personalmente, elegí la primera opción llamada contadores. Mostrará la cantidad de recomendaciones de la publicación, en otras palabras, cuántas veces compartieron una referencia a la publicación. Después de seleccionar la opción de visualización, deberá copiar el código que se requerirá que se colocará en el blog.

En mi caso (en vista del hecho de que elegí la pantalla "Contadores"), el código resultó ser así:

Contenido: este es el texto de la publicación.

Pero si simplemente organiza el código propuesto, entonces la siguiente pantalla será:

Yashare-Auto-init (
Margen: 10px Auto;
Text-alinec: Centro;
}

Donde Yashare-Auto-init es una clase que se agregó con el código. Margen: 10px Auto-sangría horizontal y vertical, respectivamente, y alineado de texto: el centro es la ubicación del objeto en el centro.

El desarrollo del blog está ganando impulso, la apariencia está cambiando y mejorando, el blog se llena gradualmente con contenido interesante, le aconsejo que se suscriba al blog para mantenerse al tanto de todos los cambios y actualizaciones de blog.

Antes de profundizar en la codificación, veamos y preste atención a los recursos que ya proporcionamos web global. Por cierto, consideraremos los dos más populares.

Otro servicio digno de nuestra atención, es el mismo constructor simple, solo más botones con servicios y redes son mucho más grandes, algunos de los cuales confesan, lo vi por primera vez. La principal diferencia de yandex.technologies: obtenemos un script totalmente generado que se trabajará no nublado, sino directamente en nuestro servidor.

Parecería que si hay soluciones tan maravillosas para cualquiera y en la cabeza no serán "para inventar una bicicleta" otra vez? Pero no, escrito por alguien, el guión es bueno, así que, por lo que somos demasiado perezosos para molestarse por encima de ella. Por supuesto, funcionará regularmente y realizará sus funciones, pero es una solución universal escrita para la masa total de sitios, es decir. No tiene en cuenta nuestras pequeñas necesidades y convenciones personales.

Primero: el diseño de los botones es en realidad hierro. Sí, es reconocible y proporcionado por las propias redes sociales, pero solo nuestras necesidades no corresponden. Bueno, el área del borde está redondeada, y el diseño de nuestro sitio requiere que el botón sea cuadrado, qué hacer? - ¡Toma Sprite y Redraw! Quién lo intentó, sabe: el caso es ingrato: el reemplazo de un botón está lleno de cinco-seis muestras "correctamente" para colocarlo en spray. ¿Y esto es solo un reemplazo de uno / varios botones, y si el sitio en el estilo gótico y todos los botones se necesitan oscuros?

En segundo lugar: en la confiabilidad de Yandex, no es necesario dudar, pero los botones, a diferencia del contador del medidor, por alguna razón, se carga con fuerza, y rara vez se asemeja al contenido principal de la página. Esto es especialmente notable con una buena conexión de alta velocidad cuando la página vuela en realidad instantáneamente, y tiene varios bloques con botones.

En tercer lugar: para la prueba, genere el script en Share24 - es grande. ¿Es todo desde las líneas siempre que necesitemos tanto? - No creo.

Ahora vamos a pasar al script de escritura en sí, compartirá tres partes: HTML, CSS y, de hecho, el código en sí mismo escrito en JavaScript. Además, seré acostumbrado a la conveniencia de la biblioteca de jquery.

Conecte todos los archivos necesarios:

Ahora agregue el script al archivo share.js, se verá así:

Var share \u003d (Twitter: Función ($ esto) (var data \u003d share.data ($ esta); if (data) (var url \u003d "http://twitter.com/share?"; Url + \u003d "texto \u003d "+ Encodeuricomponent (datos.text); url + \u003d" & url \u003d "+ encodeuricomponent (data.url); url + \u003d" & hashtags \u003d "+" "; url + \u003d" & condunturl \u003d "+ encodeuricomponent (datos. URL); compartir.popup (URL);); devolución falsa;), vk: función ($ esto) (var data \u003d share.data ($ esta); if (datos) (var url \u003d "http: / vkontakte .ru / share.php? "; url + \u003d" url \u003d "+ encodeuricomponent (datos.url); url + \u003d" & title \u003d "(! Lang: + Encodeuricomponent (Data.Title); URL + \u003d"&description=" + encodeURIComponent(data.text); url += "&image=" + encodeURIComponent(data.img); url += "&noparse=true"; share.popup(url); }; return false; }, facebook: function($this){ var data = share.data($this); if(data){ var url = "http://www.facebook.com/sharer.php?s=100"; url += "&p=" + encodeURIComponent(data.title); url += "&p=" + encodeURIComponent(data.text); url += "&p=" + encodeURIComponent(data.url); url += "&p=" + encodeURIComponent(data.img); share.popup(url); }; return false; }, data: function($this){ if($this){ return $.parseJSON($this.parent("div").attr("data-share-data")); }; return false; }, popup: function(url){ window.open(url, "", "toolbar=0, status=0, width=626, height=436"); return false; } }; !}

Añadir Markup a la página:

La estructura es bastante simple, a saber, la envoltura con la clase de acciones, sigue el DIV con el atributo de los datos compartidos de datos, que se mencionó anteriormente. La cadena está formada a partir de cuatro parámetros con sus valores.

• uRL - Dirección que compartimos;
• img: imagen, si no es necesario especificar una cadena vacía;
• título - título de la página;
• texto - La descripción que necesita.

Dentro del div es los botones con un evento Onclick en ellos. Haga clic en Se le llamará uno de los métodos descritos anteriormente.

Sólo permanece para dar los botones de la vista humana y agregar CSS:

Compartir (color de fondo: #ecec; Pantalla: bloque en línea; relleno: 7px 5px;) .Share DIV: Después (contenido: "; Pantalla: Bloque; Borde: Ambos; Altura: 0;) .Share DIV: Primero - Niño (margen-izquierda: 0;) .twitter .twitter, .share .vk, .share .facebook (share.png); margen-izquierda: 7px; borde-borde: 3px; altura: 24px; Ancho: 24px; flotador : Izquierda; Cursor: Puntero;) .Share .Twitter (color de fondo: # 00cas; Posición de fondo: 0 -61px;) .Share .Twitter: Hover (Fondo-color: # 008Abe;) .Chare .vk (fondo -Color: # 48729E; Posición de fondo: 0 -32px;) .Share .vk: Hover (fondo de fondo: # 3A5B7E;) .Share .facebook (fondo de fondo: # 3C5A98; Fondo -posición: 0 0;) .Share .facebook: Hover (color de fondo: # 30487a;)

Como resultado, después de agregar botones CSS para obtener un tipo:

En esta escritura del script, en el ejemplo, utilicé solo tres redes sociales, si necesita conectar a otros, no será mucho dificultad. Para hacer esto, agregue un nuevo método al objeto de acciones, sin olvidar registrarse también, además, HTML y CSS. Enlaces para los cuales se puede obtener el mensaje de repost en la red social de dos maneras:

• Aproveche la API de la red social, que no siempre ayuda;
• Para identificar de un servicio similar utilizando el Firebug u otra herramienta para el desarrollador web.

En contacto con

No es tanto en la expansión de la lista de lo que se puede transmitir a nadie. Actualmente, cubre casi todos los tipos de datos interesados \u200b\u200ben el promedio. propietario iPhone. o iPad. Es decir, excepto correo electrónico, fotos, videos y música, puede transmitir coordenadas de navegación, listas de contactos y direcciones, referencias a los recursos temáticos y archivos específicos En las "nubes", las notas multimedia cortas creadas por medio de mensajeros y mucho más. Es correcto formular el pensamiento así: cuando aparece. nuevo servicioUsando su formato de datos, entonces tiene que resaltar un lugar en el sistema, pero hasta ahora todo está equilibrado.

Sin embargo, Apple entiende que el mundo de las aplicaciones de iOS se desarrollará y, por lo tanto, la ocurrencia de tales principiantes no estándar es la cuestión del tiempo. Probablemente, Kupertino decidió deshacerse de cargas adicionales e instruir a los autores de las propias aplicaciones para trabajar en la implementación de las funciones del "Compartir". Un requisito rígido para concluir un acuerdo con Apple se mantuvo en el pasado, las API fueron tomadas a las API, Enthusiasts: innovadores. Es potencialmente una dirección de trabajo prometedora para los creadores de programas orientados socialmente, pero también la responsabilidad del resultado es también su preocupación.

La excepción se hace solo para productos propios de la empresa, como Correo, Mensajes, Acceso general A la foto. - Siempre permanecerán activos. Sin embargo, como ahora se trata de Bette, esto y otras innovaciones aún pueden cambiar en septiembre.

La herramienta de historias en Instagram apareció relativamente recientemente, pero ya logró conquistar el reconocimiento como entre los bloggers y entre ellos. El storiz se encuentra en la parte superior, por encima de la cinta principal, por lo que se ven con más frecuencia. El enlace publicado en la historia de Instagram le permite enviar a un usuario a un sitio web u otra página en la red social. Gracias a esto puedes recoger tráfico adicional Al sitio o en su blog, y también: asigne la historia contra el fondo de los demás.

2 maneras Añadir un enlace en la historia Instagram

Después de un cierto número de suscriptores (más de 10k)

La función de agregar una referencia a las historias utilizadas para estar disponibles verificadas o "elegidas": cuentas de negocios aleatorias. Hoy en día, todas las cuentas comerciales cuyos suscriptores superan a las 10.000 personas pueden agregar en la red social.

Para agregar un enlace, siga un algoritmo simple:

1. Haga clic en el icono Agregar nueva historia - Se encuentra en la parte superior, en el lado izquierdo de la pantalla, junto a las historias de usuarios publicadas.
2. Agregue una foto o video desde la galería, o tome una instantánea o un video corto usando la cámara.
3. Haga clic en el icono de enlaces en la esquina superior derecha. Abrirá el campo para editar o agregar un enlace.

Recuerde que muchos usuarios no saben cómo moverse en el enlace en la historia publicada. Empújelos a la acción de destino: agregue la llamada en una foto o video. Saltar en el enlace para aprender algo interesante. Por ejemplo, escriba "Gastale para obtener más información" o "Haga clic en" Más "para ir al sitio de la tienda".

Al configurar la publicidad

Agregar un enlace al configurar la publicidad es un proceso más consumidor de tiempo, pero también más eficiente. Para configurar la publicidad, primero debe ir a la configuración de la cuenta comercial de Instagram en Facebook y haga clic en "Crear publicidad". O bien inmediatamente vaya al gerente de publicidad de Facebook.

EN gabinete personal Haga clic en "Crear un anuncio" y siga un algoritmo de acción simple.

Seleccione el propósito de la publicidad. Para referencias en historias, se encuentran disponibles 6 goles, incluido el "tráfico", "Instalación de una aplicación", "Conversión". Seleccione el objetivo correspondiente según el formato de la cuenta comercial y el enlace promotable.

Seleccione el propósito de la campaña.Aquí puede elegir clics o verlos. Es decir, pagará por clic en el enlace, o para visitar la página cuando el usuario lleverá sus descargas.

Configurar la cuenta. Si no ha creado un anuncio en Facebook antes, se le ofrecerá especificar la zona horaria, el país y la moneda de la oficina de publicidad.

Ajustar la audiencia. Elija un lugar donde los cables del enlace, en el sitio, la aplicación o el mensajero. Luego especifique los parámetros deseados. público objetivo: Género, edad, intereses y otros.

Elige el espacio publicitario. De forma predeterminada, el anuncio se mostrará en tres sitios. Si solo necesita historias de Instagram, haga clic en "Editar ubicaciones" y deje una garrapata en "Instagram", "Historias".

Instale el presupuesto y seleccione la estrategia de la barra.. Puede establecer el límite de presupuesto diario o la cantidad de toda la campaña, y el sistema en sí lo distribuirá uniformemente. Luego, seleccione la estrategia de la barra: de forma predeterminada, el sistema selecciona el precio más bajo. Si lo desea, puede configurarlo manualmente, para esto, haga clic en "Instalar el límite". Lo que más abajo es la menor posibilidad de que el anuncio se muestre.

Elija formato publicitario. Puede seleccionar una imagen o un video. Desde el punto de vista de la comercialización, es mejor usar el video, a pesar del hecho de que la publicidad tiene un límite de tiempo de 15 segundos, le permite transmitir mejor la idea a los usuarios y agregar un atractivo más prominente a la acción.

Después de llenar los campos necesarios, verá una vista previa. En esta página, puede descargar imágenes o rodillos para declarar, agregue una llamada a la acción, agregue y cambie la URL. Después de ahorrar, su anuncio comenzará a mostrar CA para los parámetros seleccionados y el presupuesto establecido.

Y puedes enviar un enlace a directamente

Directo en Instagram parece un sistema de mensajes personales en otros redes sociales. Si envía uno o unos pocos usuarios a algún correo, lo verán solamente, no se publicará en la cinta.

Hoy en día, la función de agregar un enlace a los mensajes en Instagram está disponible para todo todo. Para agregar un enlace, solo para ir al directorio, seleccione un chat con el usuario que desee enviarlo e ingrese el enlace manualmente o inserte una URL pre-copiada. El enlace estará activo, y el fragmento avanzado con una imagen de título y la descripción de la página se enviarán automáticamente.

Vamos a resumir: cómo publicar un enlace a Instagram

• Añadir a la historia: disponible para aquellos que tienen más de 10.000 suscriptores.
• Añadir a las historias de publicidad - Disponible para todos, pero requiere costos en efectivo.
• Enviar a Direct.