Social share buttons are a fantastic way to reach new supporters and drive more actions to your pages. They are easy to set up in Engaging networks (find out how here) but there are a few common difficulties you may run into. Below are some that we’ve run into and how to resolve them.
Troubleshooting Facebook sharing
1) When I click a Facebook share button, my share details aren’t being picked up, or I’m seeing old Facebook share details
When you share a URL in Facebook for the first time, this triggers a number of actions by Facebook.
- Facebook will check whether it’s seen the URL before
- If so, it will use these stored details as the URL’s share title, description and image
- If it hasn’t seen the URL before, then Facebook will open the URL to take a look (called “Scraping”)
- It will search for certain “meta tags” (more on these later) in the page’s HTML which contain share details for that page: the text, the title, the link and the image
- If the meta tags aren’t there, it’ll make it’s own assumptions, for example using another image on the page as the share image
- Then, Facebook stores these details in their database against the url of the page
Periodically, Facebook will check the URL to see if anything’s changed. But this might be days or weeks. However, you can force this – read on…
What are meta tags?
They are parts of the html of the page that are invisible to visitors but provide information for other services (such as Facebook). For example, the meta tags our system adds to action pages when using the social networking tools look a little like this:
<meta property="og:image" content="http://www.engagingnetworks.net/profiles/engagingnetworks/themes/engagingnetworks_theme/images/sharelogo.gif" /> <meta property="og:title" content="Engaging Networks" /> <meta property="og:description" content="Raise money. Win campaigns. Nurture relationships with your supporters. Our flexible, customisable web tools help your non-profit change the world." />
The reason this is important is because Facebook only saves the details the first time the page is shared. To save loading time later, next time someone shares a page they just retrieve the details from their database (this type of process is called cacheing).
This means that if you share a page, change the Facebook share button details, and then share again you will likely see that the details have not changed. They have just come straight out of facebook’s database.
What can we do?
Luckily, Facebook have provided a way for you to force them to clear their cache and refresh the share details they have stored. You’ll need a Facebook account to do this:
- Go to https://developers.facebook.com/tools/debug/, or if in Engaging Networks edit the page, and in the toolbar go to Social Sharing > Details
- Paste in the URL of your page and click “Debug” (see below)
- It will show you the details it has and potentially some issues. Read through these and see if you can fix them, for example the image you supplied might be too small
- Click Re-Scrape or, if it hasn’t seen the URL before, “Fetch new information”. This will refresh Facebook’s cache
- Check that the correct details appear
- Re-test sharing to see if it works
What URL do I debug?
Which url you debug depends what you have been testing. If your campaign is in demo mode, and you haven’t made it live yet, then debug the demo URL. This is the url you end up on when you click the “test” button. If you campaign is already live, then debug the live url. To obtain this, go to manage campaigns, click on the name of the campaign and copy the first url. But there’s more…
There is a further complication which is that Facebook every formulation of a URL to be unique. That means any tracking values or locales that get appended to the URL means that Facebook will create a different “cached” record for it. When you click the Facebook share icon, we will also append “en_chan=fb” to the URL, so when you debug ensure you include this in your URL. For example
Live example: https://e-activist.com/page/XXXX/petition/1?en_chan=fb&locale=en-GB&ea.tracking.id=
Demo example: https://e-activist.com/page/XXXX/petition/1?en_chan=fb&locale=en-GB&mode=DEMO&ea.tracking.id=
If you’ve set a tracking ID in your social settings for Facebook, then that will be included in the ea.tracking.id part of the URL:
Live example: https://e-activist.com/page/XXXX/petition/1?en_chan=fb&locale=en-GB&ea.tracking.id=facebook
Demo example: https://e-activist.com/page/XXXX/petition/1?en_chan=fb&locale=en-GB&mode=DEMO&ea.tracking.id=facebook
Complicated? Yes, but read on…
An easy solution
The sure-fire way to make sure you are debugging the url that Facebook has the incorrect share details on is as follows.
- Share the campaign on Facebook (so that you share the incorrect details). If you have a spare account you just use for testing, then that is ideal. Otherwise you can always delete the share immediately after following these steps. Or just share it to yourself only:
- Click on the facebook share. This will take you back to the action page using the url that Facebook has stored the incorrect details for.
- Copy the full url you land on from your browser address bar.
- Debug that url.
2) My Facebook share image is incorrect
Check that the image you have linked in the social share section is a valid url. If you can’t go to the image link in your browser, then Facebook won’t either and will just grab another one from the page. Also check that it is the correct size. Facebook say:
Use images that are at least 1200 x 630 pixels for the best display on high resolution devices. At the minimum, you should use images that are 600 x 315 pixels to display link page posts with larger images. If your image is smaller than 600 x 315 px, it will still display in the link page post, but the size will be much smaller.
3) The Facebook text I added to the social share section is not appearing
Sometimes this happens if the Facebook share text is longer than Facebook allows. Try reducing it to 300 characters: Facebook only displays the first 300 characters anyway. If you do change the text, you’ll need to debug again to refresh facebook’s cache.
Troubleshooting Twitter sharing
4) The wrong url is being appended to my tweet, or no url is being appended at all
Did you include a URL in your tweet text? Ensure you paste this into your copy. Also check that the URL is correct – copy and paste it into your browser to see whether it loads.
5) I can’t include an image in the tweet
There are two ways that Twitter will display an image in a tweet. As part of the tweet itself, or as a “card” that appears as a clickable box below (see #6 below). This section is about the former.
When you tweet from Twitter, you can include images in the tweet. But how do you do this from our social sharing tools?
First of all, the image has to exist on Twitter before you can use it in a tweet. And, for this to happen, the picture needs to have been tweeted. You could do this yourself from your own account or from a test account, for example. You can delete the tweet after you have the details.
Once you have tweeted the image, view the tweet and click the date on the tweet. The tweet should then display in a box on the screen. Click the picture in the tweet and the picture should get larger. Then, right-click somewhere on the screen (not on the picture) and View Source. Then, look for a link that starts pic.twitter.com and copy it – that’s the link you want. You can then use that in your tweet text in the social sharing text.
5) I’m not seeing an image (aka a Twitter card)
Like Facebook, Twitter can cache images against a link. See this article for more information on how to make it work.