Crear galería de videos en tu pagina facebook

Lo primero que debes hacer para poder colocar esta galería de videos en tu pagina facebook es colocar la aplicación fbml para poder colocar el código.




CODIGO:

<div style="background:#000000 url(http://img63.xooimage.com/files/8/8/7/muse1236976394-1440x900-23a65fa.png) no-repeat left top; font-family:Arial, Helvetica, sans-serif;font-size:15px;color:#FFFFFF; width:520px;height:700px;">
<div id="photo00" style="display:none;text-align:center;padding-top:200px;"><fb:swf
swfbgcolor="000000"
imgstyle="border-width:3px; border-color:white;"
swfsrc='http://www.youtube.com/v/uJg8U0QMXEQ&autoplay=1'
imgsrc='http://img51.xooimage.com/files/5/a/f/sin-t-tulo-1-239be2d.png'
width='340' height='270' />
<a href="#" clicktoshow="menu" clicktohide="photo00"><img src="http://img50.xooimage.com/files/a/a/1/ee-23a6467.png"/></a>
</div>
<div id="photo01" style="display:none;text-align:center;padding-top:200px;"><fb:swf
swfbgcolor="000000"
imgstyle="border-width:3px; border-color:white;"
swfsrc='http://www.youtube.com/v/T6BMYh6Stjo&autoplay=1'
imgsrc='http://img51.xooimage.com/files/5/a/f/sin-t-tulo-1-239be2d.png'
width='340' height='270' />
<a href="#" clicktoshow="menu" clicktohide="photo01"><img src="http://img50.xooimage.com/files/a/a/1/ee-23a6467.png"/></a>
</div>
<div id="photo02" style="display:none;text-align:center;padding-top:200px;"><fb:swf
swfbgcolor="000000"
imgstyle="border-width:3px; border-color:white;"
swfsrc='http://www.youtube.com/v/4P3SHXQEpRU&autoplay=1'
imgsrc='http://img51.xooimage.com/files/5/a/f/sin-t-tulo-1-239be2d.png'
width='340' height='270' />
<a href="#" clicktoshow="menu" clicktohide="photo02"><img src="http://img50.xooimage.com/files/a/a/1/ee-23a6467.png"/></a>
</div>
<div id="photo03" style="display:none;text-align:center;padding-top:200px;"><fb:swf
swfbgcolor="000000"
imgstyle="border-width:3px; border-color:white;"
swfsrc='http://www.youtube.com/v/FCCv6zC4jtQ&autoplay=1'
imgsrc='http://img51.xooimage.com/files/5/a/f/sin-t-tulo-1-239be2d.png'
width='340' height='270' />
<a href="#" clicktoshow="menu" clicktohide="photo03"><img src="http://img50.xooimage.com/files/a/a/1/ee-23a6467.png"/></a>
</div>
<div id="photo04" style="display:none;text-align:center;padding-top:200px;"><fb:swf
swfbgcolor="000000"
imgstyle="border-width:3px; border-color:white;"
swfsrc='http://www.youtube.com/v/NlbFJANujaU&autoplay=1'
imgsrc='http://img51.xooimage.com/files/5/a/f/sin-t-tulo-1-239be2d.png'
width='340' height='270' />
<a href="#" clicktoshow="menu" clicktohide="photo04"><img src="http://img50.xooimage.com/files/a/a/1/ee-23a6467.png"/></a>
</div>
<div id="photo05" style="display:none;text-align:center;padding-top:200px;"><fb:swf
swfbgcolor="000000"
imgstyle="border-width:3px; border-color:white;"
swfsrc='http://www.youtube.com/v/8e3Amp4SgOY&autoplay=1'
imgsrc='http://img51.xooimage.com/files/5/a/f/sin-t-tulo-1-239be2d.png'
width='340' height='270' />
<a href="#" clicktoshow="menu" clicktohide="photo05"><img src="http://img50.xooimage.com/files/a/a/1/ee-23a6467.png"/></a>
</div>
<div id="photo06" style="display:none;text-align:center;padding-top:200px;"><fb:swf
swfbgcolor="000000"
imgstyle="border-width:3px; border-color:white;"
swfsrc='http://www.youtube.com/v/NBOQc3L1t1A&autoplay=1'
imgsrc='http://img51.xooimage.com/files/5/a/f/sin-t-tulo-1-239be2d.png'
width='340' height='270' />
<a href="#" clicktoshow="menu" clicktohide="photo06"><img src="http://img50.xooimage.com/files/a/a/1/ee-23a6467.png"/></a>
</div>
<div id="photo07" style="display:none;text-align:center;padding-top:200px;"><fb:swf
swfbgcolor="000000"
imgstyle="border-width:3px; border-color:white;"
swfsrc='http://www.youtube.com/v/NuUZ37Xxymk&autoplay=1'
imgsrc='http://img51.xooimage.com/files/5/a/f/sin-t-tulo-1-239be2d.png'
width='340' height='270' />
<a href="#" clicktoshow="menu" clicktohide="photo07"><img src="http://img50.xooimage.com/files/a/a/1/ee-23a6467.png"/></a>
</div>
<br>
<div id="menu">
<ul>
<span style="float:right;padding-top:270px;padding-right:30px" >
<li >
<a href="#" clicktoshow="photo00" clicktohide="photo01,photo02,photo03,photo04,photo05,photo06,photo07,menu" &gt;<img src="http://img62.xooimage.com/files/4/6/c/01-239c04f.png" /></a></li>

<li><a href="#" clicktoshow="photo01" clicktohide="photo00,photo02,photo03,photo04,photo05,photo06,photo07,menu"><img src="http://img50.xooimage.com/files/0/1/7/02-239c05c.png" /></a></li>

<li><a href="#" clicktoshow="photo02" clicktohide="photo01,photo00,photo03,photo04,photo05,photo06,photo07,menu"><img src="http://img52.xooimage.com/files/f/d/b/03-239c068.png" /></a></li>

<li><a href="#" clicktoshow="photo03" clicktohide="photo01,photo02,photo00,photo04,photo05,photo06,photo07,menu"><img src="http://img51.xooimage.com/files/6/8/0/dark-23a60a2.png" /></a></li>

</span>
<span style="float:left;padding-top:270px;padding-left:30px;">
<li style="><a href="#" clicktoshow="photo04" clicktohide="photo01,photo02,photo03,photo00,photo05,photo06,photo07,menu"><img src="http://img60.xooimage.com/files/e/2/a/04-23a60c2.png" /></a></li>

<li><a href="#" clicktoshow="photo05" clicktohide="photo01,photo02,photo03,photo04,photo00,photo06,photo07,menu"><img src="http://img54.xooimage.com/files/1/c/c/06-23a60c9.png" /></a></li>

<li><a href="#" clicktoshow="photo06" clicktohide="photo01,photo02,photo03,photo04,photo05,photo07,photo00,menu"><img src="http://img63.xooimage.com/files/a/e/6/tt-23a60f4.png" /></a></li>

<li><a href="#" clicktoshow="photo07" clicktohide="photo01,photo02,photo03,photo04,photo05,photo06,photo00,menu"><img src="http://img51.xooimage.com/files/d/1/6/08-23a614f.png" /></a></li></span>
</ul>
</div>
</div>

<div style="height:37px;color:#808080;font-size:10px;text-align:center;padding:10px 0 0 0;">
Copyright &copy; 2010<a href="http://www.facebook.com/trucosfb"> Trucos FB</a><br />
Redesign by <a href="http://cosasparaelface.blogspot.com">TRUCOS FACEBOOK</a>
</div>
</div>

Como verán yo utilice swf, para colocar videos de youtube, pero también podrías modificar toda esa zona de código para colocar  tus propios videos.

También le di un fondo, la primera parte del código, donde le podrás modificar la imagen y el color, también podrías modificar el tamaño.

Todo el código es modificable dependiendo de lo que desees realizar.
Share this post
  • Share to Facebook
  • Share to Twitter
  • Share to Google+
  • Share to Stumble Upon
  • Share to Evernote
  • Share to Blogger
  • Share to Email
  • Share to Yahoo Messenger
  • More...

0 comentarios:

Publicar un comentario