Background
Lately, Facebook added a "carousel" ad format, showing multiple slides in a sponsored post. This is now available for non-business users too.
Facebook example of a carousel ad format
Meta annotation
I am looking for a way to "annotate" my website in a way that it will be showing a carousel in a Facebook post when the url is used in a post. Currently I am using Open Graph (og) meta tags for annotation.
HTML share link
Besides that, I'm looking for a way to add multiple "carousel slides" to a Facebook share link. Currently I am using the following html for Facebook share links:
<a
href="http://www.facebook.com/dialog/feed
?app_id=123
&link=http%3A%2F%2Fmy.url.com
&picture=http%3A%2F%2Fmy.url.com/img.jpg
&name=MyTitle
&caption=MyCaption
&description=MyDescription
&redirect_uri=http%3A%2F%2Fmy.url.com"
target="_blank"
>
Share on Facebook
</a>
Both ways result in the default post format. Can anyone help me with Facebook sharing in carousel format?
This is currently a feature that is being tested and it's not possible to apply for it.
Now this feature is live & when posting on a page select Image format and select carousal, you can add about 6 images to carousal & publish.
Related
I am trying to add share button to albums in website created in Laravel. I have used the code for share button that generated using facebook/developer. The albums are not fixed. It is displaying by fetching from database. So I changed code little to change the link of each album automatically as given below.
<div class="fb-share-button" data-href="http://mysite/albumphotos/{{$album->name}}" data-layout="button">
</div>
But if I try to share into my facebook account, it is showing some other images in my website. How can I show images in my particular album as thumbnail while sharing??
Can anyone help?
As mentioned by #CBroe, first things first:
Make sure you have the proper OG Meta Tags
Run one of the albums' link in the debugger and check if the crawler is pulling the right info
If the date from step 2 doesn't match what you are looking for, update your OG meta tags and try again.
This is my post featured image.
This is my post entitled "First post" with social icons at the bottom for sharing using social media feather plugin
This is what shows up when I clicked the facebook button
The image above shows that it doesn't return the right image set as featured image for the first post to be shared in facebook. I also encountered the same problem using WP Social Sharing. Can anybody help me solve this please. Thanks a lot.
Facebook, and other platforms that allow social sharing (LinkedIn, Twitter, G+, etc), all use a protocol called OpenGraph.
In it's simplest form, OpenGraph is a series of meta tags placed on a web page that describe that page. Common tags include a title of the page, description, image and a category. It is this OpenGraph image that Facebook uses in it's preview for the social share.
The tag itself is called og:image, and Facebook suggest it is at least 1200x630 pixels, although they will still use the image if it is less than that. As a side note for anyone viewing this thread and having the same issue with Facebook apps - you'll need to serve the image over HTTPS for that, something you don't need to do in this case.
I would suggest viewing the source of your page and finding the OpenGraph tags. If none are present (very possible) then Facebook is just doing it's best based on what it sees on the page. You can remedy this by adding your own tags, or using one of the many OpenGraph plugins available for WordPress.
More information on Facebook's best practices for social sharing are available.
I can't see any solutions out there that allow this specific request without a lot of scripting or meta tags so I'm hoping there's a simple way to do this.
I'm looking for a custom share links for all four social networks. Let me give a concrete example.
If someone clicks on a twitter icon link on my site, they're clicking the following:
<a href="https://twitter.com/home?status="Welcome to my site and tell all your friends! #sitename #mysiterules http://bit.ly/site">
<img src="twitter.png">
</a>
it will go to Twitter's site and produce the following:
This allows someone to very quickly promote my site with a custom message that they can change if they like but there's no effort involved outside of clicking the icon link.
This is exactly what I want to do with the other three social networks, with a custom message and links. They can also pull the default logo of my site which twitter can't do.
How can I accomplish this?
I recommend you use the proper social sharing buttons like we implemented in on our live campaign page, but here is some code I stole from a mockup of the campaign page.
<div class="leader-half kids0514-share">Share this on:
<img src="images/en/share_mail.jpg" alt="email">
<img src="images/en/share_fb.jpg" alt="facebook">
<img src="images/en/share_tweet.jpg" alt="twitter">
<img src="images/en/share_pin.png" alt="pinterest">
<img src="images/en/share_plusone.jpg" alt="google plus">
</div>
Not all social sharing buttons are created equal, some have more functionality and even old versions you can still use. Pinterest is pretty minimal. I recommend using the official buttons and full structured meta data, not doing it the way this snippet from the mockup does.
On Facebook you are not allowed to share a prefilled message according to Platform Policy 2.3: "Ensure that all content in the user message parameter is entered by the user. Don’t pre-fill. This includes posts, messages, comments, and captions."
If you want people to share on Facebook I would suggest using the Share button: https://developers.facebook.com/docs/plugins/share-button/
Some Background Info
As of Mar/Feb 2014, the Facebook sharer.php way of sharing content no longer accepts custom parameters. See response from a Facebook engineer.
It used to allow multiple parameters in this form:
http://www.facebook.com/sharer.php?s=100
&p[url]={url}
&p[images][0]={img}
&p[title]={title}
&p[summary]={desc}
So you could override the title, image and description that facebook would scrape from the page, but it seems these are now ignored.
Instead, Facebook now favours the opengraph tags on the page.
So why is this a problem?
This is my scenario: I have a gallery page with multitple images. I have a lightbox that loads an image when clicked, and when the lightbox is shown, I also show share icons for all the major social networks, including facebook.
The facebook sharer url is built up using the above format, so I pass in the specific image together with the image caption. These values are now ignored.
Feed Dialog To The Rescue?
The Feed dialog method of sharing is now the preferred method, and it supports passing in custom images and captions. It works perfectly in my above gallery scenario. But it has a limitation: it does not allow you to share the content on a page you manage like the sharer.php does:
So my question is...
How can I get the Feed Dialog to work like the sharer.php and give the end-user the option to share to a group, friend's timeline or a page he/she manages?
But it has a limitation: it does not allow you to share the content on a page you manage like the sharer.php does
It incorrect statement. You can post anywhere using the Feed Dialog! You can use the to parameter and give it the concerned id where you want to share the feed.
For example
PS Facebook has introduces Graph API v2 today, and introduced new Share Dialogs over Feed Dialogs. I'm not share if that's to your significance but you can have a look.
I am currently working on a rebranding with my company, and I am having some issues with the thumbnails which are appearing next to the facebook posts when someone shares our website. The issue is that our old logo is still appearing in the thumbnail image, and not our new one - not ideal. Is there an easy way of updating the choice of these thumbnails to give the choice of our new logo?
Make sure you have the correct OpenGraph og:tags in your HTML markup and use the Facebook Debugger to scrape your URL and refresh Facebook's caching of your URL; it will show you what metadata Facebook can see for your URL.