I am stuck with this one...
I have a website that plays music. The page updates automatically to display the current song being played and the image of the artist. The website also allows visitors to request songs. What I want to do is allow users to then share their request on Facebook, so I have added the code below.
Initially, when you pressed the Facebook button, it would pop up iwth a box which contained all the correct info (song, artist, image, etc), but would not post correctly to Facebook (the dynamic info such as title and image would be missing). Now, recently, it doesn't even populate the pop up correctly.
I'm stuck and cannot figure out how to get this to work correctly, can anyone help me?
Thanks.
<a class="facebook" target="_blank" onclick="return !window.open(this.href, 'Facebook', 'width=640,height=300')" href="http://www.facebook.com/sharer.php?s=100&p[title]=I'm listening to <?php echo $currentSong->title . ' by ' . $currentSong->artist; ?>&p[summary]=Join me and listen right now or request your own song&p[url]=http://www.mydomain.com&p[images[0]=<?php echo $largeimg; ?>"><img src="http://www.mydomain.com/new/images/facebook.png" width="32" height="32" border="0" style="padding-top:5px; padding-right:4px "></a>
Actually, you should only add the URL as parameter (url encoded) to the sharer.php:
<img ... />
It automatically takes the Open Graph data from the shared URL, see this page: http://ogp.me/
I assume all the other parameters are deprecated, at least it did not work for me some months ago. The only thing you could try is to encode all data with the PHP function "urlencode" - but i would suggest using the correct way and implement Open Graph correctly. That way you can even just take the URL, put it on Facebook manually and it will take the correct data.
If the content is completely dynamic, you should consider using Open Graph Actions: https://developers.facebook.com/docs/opengraph/
Or if that is too complicated, use the FB.ui feed dialog:
https://developers.facebook.com/docs/reference/dialogs/feed/
...but don´t forget to include the JavaScript SDK:
https://developers.facebook.com/docs/javascript/quickstart
Related
I need a social media plugin just for FB. I need big share buttons for FB. I have seen it in several websites but I do not know which one it is.
I leave this link to show you what I am talking about (big FB buttons at the beginning and ending of the article):
http://www.viralnova.com/animals-eating-ice-cream/
Any idea?
There's no secret sauce for making big like (that's not a like button, that's share button) button it all comes down to basic knowledge in Facebook developers tools ...
Facebook has the Sharer which accept the GET parameter u which is the URL you want to share on your timeline, on a friend's wall or even in a private message ...
Break Down
You can create a new element or wrapper for your share button I will just use <a> because they seems quick and easy to use for this purpose.
<a class="fsl fsl-facebook" data-href="{URL_to_Share}" href="#">
<span class="fa-facebook fa-icons fa-lg"></span>
<span class="sc-label">Share on Facebook</span>
</a>
pay attention to data-href attribute as you should replace it with the URL you want to share
next we need some JavaScript (jQuery) to make our share button do something
$('.fsl-facebook').click(function(e){ // target all elements with fsl-facebook class in the DOM
e.preventDefault(); // prevent scrolling to top or bottom, because href is set to #
var href = $(this).attr('data-href'); // get URL from the data-href
window.open('https://www.facebook.com/sharer/sharer.php?u=' + encodeURIComponent(href), "", "width=800, height=350"); // pop up a new window, it's prefered to urlencode the URL because of 2nd & 3rd GET parameter that can be found in some URLs (?a=1&b=2&c=3)
});
DEMO
I recently develop a shortener URL script, now I'm trying to add Addthis buttons but the problem is that is sharing the current URL of the site is on. I want the Addthis buttons share the URL that is inside of the URL Input field anybody got some idea on how to do it?
Basically I want to add Addthis buttons and share the URL from a Input field that got the URL shorted .
The Real Question: How can you specify a custom URL for Addthis?
jQuery Solution
HTML
<a href="http://www.addthis.com/bookmark.php" class="addthis_button" id="youmusthaveanid">
jQuery
$('#youridhere').attr('addthis:url', $('#yourinput').val);
Note: Remember you will have to trigger this on every update of the text box if it's content changes after the Javascript has been run on initial load.
PHP Solution
HTML/PHP
<a href="http://www.addthis.com/bookmark.php" class="addthis_button" addthis:url="<?=$yourvariablehere?>"
Source: Addthis API Docs
I am trying to add text to a facebook share link after it pops up. I have looked through the facebook dev site and searched online and the only thing that looked like it might remotely work was adding in meta tags for the Graph API. But I couldn't get them to work or display anything.
Below is the code for the button
<script>
function fbs_click() {
u=location.href;
t='Where is your kind of crowd? Ask StreetPotato';
window.open('http://www.facebook.com/sharer.php?u='+encodeURIComponent(u)+'&t='+encodeURIComponent(t),'sharer','toolbar=0,status=0,width=626,height=436');
return false;
}
</script>
<a rel="nofollow" href="#"
class="fb_share_button social" onclick="return fbs_click()"
target="_blank"
style="text-decoration:none;"
title='Follow us on Facebook'>
<%=image_tag "social/facebook.png", alt:"Follow us on Facebook"%>
</a>
If anyone has any insight or idea how to add in default text, like a hash-tag into the share text box it would be awesome. Thanks for reading.
-Alan
In general, you should not pre-populate any of the Facebook social dialogs that will post on behalf of a user.
See IV.2 of the Platform Policy doc:
"You must not pre-fill any of the fields associated with the following products, unless the user manually generated the content earlier in the workflow: Stream stories (user_message parameter for Facebook.streamPublish and FB.Connect.streamPublish, and message parameter for stream.publish), Photos (caption), Videos (description), Notes (title and content), Links (comment), and Jabber/XMPP"
When using the javascript sdk the app opens a dialog with a link, facebook will fetch some sort of a display for that link, based on the og tags in it, and will put it inside an element with id "UIStoryAttachment".
Is there a way to somehow produce the same UIStoryAttachment display inside a container element of my choice? like, for example something similar to:
<div id="storyContainer">
<div class="fb-story" data-url="MY_PAGE_URL"></div>
</div>
And then:
FB.XFBML.parse(document.getElementById("storyContainer"));
This of course does not exist, but is there anything similar in anyway?
Thanks.
Thanks to How can I display the users profile pic using the facebook graph api? I found out I can retrieve profile picture via
http://graph.facebook.com/[UID]/picture
but this redirects to an image like for example:
http://profile.ak.fbcdn.net/hprofile-ak-snc4/hs1346.snc4/161671_1096373372_1486835_q.jpg
My first question is when I want to display this image should I do(returned from API)
<img src="http://profile.ak.fbcdn.net/hprofile-ak-snc4/hs1346.snc4/161671_1096373372_1486835_q.jpg" />
or should I call the api:
<img src="http://graph.facebook.com/alfredwesterveld/picture" />
Does http://profile.ak.fbcdn.net/hprofile-ak-snc4/hs1346.snc4/161671_1096373372_1486835_q.jpg show my updated profile picture, if update my profile picture on Facebook or does show my old profile picture. I ask these question because when I could call an absolute URL(which resolves to an image immediately) I could safe myself a redirect(round-trip). I believe this could add up especially when I want to get all profile pictures from the visitors of my website.
When you want to display the picture of a user use the second method, that's the good one:
<img src="https://graph.facebook.com/[UID]/picture" alt="" />
Doing like this you'll be sure that each time you'll receive the updated picture of the user, if it was changed recently.
later edit
Related to the cache issue, if you want to save the direct urls in order to improve caching of the pictures I don't suggest doing so because those urls are changing each time a user changes the profile picture, so you might end up displaying an older picture even though the user actually changed it recently.
hi why you not use fbml tag for this?
<fb:profile-pic uid='UID' width='50' height='50'></fb:profile-pic>
EDIT
hello if you want to get photo uploaded by the user then you can get by this
$photos=json_decode(file_get_contents('https://graph.facebook.com/me/photos?access_token='.$cookie['access_token']));
foreach ($photos->data as $friend)
{
?>
<img src="<?=$friend->source?>" width="50" height="50">
<?php
}
All images uploaded by the user can be easily captured