社交媒体-通过资产添加社交媒体图标

[TyW]

谨慎

这是一个高级教程Shopify不支持。需要具备HTML, CSS, JavaScript和Liquid的知识。考虑雇佣一名Shopify专家如果您不习惯执行本教程中的步骤。

---

你可以通过两种方式获得社交媒体按钮:

• 选项1
  找一个能完成所有工作的应用。请查看社交媒体部分应用程序商店。我们的一些主题来自主题商店已经启用了此功能。查看你的主题是否已经有一个社交媒体按钮主题编辑器并检查标题，侧边栏，主页和/或页脚菜单。
  
  注意:与自己编写代码相比，此方法可能提供额外的支持选项。如果你预计需要帮助，考虑一个应用程序!
  
  
• 选项2(高级)
  将按钮编码为您想要的任何主题。

寻找Facebook, Pinterest和其他社交网站的按钮和图标去他们的网站，寻找按钮或使用awesome图标仪。

添加按钮

1. 从您的Shopify管理，到欧宝体育官网入口首页>主题。
2. 找到要编辑的主题，然后单击行动>编辑代码。
3. 为了让你的按钮在你的网站上，我们将上传社交媒体图标图像到你的主题。单击资产文件夹打开它。
   
   
   
   
4. 单击添加一个新资产链接。
   
   
   
   
5. 选择计算机上的图标文件，然后单击上传资产。
6. 现在有了物理按钮图标，我们将添加代码以使按钮工作。单击theme.liquid文件，以便在联机代码编辑器中打开它。
   
   
   
   
7. 您在代码中粘贴的行取决于您希望按钮在主题中出现的位置。通过代码查找您的完美位置。这个代码示例是专门为Twitter，但也将适用于Facebook, Pinterest和其他社交媒体:
   
   

   {{'my-twitter-button.png' | asset_url | img_tag | link_to: 'https://twitter.com/iamawesome'， '关注我的twitter'}}

   
   用HTML替换按钮代码:
   
   

8. 保存您的更改。

有关主题编辑的更多信息，请阅读我们的设计政策。

[TammyTaz]

我用了上面的，它工作得很好，但唯一的问题是我的按钮是巨大的-我如何使它变小?

[thilonieke]

我也一样……只有一个非常大的图标

[eiizumidesign]

你好，你解决这个问题了吗?

[eiizumidesign]

你好,

1)您需要重新调整SVG图像大小为20x20px，并再次将其保存为SVG文件，在矢量图像编辑器如Adobe Illustrator中。
2)从您的Snippets下的另一个社交媒体图标(例如“icon-facebook.liquid”)复制并粘贴此代码到新社交媒体图标，说“icon-linked .liquid”;

3)在文本应用程序中打开SVG文件并将其归档d = "svg的数据”;复制并粘贴这个长字符串svg的数据在你的新社交媒体图标，说“icon-linked .liquid”;

• svg的数据" / > < / svg >

这对我很有效。

[abraham323]

谢谢，我会试试的，然后告诉你效果如何。我很感激!

[Chrisc1623]

我已经完成了这些步骤并创建了新的“icon-linkedin.liquid”file with the SVG data from my image. However, it's not showing up as of yet. How do i link the image file to the snippet as I can't see how it would know where to find the image etc..

最好的

克里斯

[abraham323]

嗨，我试着做你的解决方案，但在我的首个主题图标从图标查找器下载显示为丑陋的小页面与山和云(不是图标)。代码说的是jpg，但即使我输入png，我也得到相同的结果。有没有办法修复它，让我得到真正的图标显示?

[savage21]

嗨

很有见地的指南。

然而，你提供了专门针对Twitter的代码示例。

你能提供whatsapp和instagram的代码吗?

感谢。

谢谢你！

[eiizumidesign]

嗨Savage21,

请跟随上校我之前评论的彩色亮点。

我使用这个例子将现有的Facebook图标转换为LinkedIn图标。

[madari21]

我试图添加Etsy图标，但我按照步骤，它不工作。你能帮忙吗?

[eiizumidesign]

在关注TyW之后，去我的评论并关注我的。我把自己的工作从facebook转移到了LinkedIn。

[Chrisc1623]

我已经按照步骤，没有图像显示。这是我的。“icon-linkedin.liquid”代码。我错过什么了吗?

< svg aria-hidden = " true " focusable = =“演示”类=“false”角色”图标icon-linkedin“viewBox = " 0 0 20 20“> <路径填= d =“# 444 M449.446 c34.525 0 0 62.554 28.03 62.554, 62.554 l0,386.892c0, 34.524 - -28.03, 62.554 - -62.554, 62.554 l - 386.892, 0 c - 34.524, 0 -62.554 -28.03 -62.554 -62.554 l0 -386.892 c0, -34.524 - 28.029, -62.554 - 62.554, -62.554 l386.892 0 zm评选- 288.985,423.278l0, -225.717 l - 75.04, 0 l0,225.717l75.04 0 zm270.539 0 l0 -129.439 c0, -69.333 - -37.018, -101.586 - -86.381, -101.586 c - 39.804, 0 -57.634, 21.891l0 -67.617, 37.266, -31.958 l - 75.021, 0 c0.995, 21.181 0225 .717 0225 .717l75.02 0 l0 -126.056 c0, -6.748 - 0.486, -13.492 - 2.474, -18.315 c5.414, -13.475 - 17.767, -27.434 - 38.494, -27.434 c27.135 0 38.007 20.707 38.007 51.037 l0,120.768l75.024 0 zm评选- 307.552,-334.556 c - 25.674, 0 -42.448 16.879 -42.448 39.002 c0, 21.658 - 16.264, 39.002 - 41.455, 39.002 l0.484 0 c26.165 0 42.452 -17.344 42.452 -39.002 c - 0.485, -22.092 - -16.241, -38.954 - -41.943, -39.002 z " / > " / > < / svg >

克里斯

[eiizumidesign]

嗨,克里斯,

1)你的代码看起来正确;你应该通过文本应用程序编辑和保存SVG文件(不确定如果你直接在Shopify编辑代码上做会有什么影响)

2)检查你是否有文件/上传这个SVG文件到资产上，正如TyW的原始评论线程所提到的。选择计算机上的图标文件，然后单击上传资产。(这应该是上载SVG文件的位置。


如果这些都失败了，再试一次(删除你已经完成的所有步骤):

A)关注TyW的原始评论线程。

当你看到一个巨大的图标…

B)去我的评论日期和时间07-06-2020事故发生点。

对不起，我不是一个编码员/程序员。

[henriettaprice]

嘿，谢谢你解释如何摆脱位标志，我尝试了你的说明关于svg文本编辑器代码的片段。当我将它粘贴到'd='位时，它只是冻结了我的代码页。我在两个不同的窗户上试过，它一点也不喜欢它，它甚至不让男人从窗户出去。有什么建议吗?“我想也许是因为来自svg的文本编辑器太大了?

亨丽埃塔

[eiizumidesign]

嗨henriettaprice,


基本上，我所做的就是复制一个现有的图标，替换成。svg格式的图标。

更改SVG格式的图像图标可能有点复杂。

你必须一步一步地仔细阅读如有OB欧宝娱乐APP必要，重新启动）.

A)跟随TyW原始评论线程彻底。

当你看到一个巨大的图标…

B)去我的评论的日期和时间07-06-2020事故发生点。慢读，仔细执行。

_________________


否则，你可能想试试quipcorp对……的回答11-20-2020 12:01使用PNG格式。

https://community.shopify.com/c/Shopify-Design/Social-media-Add-social-media-buttons/m-p/959853/high..。

[eiizumidesign]

嗨henriettaprice,

按“Ctrl+A”确保输入所有的数据字符串。

[quiqcorp]

我是这样解决的:

1. 抓取你想要的社交图标PNGhttps://www.iconfinder.com/search/?q=facebook
2. 将其上传到您的文件并复制链接，将其用作图像源

{%- endif -%} 
  
  
 
  

• 在页脚。为要添加的每个代码添加以下代码，并删除任何不需要的代码，例如

  {%- include icon_link -%} {{social}}  

[VivekB]

嗨TyW,

非常感谢这个添加社交媒体按钮的快速指南。我试着添加这个代码，它确实工作。然而，就像其他人在这里评论一样，我得到了一个巨大的Instagram/FB图标，当试图在CSS中调整大小时，图标最大位移到页面左侧的最低角落，并且它停止工作。你能告诉我这里出了什么问题吗?我怎么能把图标正确地放在页脚，与右抓住，所以它继续工作?

再次感谢!

[henriettaprice]

你好，泰，

感谢您的教程。我只是想知道你在哪里粘贴这些代码?我对描述有点困惑，因为我找不到任何类似的代码，已经用于已经显示的社交图标。

非常感谢

亨丽埃塔

[CleverGifter]

你也可以直接去

欧宝体育官网入口首页在线商店>自定义主题设置社交媒体

[hahahacheong]

大家早上好

我想添加一个社交媒体按钮到当前的主题，我想知道你是否介意告诉我我应该添加代码到哪里，请?

我已经上传了图标文件- IMG_8642.JPG到Asset

{{' IMG_8642.JPG | asset_url | img_tag | link_to: 'https://artland.com/galleries/ri-galerie'， '在artland上跟随我'}}

我很感激您告诉我应该在哪里找到上面的代码。非常感谢

[eiizumidesign]

你好Hahahacheong,

我认为你需要更多的定制和创建和添加一个社交账号主题设置也一样。

阶段1 -在主题设置中创建一个新的社交媒体帐户
转到页-https://en.shopify.hk/partners/blog/social-media-ob欧宝娱乐app下载地址marketing-icon

1. 去头——”创建主题设置然后完成步骤。
2. 去头——”添加标记到footer.liquid然后完成步骤。
   1. 第4行:”{% -渲染＇icon-twitch＇-%} "icon-twitch是你应该调用的图标(图像)资产。<<EiizumiDesign-这部分可能需要进一步的实验，因为你使用的是JPEG图像而不是ICON，但一旦你完成了其他所有事情，这应该是唯一的障碍。但是如果你想做ICON，你可以点击这里//www.theturtleeffect.com.sg/partners/blog/building-icon-systems-with-svg。为了你的信息，图标在EDIT CODE的ASSETS下。>>
      
      

阶段2 - URL插入和检查您创建的社会媒体帐户阶段的存在:
在哪里找到您的社交帐户链接，并插入您想要的URL "https://artland.com/galleries/ri-galerie"：

1. 主仪表板>销售渠道>在线商店>主题>[自定义]按钮的实时主题(在右侧欧宝体育官网入口首页面板)
   
   
2. 左侧菜单向下滚动>主题设置

1. 主题设置>社交媒体>社交账号

[thesiloshaunt6]

我这样做了，我有按钮，但他们不能工作。他们说找不到页面。

[LeoRobert]

它的工作，但我不知道哪一行我应该粘贴代码，使按钮出现在想要的位置。我想要的社交媒体按钮是在像下面附图的位置。请帮助。

[eiizumidesign]

当你进入主题设置并查看社交帐户时，这些社交媒体帐户选项是否存在?

1. 主仪表板>销售渠道>在线商店>主题>[自定义]按钮的实时主题(在右侧欧宝体育官网入口首页面板)
   
   
2. 左侧菜单向下滚动>主题设置
   
   
   
3. 主题设置>社交媒体>社交账号

[Capt_Dave]

对我没用。我尝试了两个选项，r eg代码和html代码。我在主题后和主题下输入标题。像这样。

{%- section 'header' -%} {{'Instagram.png' | asset_url | img_tag | link_to: 'https://instagram.com/gulfstreamlures?igshid=NTc4MTIwNjQ2YQ==，“在Instagram上关注我们”}}