Home · About · Blog · Sígueme en Twitter aquí

Definir imagen,texto,url manualmente en el botón compartir de facebook

by beto on February 3, 2012

Si no puedes acceder o modificar los metas de las páginas para definir lo que se compartira en facebook con <meta name=”image_src” y meta name=”description”,
puedes intentar esta forma de hacerlo en la que se definen exactamente lo que se compartirá.

En el ejemplo es un link simple, puedes personalizar el botón como quieras para la acción de compartir .

<a href='http://www.facebook.com/sharer.php?s=100&amp;p[title]=TITULO+QUE+QUEREMOS+COMPARTIR&amp;p[url]=URL&amp;p[images][0]=URL_IMAGEN&amp;p[summary]=TEXTO' target="_blank">Botón texto Compartir</a>

 

Sustituye los campos en negrita por las variables o el texto correcto. Utiliza encodeURIComponent() para codificar las urls y textos. De forma que no haya espacios ni carácteres especiales.
Puedes hacer que se abra en un popup, o lo que necesites. Lo imporante es saber que puedes pasarle los datos que quieres que se muestren en facebook al compartir una página, sin tocar los meta tags.

Navegadores compatibles con HTML5/CSS 3

by beto on February 2, 2012

Compatibilidad de HTML5 / CSS3 por atributos/propiedades y navegador.
Fuente: http://www.findmebyip.com/litmus/

Página de Wikipedia sobre HTML5
Wikipedia: http://en.wikipedia.org/wiki/HTML5

Página de Wikipedia sobre el tag VIDEO exclusivamente
Wikipedia: http://en.wikipedia.org/wiki/HTML5_video

Desarrollador con trabajo VS Desarrollador sin trabajo

by beto on January 30, 2012

Recopliación Pogo Remixes Disney

by beto on December 27, 2011

Ajustar imagen Background al 100% de la pantalla

by beto on December 24, 2011

Problema:
El Background (imagen) no ocupa todo el alto de la pantalla.
Background-size no es compatible con todos los navegadores.

Solución:

	body {
		background-repeat: no-repeat;
		background-size: 100% 100%;
		-moz-background-size: 100% 100%; /* aquí está lo que buscas */

		background:url(a.png); /* archivo imagen background */

		margin:0px; /* opcional */
		padding:0px; /* opcional */
	}

 

Se ajustará la imagen para que ocupe todo el fondo de la página, se distorsionará la imagen según se requiera.

CSS sólo para iphone. Ajustar el tamaño del texto

by beto on December 23, 2011

Ok, ya tienes tu web funcionando. Hora de mirarlo en todos los navegadores. iPhone.

Problema0 : CSS condicional solo para iphone
Problema con las etiquetas html “p” el tamaño de letra es diferente.

Solución:

@media screen and (max-device-width: 480px){
	/* Todo el CSS para iPhone va aqui */
       p { -webkit-text-size-adjust: 100%;}
}

La primera línia digamos que hace el css condicional solo para dispositivos de max-width 480;
-webkit-text-size-adjust: Ajusta los textos para que se vean igual que en el navegador.

Feliz_Navidad(2011);

Solución 1and1 y Rewrite Engine htaccess

by beto on December 22, 2011

Antes de los Rewrite Rules introduce lo siguiente:

DirectoryIndex index.php
Options -MultiViews
RewriteBase /
RewriteEngine On

Nuestros cerebros están mal conectados TED TALK

by beto on December 10, 2011

Próximamente iPhone Ninja

by beto on October 20, 2011

Encuentra tu desarrollador Freelance iPhone próximamente en www.iphoneninja.info (en construcción)
Consulting & Desarrollo

Find your iPhone Freelance Developer at www.iphoneninja.info (in the next days) to get iPhone Consulting and Developing.

Tiny MCE ImageManager. Insert Uploaded Images Automatically

by beto on October 1, 2011

I am talking about:

Uploading and inserting images using ImageManager (TinyMCE plugin) in 3 clicks, instead of 4 and without search for your uploaded images inside the image file list. Images will be inserted in tinyMCE’s textarea automatically.

Ninja solution:

line 528: imagemanager-path/pages/im/js/imagemanager.js . Look for “onupload : function(){”

onupload : function(e) {
//Imagemanager.listFiles();
 if (e.files.length > 0 ){
  var s = t.currentWin.getArgs();selectedPaths=[];
  $(e.files).each(function(i, v) {
    selectedPaths.push(v.path); });
  RPC.insertFiles({
    relative_urls : s.relative_urls,
    document_base_url : s.document_base_url,
    default_base_url : s.default_base_url,
    no_host : s.remove_script_host || s.no_host,
    paths : selectedPaths,
    progress_message : $.translate("{#common.image_data}"),
    insert_filter : s.insert_filter,
    oninsert : function(o) {
      if (s.oninsert) {
        $(o.files).each(function(i, v) {
                t.focusedFile = v; o.focusedFile = v; s.oninsert(o);
        });
      }
        t.currentWin.close();
      }
  }); // end RPC.exec
} // end if
} // end onupload

 

Note: function(e){
Paste this code inside your onupload:function(){
That’s it.

Problems of this solution
- It’s not a plugin, so if you update your imagemanger, you will have to make this change again.
- If you don’t allow overwrite files, if you try to upload a file that is allready uploaded, this file won’t be uploaded neither inserted in tinymce’s textarea.
- Not tested on IE, just chrome,safari and firefox.

Two days ago, I would payed for this code. I Hope this will be usefull for you.