Skip to main content

tips-scripts-banner


For the most part, your landing pages will get the majority of their traffic from targeted ads and marketing campaigns that allow you to have complete control over the traffic quality. But what if you wanted to share your pages on social media?


By default, each social network will attempt to guess which content to grab from your landing pages, which is obviously not ideal as it often scrapes the wrong information.


Luckily, there’s a simple way to override which content is scraped from your landing pages and optimize your pages for sharing by utilizing something called the Open Graph Protocol.


Facebook-2014-03-03


This can be particularly handy for campaigns that involve a contest, or an event where you specifically want others to share the page with their respective networks on Facebook, Google+ or LinkedIn.



How to Install in Unbounce




Click Here for Instructions



🚨

This is not an official Unbounce feature. This functionality is based entirely on third party code, and has only been tested in limited applications. Since this isn’t a supported Unbounce feature, our support team will be unable to assist if things go awry. So if you are not comfortable with HTML, Javascript and CSS, please consider consulting an experienced developer.




Instructions


To set this up on your Unbounce landing pages, just follow this simple step-by-step guide from our documentation and press publish. It’s that easy!


🔗 Optimize Your Landing Pages for Social Sharing (ex. Facebook Images)



Bonus Tips 💡


Want to see how your links will look when shared across various networks? Try these third-party preview tools:




  • iFramely Debug your URLs against oEmbed, Twitter Cards, Open Graph and Iframely specs


  • OpenGraph Check Check your tags and see the results immediately.


If you followed the steps above but still see the old image/copy being shared, it’s likely because the information is cached on the social network. Here are a few quick fixes for some of the more popular networks:



  • For Facebook, simply use their Sharing Link Debugger

  • For Twitter, their process is a bit more complicated. See their Refreshing your Image Card docs.

  • For LinkedIn, the only way to “clear” the sharing preview cache is to trick LinkedIn into thinking your page is a different (and new) page. Basically you just have to add a made-up parameter to the end of the link. Luckily, this doesn’t affect your link in any way, but it does force the metadata to be re-fetched.



Example:

Original link: http://yourlandingpage.com/awesome-contest

“New” link: http://yourlandingpage.com/awesome-contest?1







Can’t see the instructions? Log-in or Join the Community to get access immediately. 🚀




Want to take your Unbounce landing pages + Convertables™️ to the next level?

:spinbounce: Check out the Ultimate List of Unbounce Tips, Scripts & Hacks

I follow all this steps, but nothing happened.

The image appears like that for me, I left even with the information of the tutorial but even so it does not appear anything.


image

Hey Rafael!


A good place to start would be to paste your page into this Facebook debugger.


It might give you a bit more insight into why you’re not seeing what you want. Let me know how it goes!

Great tips above. Wanted to share a tool that might be helpful to others in the community. Unfurls is a platform to preview and optimize your website meta tags. There’s a meta tag builder and a tool to preview how your website will look on 12 platforms. Links below


https://unfurls.co/lookout/ - run a test on your page

https://unfurls.co/lookout/website-preview-builder-meta-tag-generator/ - build previews for your landing page


Feel free to send me a message if you need a hand! =)

Same here, how didi you solve that Rafarquim?

Hey Jess, I have the sam Problme as Rafurquim has had. We defined everything properly and it works on all other medias like twitter, whatsapp, etc. just not on facebook. why is that?

38

I’m having some troubles with mine too. I uploaded my image to Amazon Web as suggested: Working here: https://s3-ap-southeast-2.amazonaws.com/breastfeedingimages/guide2.jpg But then I get an error in FB. The ‘og:image’ property should be explicitly provided, even if a value can be inferred from other tags.


This is the script i’m using.


03%20pm


Any ideas?

Hey @James3333,


Your issue is most probably related to the policy/security/authorization of that S3 bucket.


Of course, try to re-scrape the page a few times because some times the FB Debuger might be a bit buggy.


Best,

Hristian

Thanks so much Hristian, that was the problem indeed! All fixed now 🙂

Thanks again!

J

Mine is also fixed. Take in consideration that it takes up to 4-8 days till FB recognizes the OPG before displaying it properly.

I’m having problems with this :-/

I’ve added the FB share button with iframe (it appears fine, is clickable, etc.), and rechecked the open graph tags a million times. But when I test the button on my preview page, none of the meta data shows up. I’ve used the FB debugger, but since the page isn’t published it isn’t really giving me anything.


Could this be because the page still isn’t published?

Yes, if the page is hidden / unpublished, then platforms will be unable to view the page.

If you need help creating meta tags, meta tag images, or implementation/troubleshooting on unbounce or your main website, my team would be happy to help out.


Pretty sure this article USED to show you how to add an OpenGraph snippet to the “Code” section of the Unbounce page; but now it’s linking to the social media share buttons? That seems a bit disingenuous…


The (below average) Social Widget doesn’t even let you set Title & Description - sorely disappointed in this misappropriation of what used to be useful content.


For anyone interested this is the code which was shared in the past, stick this in "“Manage Scripts” and have it inserted in the “Head”:









I was thinking the same thing. I can’t see your code, though.

I can get my image to display but I see all the metadata. Here’s what I’m seeing:


01%20AM


and here’s my code:


<meta property="og:title" content="Protect Your Payment Rights: Deadline Tracker" />



<meta property="og:url" content="https://www.mylienrights.com"/>



<meta property="og:type" content="website" />



<meta property="og:image" content="https://ibb.co/SRs53h6" />



<meta property="og:image:width" content="1200" />



<meta property="og:image:height" content="628" />



<meta property="og:description" content="Download our free deadline tracker to make sure you're following every requirement needed to maintain your payment rights!" />

Hi @Glenn_Ryan,


Often times external hosting sites, especially the free ones, will not allow you to embed images or use the images in an external script to be called upon.


Try moving the image to a hosting you own and don’t forget to run the Facebook debugger to fetch the new data.


Best,

Hristian

I follow all of these steps and the link preview is working for Facebook and Twitter but on LinkedIn, it is not recognizing the image and is appearing like the below where it it pulls in the correct title and description only

image

Reply


Terms & ConditionsCookie settings