javascript - redes - insertar timeline facebook en mi web
¿Cómo agregar el botón Compartir de Facebook en mi sitio web? (6)
Tengo este código que supone que funciona, pero no funciona. Si esto te ayuda de todos modos, sería genial.
<script src=''http://connect.facebook.net/en_US/all.js''></script>
<p><a onclick=''postToFeed(); return false;''><img src="images/fb.png" /></a></p>
<p id=''msg''></p>
<script>
FB.init({appId: "338334836292077", status: true, cookie:
true});
function postToFeed() {
// calling the API ...
var obj = {
method: ''feed'',
redirect_uri:''https://www.facebook.com/cryswashington?fref=ts'',
link:''https://developers.facebook.com/docs/reference/dialogs/'',
picture: ''http://fbrell.com/f8.jpg'',
name: ''Facebook Dialogs'',
caption: ''Reference Documentation'',
description: ''Using Dialogs to interact with users.''
};
function callback(response) {
document.getElementById(''msg'').innerHTML = "Post ID: " + response[''post_id''];
}
FB.ui(obj, callback);
}
</script>
Quiero agregar el botón Compartir de Facebook en mi sitio web, que solo debe publicar el contenido de mi sitio web en la pared. quien quiere compartirlo
Investigué mucho pero no obtuve nada. Por favor, ayúdame en esto.
Gracias por adelantado.
Compartir el cuadro de diálogo sin necesidad de iniciar sesión en Facebook
Puede activar un cuadro de diálogo Compartir mediante la función FB.ui con el parámetro método compartir para compartir un enlace. Este diálogo está disponible en los SDK de Facebook para JavaScript, iOS y Android al realizar una redirección completa a una URL.
Usted puede activar esta llamada:
FB.ui({
method: ''share'',
href: ''https://developers.facebook.com/docs/'', // Link to share
}, function(response){});
También puede incluir metaetiquetas de gráfico abierto en la página de esta URL para personalizar la historia que se comparte en Facebook.
Tenga en cuenta que response.error_message solo aparecerá si alguien que utiliza su aplicación ha autenticado su aplicación con Facebook Login.
También puede compartir directamente el enlace con la llamada teniendo Javascript Facebook SDK.
https://www.facebook.com/dialog/share&app_id=145634995501895&display=popup&href=https%3A%2F%2Fdevelopers.facebook.com%2Fdocs%2F&redirect_uri=https%3A%2F%2Fdevelopers.facebook.com%2Ftools%2Fexplorer
https://www.facebook.com/dialog/share&app_id={APP_ID}&display=popup&href={LINK_TO_SHARE}&redirect_uri={REDIRECT_AFTER_SHARE}
app_id => Identificador único de su aplicación. (Necesario.)
redirect_uri => La URL a la que redirigir después de que una persona hace clic en un botón en el cuadro de diálogo. Se requiere cuando se usa la redirección de URL.
display => Determina cómo se representa el diálogo.
Si está utilizando la implementación del diálogo de redireccionamiento de URL, esta será una pantalla de página completa, que se muestra en Facebook.com. Este tipo de visualización se llama página. Si está utilizando uno de nuestros SDK de iOS o Android para invocar el cuadro de diálogo, esto se especifica automáticamente y elige un tipo de pantalla apropiado para el dispositivo. Si usa el SDK de Facebook para JavaScript, este tendrá un valor predeterminado en un tipo de iframe modal para las personas que inicien sesión en su aplicación o que esté sincronizado cuando lo usen dentro de un juego en Facebook.com, y una ventana emergente para todos los demás. También puede forzar los tipos de página emergente o de página cuando use el SDK de Facebook para JavaScript, si es necesario. Las aplicaciones web móviles siempre tendrán de forma predeterminada el tipo de pantalla táctil. compartir parámetros
- href => El enlace adjunto a esta publicación. Se requiere cuando se usa el método de compartir. Incluya meta etiquetas de gráfico abierto en la página de esta URL para personalizar la historia que se comparte.
No necesitas todo ese código. Todo lo que necesitas son las siguientes líneas:
<a href="https://www.facebook.com/sharer/sharer.php?u=example.org" target="_blank">
Share on Facebook
</a>
La documentación se puede encontrar en https://developers.facebook.com/docs/reference/plugins/share-links/
Para compartir en Facebook con una imagen sin una API y usar # para un enlace profundo en una página secundaria, el truco era compartir la imagen como picture=
La variable mainUrl sería http://yoururl.com/
var d1 = $(''.targ .t1'').text();
var d2 = $(''.targ .t2'').text();
var d3 = $(''.targ .t3'').text();
var d4 = $(''.targ .t4'').text();
var descript_ = d1 + '' '' + d2 + '' '' + d3 + '' '' + d4;
var descript = encodeURIComponent(descript_);
var imgUrl_ = ''path/to/mypic_''+id+''.jpg'';
var imgUrl = mainUrl + encodeURIComponent(imgUrl_);
var shareLink = mainUrl + encodeURIComponent(''mypage.html#'' + id);
var fbShareLink = shareLink + ''&picture='' + imgUrl + ''&description='' + descript;
var twShareLink = ''text='' + descript + ''&url='' + shareLink;
// facebook
$(".my-btn .facebook").off("tap click").on("tap click",function(){
var fbpopup = window.open("https://www.facebook.com/sharer/sharer.php?u=" + fbShareLink, "pop", "width=600, height=400, scrollbars=no");
return false;
});
// twitter
$(".my-btn .twitter").off("tap click").on("tap click",function(){
var twpopup = window.open("http://twitter.com/intent/tweet?" + twShareLink , "pop", "width=600, height=400, scrollbars=no");
return false;
});
Para su servidor específico o botón de páginas e imágenes diferentes, podría usar algo como esto (solo PHP)
<a href="http://www.facebook.com/sharer/sharer.php?u=http://''.$_SERVER[''SERVER_NAME''].''" target="_blank"><img src="http://i.stack.imgur.com/rffGp.png" /></a>
No puedo compartir el fragmento con esto, pero entenderás ...
Puede hacer esto mediante el uso de JavaScript SDK asíncrono proporcionado por Facebook
Eche un vistazo al siguiente código
FB Javascript SDK inicialización
<div id="fb-root"></div>
<script>
window.fbAsyncInit = function() {
FB.init({appId: ''YOUR APP ID'', status: true, cookie: true,
xfbml: true});
};
(function() {
var e = document.createElement(''script''); e.async = true;
e.src = document.location.protocol +
''//connect.facebook.net/en_US/all.js'';
document.getElementById(''fb-root'').appendChild(e);
}());
</script>
Nota: Recuerde reemplazar su ID de APP con su AppId de Facebook. Si no tiene facebook AppId y no sabe cómo crear, consulte este
Agregar JQuery Library, preferiría Google Library
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js" type="text/javascript"></script>
Cuadro de diálogo Agregar compartir (Puede personalizar este cuadro de diálogo configurando parámetros
<script type="text/javascript">
$(document).ready(function(){
$(''#share_button'').click(function(e){
e.preventDefault();
FB.ui(
{
method: ''feed'',
name: ''This is the content of the "name" field.'',
link: ''http://www.groupstudy.in/articlePost.php?id=A_111213073144'',
picture: ''http://www.groupstudy.in/img/logo3.jpeg'',
caption: ''Top 3 reasons why you should care about your finance'',
description: "What happens when you don''t take care of your finances? Just look at our country -- you spend irresponsibly, get in debt up to your eyeballs, and stress about how you''re going to make ends meet. The difference is that you don''t have a glut of taxpayers…",
message: ""
});
});
});
</script>
Ahora, finalmente, agrega el botón de imagen
<img src = "share_button.png" id = "share_button">
Para obtener información más detallada. por favor haga clic aquí
Puede leer más sobre el botón Compartir aquí en el sitio web de desarrolladores de Facebook
Trabajando JSFIDDLE
También eche un vistazo al botón personalizado Compartir de Facebook JSFIDDLE
Incluye el código Facebook JavaScript SDK justo después de la etiqueta de apertura <body>
<div id="fb-root"></div>
<script>(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
js = d.createElement(s); js.id = id;
js.src = "//connect.facebook.net/en_US/all.js#xfbml=1";
fjs.parentNode.insertBefore(js, fjs);
}(document, ''script'', ''facebook-jssdk''));</script>
Y coloque debajo del código donde desee mostrar el botón Compartir de Facebook
<div class="fb-share-button" data-href="https://developers.facebook.com/docs/plugins/" data-width="200" data-type="button_count"></div>
Verifique JSFIDDLE trabajando