Facebook Feed Dialog doesn't always show image - share

I have a Drupal site that allows users to share content to some networking/social websites - in this case, facebook specifically. We had a feed dialog set up to handle this sharing such as:
<a class="facebook" href="https://www.facebook.com/dialog/feed?app_id=*removed*&link={{ url('<front>') }}/node/{{ row.nid }}&picture={{ url('<front>') }}{{ file_url(row.preview_image_uri) }}&name={{ row.title }}&redirect_uri=http%3A%2F%2Fwww.facebook.com%2F" alt="Share this graph on Facebook" title="Share on Facebook" target="_blank">
That was working fine until a week or two ago, when facebook's documentation says they phased out some of those parameters, namely 'picture'. I rewrote it to be:
<a class="facebook" href="https://www.facebook.com/dialog/feed?app_id=*removed*&display=page&link={{ url('<front>') }}node/{{ row.nid }}&name={{ row.title }}&redirect_uri=https://www.facebook.com&show_error=true" alt="Share this graph on Facebook" title="Share on Facebook" target="_blank">
but now there is no consistent preview image being displayed. Has anyone else run into this problem and know how to affix a consistent preview image? There is a 'source' parameter that I tried inserting as:
&source={{ url('<front>') }}{{ url(row.preview_image_uri) }}&picture={{ url('<front>') }}{{ url(row.preview_image_uri) }}
but to no success.
I've also noticed that sometimes the images DO pull, but only after I've tried sharing a bunch of times. Could this be due to some sort of caching?

Related

How to use facebook share plugin using bootstrap button?

I am trying to use facebook share button to my wordpress theme. I have use this code for that
<div class="fb-share-button btn btn-default" data-href="<?php the_permalink(); ?>" data-type="button_count"></div>
It is showing the share button. You can check the result here http://www.racecarwow.com/crazy-crash-v2-0/ . But my goal is , the share button will be look like the share button of this site http://blog.petflow.com/bravo-heroic-little-girl-saves-a-trapped-puppys-life/ .
I think, http://lipis.github.io/bootstrap-social/ will be a good solution for me. But i could not understand how can i use <div class="fb-share-button btn btn-default" data-href="<?php the_permalink(); ?>" data-type="button_count"></div> to that button. Please help me.
Yes ! i have got the solution by combining following the two site
http://ostr.io/code/html-social-like-share-buttons-no-javascript.html
http://lipis.github.io/bootstrap-social/
Hope it will be helpful for other person.
Well, it appears, that you have a slight mistake in your code, there is no function like the_parmalink() in Wordpress so far, but the correct one is the_permalink().
This function retrieves the permanent link to the post currently being processed in The Loop (as you can guess from it's name).
This tag must be within The Loop, and is generally used to display the permanent link for each post, when the posts are being displayed. Since this template tag is limited to displaying the permalink for the post that is being processed, you cannot use it to display the permalink to an arbitrary post on your web site.
Refer to get_permalink() if you want to get the permanent link for a post, given its unique post id.
So fix your code and try again:
<div class="fb-share-button btn btn-default" data-href="<?php the_permalink();?>" data-type="button_count"></div>

facebook like button showing extra information

I am using facebook button tag (http://developers.facebook.com/docs/reference/plugins/like/) and used this tag
<fb:like href="http://developers.facebook.com/docs/reference/plugins/like/" send="false" show_faces="false" ></fb:like>
But it is showing me more than I asked for. It works fine in firefox but it shows some extra information on safari. How can I get rid of that signup link?
AS Scott indicated I think this is working as designed. When in Firefox you are likely signed into facebook - hence the like button displays as you want it to display. But when you are in Safari you are NOT logged in (there's no facebook cookie - probably because you use FF as your default browser). So you get the info and the signup button.
As for the "extra" information you should experiment with
type="box_count"
and or
type="button_count"
The default is "standard" - so perhaps one of the other types will be more suited to your layout.
if you aren't connected to Facebook, you will always see the Sign Up button, if you don't Want show the Sign Up link, you can use a div container with Overflow:hidden property
<div class="containerLike">
<fb:like href="http://developers.facebook.com/docs/reference/plugins/like/" send="false" show_faces="false" ></fb:like>
</div>
and in css:
.containerLike {overflow:hidden;
width: Your selected width;}

Why is Facebook's sharer.php properly displaying some of my thumbnails, but not others?

OK, this is my first question on SO, so be gentle. Doing my best to be thorough. :)
We want users to be able to share URLs specific to ordering photos of their children on our site. We currently have no interest in implementing Open Graph on our site. We're not trying to track that data at this time, and it's more work than I have time for anyway. So I opted for the quickest route: the sharer.php link.
I realize that FB's sharer.php is deprecated in favor of 'og:' tags, but see no indication at https://developers.facebook.com/docs/reference/plugins/share-links/ - which was updated three weeks ago, so it obviously should still work.
I followed the instructions in these blog posts to customize the links:
http://ar.zu.my/how-to-really-customize-the-deprecated-facebook-sharer-dot-php/
http://www.therykers.net/?p=37
However, we only get thumbnails to properly display in the FB Share dialog when using our site's demo subdomain, even though the source code for our sharer.php link is identical in all instances (aside from the image/name of the child, the site's subdomain, and the photography studio name).
This source code (demo site) properly displays the image:
<a href="https://www.facebook.com/sharer.php?
s=100
&p[url]=https://demo.mysmilecentral.com/public/show?link_code=funankizwd
&p[images][0]=http://assests0_bop_heroku_com.s3.amazonaws.com/images/sp00/sp00-001-1/0106_022_0028.jpg
&p[title]=Order%20Pictures%20of%20CASEY%20at%20Sample Studio's%20MySmileCentral!
&p[summary]=View%20images%20and/or%20order%20pictures%20of%20CASEY." target="_blank">
<img src="https://assests0_bop_heroku_com.s3.amazonaws.com/images/fb-share-btn2.png" style="margin-top: -35px; margin-right: 126px; float: right" />
</a>
But this ('live' site) doesn't:
<a href="https://www.facebook.com/sharer.php?
s=100
&p[url]=https://rowlandphoto.mysmilecentral.com/public/show?link_code=2cols21uogpx
&p[images][0]=http://assests0_bop_heroku_com.s3.amazonaws.com/images/bj20/bj20-bb2013-1/1448_img_0128.jpg
&p[title]=Order%20Pictures%20of%20Gabrielle%20at%20Rowland Studio's%20MySmileCentral!
&p[summary]=View%20images%20and/or%20order%20pictures%20of%20Gabrielle." target="_blank">
<img src="https://assests0_bop_heroku_com.s3.amazonaws.com/images/fb-share-btn2.png" style="margin-top: -35px; margin-right: 126px; float: right" />
</a>
Both images meet the dimension requirements of FB Share, and are publicly viewable.
I've spent several hours trying to find an answer (Googling, searching here), and haven't come up with a logical reason for this.
If you open up your web inspector you would realize that https://www.facebook.com/sharer.php deprecated redirects to https://www.facebook.com/sharer/sharer.php, which only has one supported parameter u for the url being shared which depends on Open Graph meta data (which you have opted not to use).
The p array (p[url], etc) is not supported in the new Facebook Share dialog. By using deprecated features, you should expect unstable behaviour or no results at all. There isn't anything much more to say about that.

Adding text to a facebook share pop up (javascript not hardcoded html string)

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"

AddThis : Cutomization

I have added Addthis widget to a website. Here is the autogenerated code which I have tweaked little bit:
<script type="text/javascript">
var addthis_config = {
"data_track_clickback": true,
services_compact: 'facebook, twitter,googlebuzz, digg, stumbleupon',
services_expanded: 'facebook, twitter,googlebuzz, digg, stumbleupon',
ui_cobrand: "ABC Company",
ui_header_color: "#ffffff",
ui_header_background: "#000000"
}
</script>
<script type="text/javascript" src="http://s7.addthis.com/js/250/addthis_widget.js#pubid=ra-4dde778a54a20e05"></script>
<script type="text/javascript">
var addthis_share = {
templates: { twitter: 'check out {{title}} : {{url}} #ABC' },
url_transforms : { clean: true }
}
</script>
<div class="addthis_toolbox addthis_default_style ">
<a class="addthis_button_compact">
<img alt="Share" src="../images/icons/share.gif" /><img alt="ABC" src="../images/icons/financial_tip.png" />
</a>
</div>
I have added facebook, twitter, google buzz, StumbleUpon and Digg links inside the ADdthis compact and expandable widgets.
When I click the Share link, following window pop ups:
I dont want the Addthis footer to appear in the pop up window. I tried finding the div with jquery doc load and removing it..but it didnt help.
Other thing is when I click FB, it opens my account and the following message is displayed about posting on my wall:
Addthis is appending some garbage at the end of the shared url:
e.g after index.aspx starting from # to ;facebook ..it is appending some data that is irrelevant... how to fix it ..any idea...
If I share it on twitter, the login screen to twitter
I dont want the Addthis message in footer..how to hide/delete it
Similar to FB, when i login to my twitter account, some garbage is added to the end of the shared url:
Moreover, whenever i click any icon inside the compact Addthis list, Fb or twitter, a small window pop ups:
Can anyone help me with these.
THanks.
About twitter issue, you can use somthing like this..
<script type='text/javascript'>
var addthis_share =
{
templates: { twitter: '{{title}}: {{url}}' }
}
</script>
And change
<a class='addthis_button_tweet' tw:via='YOUR-USER-NAME'/>
I never tried other services. But have a look at Addthis API. I think you can find out something.
Malinda's answer is basically correct but doesn't explain what's going on - I think it's important to understand a bit more.
The question says, "Addthis is appending some garbage at the end of the shared url". This isn't garbage. The value after the #hashtag is a semi-random number generated by Addthis that can help you build really useful social media reports that can even show you which of your shares are re-shares - a critical component in modeling viral growth rates (which is what you want from social sharing). You can read more about that here: http://support.addthis.com/customer/portal/articles/381254-address-bar-sharing-analytics.
What Malinda's solution does is override the default Addthis Twitter template to omit this tracking data. That certainly works - you should just realize what you're giving up in terms of tracking your social media campaign.