I have searched and searched the forum but was either unable to find a forum that dealt with my problem or wasn’t able to follow the solution.
I am able to setup sharing capabilities for my websites using the Facebook plugin (for example) without a problem but I’m wanting to change the social media icon that appears on the published site. The default icons are quite old and small and I want something a bit different. Please check out this website which has the exact kind of thing I’m looking for (Study: Not All Millennials Use Social Media the Same Way). It has nice big round icons that are nice and clear and I want to be able to have something like that. How do I go about getting something like that/changing the default icon image?
If you look at the “strategic position” page I have added the share button with the solution that Facebook provide (Share Button - Social Plugins - Documentation - Facebook for Developers). I don’t like the icon though and want to be able to change the icon as per the example shown above. One other problem I have noticed is that while the share function works it doesn’t pull through the content from that page? Any help? If you then look at the “what is strategy” page you will see that I have followed the steps set out here (Custom-designed Social Media Icons - General - Forum | Webflow) from the Webflow forum but it doesn’t work. You can’t see the icon and you’re not able to share anything.
Hi @jamesphtaylor, when using the FB share plugin, and want to use a custom icon, you need to do some coding using the Javascript SDK:
On the sharing issue, the FB debugger complains that an OG:IMAGE tag is not present on the page, which is true, I looked at the page and there is not one set on the strategic-position page.
You can upload an image you want to use to the asset manager, then look at the image properties in the asset manager and copy the url from there to paste into the OG Image URL field.
My suggestion is to check those things first, and separate the two tasks. Get the sharing working first, then concentrate on the button icon change
You can bind a javascript interaction to a link block with this code.
So go ahead and create a link block, give a background image (the sharing image you want to use). With an easy to remember class. Let’s say that class is “share”.
Then use the embed/custom code widget and add the following code:
<a class="share" href="javascript:fbshareCurrentPage()" target="_blank" alt="Put in alt description here">If you want a text link, use this or just delete this text</a>
<script language="javascript">
function fbshareCurrentPage()
{window.open("https://www.facebook.com/sharer/sharer.php?u="+escape(window.location.href)+"&t="+document.title, '', 'menubar=no,toolbar=no,resizable=yes,scrollbars=yes,height=300,width=600');return false; }
</script>
I have the js needed for custom tweets on custom icons/links as well
Will be making a page with those on there soon.
Let me know if you have any questions please. I’m changing this post type to Custom/Embed from Need Help for easier indexing.
All of my Twitter share links for my blog posts will have different messages for each dynamic blog page. Is there are a way to automatically populate the Twitter Tweet, say with the title of the blog post for each dynamic blog page?
PS - Thanks Waldo for your last post - it has helped although I am struggling with getting the Twitter one to work.
Sorry for the delayed response. This fell down the list of tasks because I couldn’t get it fixed.
Thanks Dave for helping me with the image. I managed to fix that really easily so thanks.
Thanks Waldo for the help. I have tried to follow your instructions but wasn’t able to get the desired result. The link just takes me to my Facebook page rather than sharing the icon. I’m wanting to have this for more than Facebook and Twitter too. At least those two and LinkedIn and Google+. Is there not some more universal way of doing this that doesn’t require Waldo having to create something for each platform?
